使用 javascript/ajax 提交具有不同输入类型的 php 表单答案

【问题标题】：submit php form with different input type using javascript/ajax使用 javascript/ajax 提交具有不同输入类型的 php 表单
【发布时间】：2015-04-26 17:27:58
【问题描述】：

我必须通过 ajax 提交带有一些字段 like multiple checkboxes selection 和一些 hidden input fields 的 form，并将 html 内容替换为响应。最后我选择了 javascript/ajax...但是我哪里错了？

 <?php include( 'session.php');
 $userid=$_SESSION[ 'Userid'];
 include( 'connection.php');
 ?>

    <head>
     <script>
 function myFunction() {
var soi = document.getElementById("sweaterownerid").value;
var osp = document.getElementById("osweaterpic").value;
var osi = document.getElementById("osweaterid").value;
var value = [];
        $("input[name*='" + sweater+ "']").each(function () {
       // Get all checked checboxes in an array
        if (jQuery(this).is(":checked")) {
         value.push($(this).val());
            }
        });


var dataString = 'soi1=' + soi + '&osp1=' + osp  + '&osi1=' + osi + '&value1=' + value;
if (soi1 == '' || osp1 == '' || osi1 == '' || value1 == '') {
alert("Please Fill All Fields");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "Usercloset1.php",
data: dataString,
cache: false,
success: function(response) {
$('#mydiv').replaceWith(response);
}
});
}
return false;
}
</script>
    </head>
   <div id="mydiv">
    <div class="padding-top">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
            <div class="shop_item" style="width:100%;">


                <form id="myForm">
                    <?php
                    $sweaterid=$_GET['d'];
                    $sownerid=$_GET['e'];
                    $opic=$_GET['f'];             

                    $query1="select * from `usersweater` where `Sweaterid`='$sweaterid'";
                    $result1=mysql_query($query1);
                    $row1=mysql_fetch_assoc($result1);
                    $sweaternikname=$row1['SNickname'];

                    ?>

                    <div>
                        <ul class="sweaters">
                            <li> <h4><?php echo $sweaternikname; ?></h4> <img src="upload/<?php echo $opic; ?>"> </li>
                        </ul>
                        <ul class="sweater1">

                            <?php
        $query="select * from `usersweater` where `Userid`='$userid' && `Swap`='0' ";
                   $result = mysql_query($query);


            while ($line = mysql_fetch_array($result, MYSQL_ASSOC)){
                                $sid = $line[Sweaterid];
                                $img = $line[Sweaterpic];
                                $nikname = $line[SNickname];
                                $size = $line[Size];
                            ?>

<li> <h4><?php echo $nikname; ?><input type="checkbox" name="sweater[]" value="<?php echo $sid; ?>" /></h4> <img src="upload/<?php echo $img; ?>"> </li>

<?php  } ?>
                        </ul>
                    </div>


                    <input type="hidden" name="sweaterownerid" value="<?php echo $sownerid; ?>">
                    <input type="hidden" name="osweaterpic" value="<?php echo $opic; ?>">
                    <input type="hidden" name="osweaterid" value="<?php echo $sweaterid; ?>">

                    <input type="submit" name="next" onclick="myFunction()" value="NEXT" class="btn woo_btn btn-primary" style="margin-left: 30px;">
                    <input type="button" name="cancel" value="CANCEL" class="btn woo_btn btn-primary">
                </form>
            </div>
        </div>

        <div class="clearfix"></div>
                    <hr>
                </div>
    </div>

我想将选定的选项传递到另一个页面，我现在使用表单操作。但我希望它动态而不重新加载页面。我是 ajax/javascript 的新手。

第二件事是，我如何处理响应，在提交此表单时，我想用我们使用 ajax 获得的响应替换首页内容。这意味着将所有 html 内容替换为其他页面的 html 内容。我在提交后获得了我想要回复的文件。

<div class="padding-top">
	<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
		<div class="shop_item" style="width:100%;">

				<div style="text-align:center;">
					<h4>Are you sure you want to swap?</h4>
				</div>

			<form action="Usercloset2.php" method="post">
				<?php
				include('session.php');
				include('connection.php');
				
				
				
				foreach ($_POST['value1'] as $sid){
			$query1="select * from `usersweater` where `Sweaterid`='$sid'";
				$result1=mysql_query($query1);
				$row1=mysql_fetch_assoc($result1);
				$sweaternikname=$row1['SNickname'];
				$sweaterpic=$row1['Sweaterpic'];
				?>

				<div style=" ">
					<ul class="sweaters">
						<li> <h4><?php echo $sweaternikname; ?></h4> <img src="upload/<?php echo $sweaterpic; ?>"> </li>
					</ul>
				</div>


				<!-------requester's own sweater details--------------->
				<input type="hidden" name="sid[]" value="<?php echo $sid;?>">
				<input type="hidden" name="snikname[]" value="<?php echo $sweaternikname;?>">
				<input type="hidden" name="spic[]" value="<?php echo $sweaterpic;?>">
				
				<?php } ?>

				<!-------requester's show intrest that sweater details--------------->
				<?php
				$sownerid=$_POST['soi1'];
				$opic=$_POST['osp1'];
				$sweaterid=$_POST['osi1'];
				?>
				<input type="hidden" name="sweaterownerid" value="<?php echo  $sownerid;?>">
				<input type="hidden" name="osweaterpic" value="<?php echo  $opic;?>">
				<input type="hidden" name="osweaterid" value="<?php echo  $sweaterid;?>">
				
				<div style="float:right; margin-right:10px;">
					<input type="submit" name="next" value="NEXT" class="btn woo_btn btn-primary">
					<input type="button" name="cancel" value="CANCEL" class="btn woo_btn btn-primary">
				</div>
			</form>
		</div>
	</div>

	<div class="clearfix"></div>
		<hr>
	</div>

【问题讨论】：

<script>????</script> 不如先试试看？关于这个主题，有很多关于 SO 和 Google 的信息。

标签： php jquery html mysql ajax

【解决方案1】：

你可以像这样在你的 Ajax 中使用：

 var form = $('#your_form_id');
 var formAction = $('#your_form_id').attr('action');

 /* Get input values from form */
 values = form.serializeArray();

 /* Because serializeArray() ignores unset checkboxes and radio buttons: */
 values = values.concat(
   $('#your_form_id input[type=checkbox]:not(:checked)').map(
     function() {
       return {
         "name": this.name,
         "value": this.value
       }
     }).get()
 );

 $.ajax({
   'ajax code here'
 });

或者你可以查看https://api.jquery.com/serialize/

【讨论】：

ajax最后一步写的是成功::??,如何处理respose&replace为首页内容...？
现在您的 ajax 代码看起来不错，我认为它现在可以工作了。如果您遇到任何问题，请告诉我？

【解决方案2】：

你可以通过这个实现它。

jQuery(document).ready(function($){
     $("#your_button_id").on('click', function(e){
         e.preventDefault();
         $("#your_form_id") .submit();
     })
})

Ajax

$("#your_form_id").on('submit', function(e) {
  e.preventDefault();
  $.post('URL_HERE', $(this).serialize(), function(response) {
    console.log(response)
  });
});

【讨论】：

without reloading the page，这肯定会重新加载页面
那么你应该使用 ajax, $("#your_form_id").on('submit',function(e){ e.preventDefault(); $.post('URL_HERE', $(this ).serialize(),function(response){ console.log(response) }); });