How to submit a form with AJAX and return a summary of the input values
I have a multipart form and am using the jQuery form plugin.
When a user completes a section of the form and clicks "continue," I would like to send that information to the server and then provide a summary of the submitted information on the same page. With my current code, I get an error unless all of the fields are completed before submission. My guess is that my PHP is completely wrong and that the information I have entered after "data:" is also incorrect.
Any suggestions on how to make this work properly?
PHP:
$return['message'] = array();
if ($_POST['markName1']) {
$return['message'][]='Text' . $_POST['markName1'];
}
if ($_POST['markDescription1']) {
$return['message'][]='More text' . $_POST['markDescription1'];
}
if ($_POST['YesNo1']) {
$return['message'][]='' . $_POST['YesNo1'];
}
echo json_encode($return);
jQuery:
$(form).ajaxSubmit({
type: "POST",
data: {
"markName1" : $('#markName1').val(),
"markDescription1" : $('#markDescription1').val()
},
dataType: 'json',
url: './includes/ajaxtest3.php',
//...
error: function() {alert("error!");},
success: $('#output2').html(data.message.join('<br />'))
//...
HTML:
<form id="mark-form">
<div class="markSe开发者_开发百科lection">
<input type="checkbox" >
<label for="standardCharacter"></label>
<span class="markName-field field">
<label for="markName1" ></label>
<input type="text" name="markName1" id="markName1">
</span>
<label for="markDescription1"></label>
<textarea id="markDescription1" name="markDescription1"></textarea>
<ul class="YesNo">
<li>
<input type="radio" name="YesNo1" value="Yes">
<label for="Yes">Yes</label>
</li>
<li>
<input type="radio" name="YesNo1" value="No">
<label for="No">No</label>
</li>
</ul>
</div>
<div class="step-section">
<p>
<span class="next-step">
<button id="submit-second" class="submit" type="submit" name="next">Next</button>
</span>
</p>
</div>
</form>
You dont need quotes around this markName1:$('#markName1').val()
or markDescription1 : $('#markDescription1').val()
Try putting this for your success callback
success: function(html) {
alert(html);
}
You should change your PHP to this:
$markName1 = $_POST['markName1'];
$markDescription1 = $_POST['markDescription1'];
$YesNo1 = $_POST['YesNo1'];
if(!empty($markName1)){
echo 'Text' . $markName1;
}
if(!empty($markDescription1)){
echo 'More Text' . $markDescription1;
}
if(!empty($YesNo1)){
echo $YesNo1;
}
Note I changed the success function data type to html
EDIT 2
create a button outside the <form>
and replace your ajax with this:
$('#submit-button').click(function() {
$.post('./includes/ajaxtest3.php', $('#mark-form').serialize(), function(html) {
document.getElementById('someDiv').write(html);
}
});
精彩评论