While using my web app, I encountered an issue with my ajax script that submits form data to a different div based on an input tag within the submitting form. Everything works smoothly until the moment the ajax script needs to read the returned ajax data.
Here's the script in question:
<script type="text/javascript">
$(document).ready(function() {
$("form").submit(function() {
// Getting the form ID
var formID = $(this).attr('id');
var hv = $('input[name=target]').val();
alert(hv);
//alert( $("#form2 input[name=target]").val() ); //works
alert ("formID at start is " + formID);
if (formID =="form1") {
var hv = "div2";
alert ("form id at 1st if is " + formID);
}
if (formID =="form2") {
var hv = "response";
}
if (formID =="contact3") {
var hv = "div1";
}
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'file.php',
data: formDetails.serialize(),
success: function (data) {
$('#'+hv).html(data);
},
error: function(jqXHR, text, error){
$('#'+hv).html(error);
}
});
return false;
});
});
</script>
And here is the corresponding HTML code:
<div id="div1" style="background-color:lightblue">
<form name="contact1" action="contact.php" method="POST" id="form1">
<div>Name: <input type="text" name="name" id="name" required /></div>
<div>Email: <input type="email" name="email" id="email" required /></div>
<input type="hidden" name="target" value="form2">
<div><input type="submit" name="submit" value="Submit" /></div>
</form>
<p>This is Div FORM1</p>
</div>
<hr>
<div id="div2" style="background-color:yellow">
<form name="contact2" action="contact.php" method="POST" id="form2">
<div>Name: <input type="text" name="name" required /></div>
<div>Message: <input type="text" name="message" required /></div>
<input type="hidden" name="target" value="response">
<div><input type="submit" name="submit" value="Submit" /></div>
</form>
<p>This is DIV form 2</p>
</div>
<div id="response" style="background-color:brown"><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p></div>
Moreover, there is a file called file.php which contains:
<?php
if(isset($_POST['email'])){
echo "Contact Form 1 Submitted Successfully";
}
elseif (isset($_POST['message'])){
echo "Contact Form 2 Submitted Successfully";
}
elseif (isset($_POST['message'])){
echo "Contact Form 3 in RESPONSE Submitted Successfully";
}
?>
<form name="contact3" action="contact.php" method="POST" id="contact3">
<div>new content: <input type="text" name="contact3" required /></div>
<div>New content <input type="text" name="message3" required /></div>
<input type="hidden" name="target" value="form1">
<div><input type="submit" name="submit" value="Submit" /></div>
</form>
The problem arises when clicking the submit button for form2 as it updates the response div correctly. However, when trying to interact with the loaded contents from file.php, the jQuery script fails to work, causing the browser to post the entire screen to file.php instead of executing the intended ajax posting!
An intriguing mystery indeed!