php - How to submit a form with AJAX and return a summary of the input values -

i have multipart form , using jquery form plugin.

when user completes section of form , clicks "continue," send information server , provide summary of submitted information on same page. current code, error unless of fields completed before submission. guess php wrong , information have entered after "data:" incorrect.

any suggestions on how make 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="markselection">     <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 markname1:$('#markname1').val() or markdescription1 : $('#markdescription1').val()

try putting success callback

success: function(html) {         alert(html);     } 

you should change php 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 changed success function data type html

edit 2

create button outside <form> , replace ajax this:

$('#submit-button').click(function() {     $.post('./includes/ajaxtest3.php', $('#mark-form').serialize(), function(html) {         document.getelementbyid('somediv').write(html);     }     });