in the below code , the alert box is appearing in another window when values are not entered in the fields. but i want the alert box to appear in the same window of html page( detail.htm).how can i do this?
detail.htm:
<body>
<h1> Product: </h1>
<form action="product.php" method="post" >
<input type="text" name= "product_id" size="15" />
<input type="text" name= "price" size="10"/>
<input type = "submit" value = "enter" />
</form>
</body>
product.php:
if (empty($_POST["product_id"]) || empty($_POST["price"])) {
echo "<script>alert('You must enter both values.')</script>";
} else {
include 'product.htm';
}
I think you should use client side validation:
<script language="javascript">
function validate() {
if (document.forms[0].product_id.value == "") {
window.alert("You must enter both values");
return false;
}
if (document.forms[0].price.value == "") {
window.alert("You must enter both values");
return false;
}
}
</script>
And then call the validate() function on onsubmit event of FORM like
<form action="product.php" method="post" onsubmit="return validate();">
You'll have to implement a client-side check in Javascript for that to happen.
Give your form an ID, use JavaScript (or with a library such as jQuery) and do something like the following:
$('#id-of-the-form').submit(function(e) {
var self = this;
e.preventDefault();
var found_empty = false;
$('#id-of-the-form').find(':input').each(function() {
if ($(this).val() == '') {
found_empty = true;
}
});
if (found_empty) {
alert('Please enter all values!');
}
else {
$(this).submit();
}
});
Please note that i am using jQuery in this example!
As a reference, i'm using jQuery to observe the submission of the form, get all fields of the form and check if the fields aren't empty. If they're empty, it alerts, if not - it submits.