HTML:
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
<form name="#" method="POST" onsubmit="return validateForm();">
<table>
<tr>
<td>Select Warehouse:</td>
<td><input type="text" id="W_ID" name="W_ID" placeholder="numbers only"></td>
<span class="invalid-feedback"><?php echo $warehouse_err; ?></span>
</tr>
<tr>
<td>Select District:</td>
<td><input type="text" id="D_ID" name="D_ID" placeholder="numbers only"></td>
<span class="invalid-feedback"><?php echo $district_err; ?></span>
</tr>
<tr>
<td>Select Customer:</td>
<td><input type="text" id="C_ID" name="C_ID" placeholder="numbers only"></td>
<span class="invalid-feedback"><?php echo $customer_err; ?></span>
</tr>
</table>
So I tried to validate user's input for W_ID, C_ID and D_ID. For example, if a user input is some strings then return an error message before submitting. I wrote some Javascript code in this .php file but I couldn't get it to work. Please see JS codes below:
Javascript:
<script>
function validateForm(){
var W_ID = document.getElementById("W_ID").value;
var D_ID = document.getElementById("D_ID").value;
var C_ID = document.getElementById("C_ID").value;
var numbers = /^[0-9]+$/;
//check if input is number
if(!(W_ID.value.match(numbers) {
alert('Please only enter numbers.');
}
else if(!(D_ID.value.match(numbers) {
alert('Please only enter numbers.');
}
else if(!(C_ID.value.match(numbers) {
alert('Please only enter numbers.');
}else {
alert('Successfully! form has been submitted.');
}
</script>
Also how do I wrap JS code inside the PHP? Thank you so much! I've been stuck for long time
"form must not contain other form elements." so you don't have to use two
<form>tags.
Just give your form an ID, and in JavaScript handle the submit event.
<form
id="myForm"
action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>"
method="POST"
>
<table>
<tr>
<td>Select Warehouse:</td>
<td>
<input
type="text"
id="W_ID"
name="W_ID"
placeholder="numbers only"
/>
</td>
<span class="invalid-feedback"><?php echo $warehouse_err; ?></span>
</tr>
<tr>
<td>Select District:</td>
<td>
<input
type="text"
id="D_ID"
name="D_ID"
placeholder="numbers only"
/>
</td>
<span class="invalid-feedback"><?php echo $district_err; ?></span>
</tr>
<tr>
<td>Select Customer:</td>
<td>
<input
type="text"
id="C_ID"
name="C_ID"
placeholder="numbers only"
/>
</td>
<span class="invalid-feedback"><?php echo $customer_err; ?></span>
</tr>
</table>
<button type="submit">Submit</button>
</form>
The script may look like this:
var form = document.getElementById("myForm");
form.addEventListener("submit", function (e) {
e.preventDefault();
var target = e.target;
var formData = new FormData(target);
var data = Object.fromEntries(formData.entries());
var regex = /^[0-9]+$/;
if (
!data.W_ID.match(regex) ||
!data.D_ID.match(regex) ||
!data.C_ID.match(regex)
) {
alert("Only numbers accepted.");
} else {
// Continue form submittion.
this.submit();
}
});
https://codesandbox.io/s/keen-galileo-tvznl?file=/script.js:0-439