My web app has
I have an ajax script that submits form data to a different div based on an input tag that the submitting form has. Works well, except when the ajax script needs to read the returned ajax data.
The script:
<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(); //this only worked for the 1st div, and hadn't worked for the 2nd div
//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";
}
//alert (hv);
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'file.php',
data: formDetails.serialize(),
success: function (data) {
// Inserting html into the result div
$('#'+hv).html(data);
},
error: function(jqXHR, text, error){
// Displaying if there are any errors
$('#'+hv).html(error);
}
});
return false;
});
});
</script>
The 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>
and the file.php file
<?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>
So, basically, when i click on the submit button for form2, the response div gets updated. But when i click on the loaded contents from file.php, the jquery script doesn't work. The browser posts the entire screen to file.php. The ajax posting doesn't work!
Beats me!!!!!
