javascript - Jquery - 从具有相同特征的多个表单中选择一个表单(及其值)

Question

我在页面上有几个具有相似特征的表单(带有几个隐藏字段的按钮)(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/

Answer 1

因为您的按钮始终是您想要的隐藏字段的同级... 我使用这个选择器来找到它们。

请注意，我冒昧地简化了您的 HTML。
我使用类而不是名称和 ID 来确定哪个是哪个。
然后，each() 循环可以检索它们各自的值。

另请注意，我在 click() 函数外部声明了 var。
因此，它们将可供随后运行的 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>