使用javascript / ajax提交具有不同輸入類型的php表單
[英]submit php form with different input type using javascript/ajax
問題描述
我必須提交包含某些字段的form ， like multiple checkboxes selection通過ajax like multiple checkboxes selection和一些hidden input fields ，然后用響應替換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>
2 個解決方案
解決方案1
0 2015-04-24 06:23:22
你可以做到這一點。
jQuery(document).ready(function($){
$("#your_button_id").on('click', function(e){
e.preventDefault();
$("#your_form_id") .submit();
})
})
阿賈克斯
$("#your_form_id").on('submit', function(e) {
e.preventDefault();
$.post('URL_HERE', $(this).serialize(), function(response) {
console.log(response)
});
});
解決方案2
0 2015-04-24 06:29:31
您可以像這樣在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'
});
PHP / Javascript / AJAX-使用表單重定向頁面，然后提交
[英]PHP/Javascript/AJAX - Redirect page with a form, and then submit it
提交返回錯誤，但仍提交表單-PHP，Javascript，AJAX，CodeIgniter
[英]Submit Return False, But Still Submit Form - PHP, Javascript, AJAX, CodeIgniter
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.