我页面上的表单很少(具有少量隐藏字段的按钮)具有相似的特征(id使它们唯一),并且我需要使用jQuery和AJAX(.click)调用操作。我的问题是选择我想要的jQuery表单。现在,有了代码,只要选择第一种形式,就没有问题。我需要有关设置动态选择器的帮助,我该怎么做?提前非常感谢您!
我的HTML:
Form 1:
<form name="smsform-1" id="smsform-1" method='post' class="form-inline">
<input type='hidden' name='id' id='id' value='1'>
<input type='hidden' name='sms' id='sms' value="Sample Text 1">
<input type='hidden' name='phoneno' id='phoneno' value='1111'>
<input type='submit' value='SMS' id='send_sms' data-id='1' class="btn btn-primary btn-xs">
</form>
Form 2:
<form name="smsform-2" id="smsform-2" method='post' class="form-inline">
<input type='hidden' name='id' id='id' value='2'>
<input type='hidden' name='sms' id='sms' value="Sample Text 2">
<input type='hidden' name='phoneno' id='phoneno' value='2222'>
<input type='submit' value='SMS' id='send_sms' data-id='2' class="btn btn-primary btn-xs">
</form>
Form 3:
<form name="smsform-3" id="smsform-3" method='post' class="form-inline">
<input type='hidden' name='id' id='id' value='3'>
<input type='hidden' name='sms' id='sms' value="Sample Text 3">
<input type='hidden' name='phoneno' id='phoneno' value='3333'>
<input type='submit' value='SMS' id='send_sms' data-id='3' class="btn btn-primary btn-xs">
</form>
jQuery的:
$(document).ready(function() {
$('#send_sms').click(function(e) {
e.preventDefault();
var elem = $(this), orderid = elem.attr('data-id');
var testid = $("#id").val();
var testsms = $("#sms").val();
var testphoneno = $("#phoneno").val();
console.log(orderid);
console.log(testid);
console.log(testsms);
console.log(testphoneno);
alert(orderid + +testid + testsms + testphoneno);
});
});
和工作jsFiddle-https://jsfiddle.net/nitadesign/cjqwkrh0/9/
最佳答案
由于您的按钮始终是您想要的隐藏字段的同级对象...
我使用此选择器来找到它们。
请注意,我冒昧地简化了您的HTML。
我使用类(而不是名称和ID)来确定wich。
然后,each()
循环可以检索它们各自的值。
还要注意,我在var
函数外部声明了click()
。
因此它们将对之后运行的Ajax函数(未显示)可用。
$(document).ready(function() {
var orderid;
var sms;
var phoneno;
$('.send_sms').click(function(e) {
e.preventDefault();
$(this).siblings().each(function(){
if($(this).hasClass("orderid")){
orderid = $(this).val();
console.log(orderid);
}
if($(this).hasClass("sms")){
sms = $(this).val();
console.log(sms);
}
if($(this).hasClass("phoneno")){
phoneno = $(this).val();
console.log(phoneno);
}
});
alert("OrderId: " +orderid+ " Message: " +sms+ " phone number: " +phoneno);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Form 1: <form name="smsform-1" method="post" class="form-inline">
<input type="hidden" class="orderid" value="1">
<input type="hidden" class="sms" value="Sample Text 1">
<input type="hidden" class="phoneno" value="1111">
<input type="submit" value='SMS' class="btn btn-primary btn-xs send_sms">
</form>
Form 2: <form name="smsform-2" method="post" class="form-inline">
<input type="hidden" class="orderid" value="2">
<input type="hidden" class="sms" id="sms_2" value="Sample Text 2">
<input type="hidden" class="phoneno" value="2222">
<input type="submit" value='SMS' class="btn btn-primary btn-xs send_sms">
</form>
Form 3: <form name="smsform-3" method="post" class="form-inline">
<input type="hidden" class="orderid" value="3">
<input type="hidden" class="sms" value="Sample Text 3">
<input type="hidden" class="phoneno" value="3333">
<input type="submit" value='SMS' class="btn btn-primary btn-xs send_sms">
</form>