如何使用单个表单创建具有相同名称的多个表单字段答案

【问题标题】：How to create the multiple form field with same name using single form如何使用单个表单创建具有相同名称的多个表单字段
【发布时间】：2026-02-16 10:55:01
【问题描述】：

$(document).ready(function(){

	 $('select#select_btn').change(function(){
	
    var sel_value = $('option:selected').val();
	if(sel_value==0)
	{
		//Resetting Form 
		$("#form_submit").empty();
		$("#form1").css({'display':'none'});
	}
	else{
		//Resetting Form 
		$("#form_submit").empty();
		
		//Below Function Creates Input Fields Dynamically 
	    create(sel_value);
		
		//appending submit button to form
		$("#form_submit").append(
		$("<input/>",{type:'submit', value:'Register'})
		)
		}	
	});	
	
function create(sel_value){
   for(var i=1;i<=sel_value;i++)   
	   {
	   $("div#form1").slideDown('slow');
	   
	    $("div#form1").append(
		$("#form_submit").append(
		$("<div/>",{id:'head'}).append(
		$("<h3/>").text("Registration Form"+i)),
		$("<input/>", {type:'text', placeholder:'Name', name:'name_'+i}),
		$("<br/>"),
		$("<input/>", {type:'text', placeholder:'Mobile', name:'mobile'+i}),
		$("<br/>"),
		$("<input/>", {type:'text', placeholder:'Email'+i, name:'email_'+i}),
		$("<br/>"),
		//$('select').append($('<option>', {value:1, text:'One',name:'city',placeholder:'City'+i})),
		$("<hr/>"),
		$("<br/>")
	                 ))
	    }
	
	}
	
	
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/multipleform.js"></script>
</head> 
<body> 
<div class ="container">
   <p>Name:
        <input type="text" name="Name" />
    </p>
    <p>Email:
        <input type="text" name="player_email" />
    </p>
      <p>Mobile:
        <input type="text" name="mobile" />
    </p>
     <p> Refer:

<div id="selected_form_code">
 <select id="select_btn">
 <option value="0">--Select No Of Form to Display for Registration--</option>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 <option value="4">Four</option>
 <option value="5">Five</option>
 </select>
 </div>

	<div id="form1">	
		<form id="form_submit" action="#" method="post">
		 <!-- dynamic Registration Form Fields Creates here-->
		</form>
	</div> 
<!------ right side advertisement div ----------------->

	
</div>
</body>

我正在创建一个包含多个表单域的表单，我需要验证所有表单域。我进行了验证，但它无法正常工作。它验证第一个数据并停止验证。

当我选择 Refer 为 1 时，它会显示以下表单字段

姓名
手机
电子邮件
城市
课程

如果我选择 2 意味着它应该显示表单字段两次，并进行验证。

【问题讨论】：

标签： javascript forms validation

【解决方案1】：

问题可能出在您的 javascript 中。为了使验证工作，您需要一些类似于以下的代码

$(function() {
  jQuery.validator.addMethod('phoneUS', function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, '');
    return this.optional(element) || phone_number.length > 9 &&
      phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
  }, 'Please enter a valid phone number.');

  $('#form_submit').validate({
    rules: {
      Name: "required",
      player_email: "required",
      mobile: {
        required: true,
        phoneUS: true
      }
    },
    messages: {
      Name: {
        required: "Please enter your name"
      },
      player_email: {
        required: "Please enter your email"
      },
      mobile: {
        required: "Please enter your phone number",
        phoneUS: "Please enter a valid US phone number"
      }
    }
  })
})

调用jQuery.validator.addMethod() 是必要的，因为默认情况下验证器没有电话号码验证器。（见answer）

您还应该反转您的脚本标签，因为 jQuery 验证插件依赖于 jQuery。

试试

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

而不是

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

编辑

要使动态字段起作用，请将输入添加到表单：

<div id="input">
  <input type='text' name='hide1'/>
  <br>
  <input type='text' name='hide2'/><br>
  <input type='text' name='hide3'/><br>
  <input type='text' name='hide4'/>
  <br>
  <input type='text' name='hide5'/>
</div>

然后你可以在 jQuery 中使用$('#input input').hide(); 隐藏它们。您可以使用 jQuery 显示字段并在 select 元素的 change 事件中添加验证（请参阅plugin documentation）。你可以试试

  $('#select_btn').change(function() {
    var val = $('#select_btn').val();

    if (val > 0) {
      $('input[name=hide1]').show().rules('add', {
        required: true
      });
    } else {
      $('input[name=hide1]').hide().rules('remove');
    }
    if (val > 1) {
      $('input[name=hide2]').show().rules('add', {
        required: true
      });
    } else {
      $('input[name=hide2]').hide().rules('remove');
    }
    if (val > 2) {
      $('input[name=hide3]').show().rules('add', {
        required: true
      });
    } else {
      $('input[name=hide3]').hide().rules('remove');
    }
    if (val > 3) {
      $('input[name=hide4]').show().rules('add', {
        required: true
      });
    } else {
      $('input[name=hide4]').hide().rules('remove');
    }
    if (val > 4) {
      $('input[name=hide5]').show().rules('add', {
        required: true
      });
    } else {
      $('input[name=hide5]').hide().rules('remove');
    }

    $('#input>input:hidden+label').hide();
  });

【讨论】：

感谢您的回复。但是当我选择引用时我需要显示表单域？？？我该怎么做
@user2454624 您想显示与 select 一样多的附加输入吗？
@user2454624 我编辑了我的答案。这就是你要找的东西吗？
它不工作。我需要这样的表格formget.com/…
我创建了表单，但我需要在电子邮件后使用追加创建选择字段。怎么做.....