我页面上的表单很少(具有少量隐藏字段的按钮)具有相似的特征(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>

10-05 20:50
查看更多