如何从单页返回多个表单值

时间:2016-06-03 12:27:17

标签: javascript php jquery

我用多个表单字段创建了两个Form。根据选择,它显示字段取决于选择



$(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:'Sumbit'})
		)
		}	
	});	
	
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("Refer Form"+i)),
    $("<h7/>").text("Name: "),
		$("<input/>",  {type:'text', placeholder:'Name', name:'name_'+i}),
		$("<br/>"),
    	$("<br/>"),
     $("<h7/>").text("Mobile No: "),
		$("<input/>", {type:'text', placeholder:'Mobile', name:'mobile'+i}),
		$("<br/>"),
    	$("<br/>"),
         $("<h7/>").text("Email: "),
		$("<input/>", {type:'email', placeholder:'Email', name:'email_'+i}),
		$("<br/>"),
    	$("<br/>"),
     $("<h7/>").text("City: "),
    $("<select>").append('<option val="0">--Select--</option>','<option val="1">One</option>','<option val="2">Two</option>','<option val="3">Three</option>','<option val="4">Four</option>','<option val="5">Five</option>'),
	$("<br/>"),
  	$("<br/>"),
   $("<h7/>").text("Course: "),
    $("<select>").append('<option val="0">--Select--</option>','<option val="1">One</option>','<option val="2">Two</option>','<option val="3">Three</option>','<option val="4">Four</option>','<option val="5">Five</option>'),
		$("<hr/>"),
		$("<br/>")
	                 ))
	    }
	
	}
  
	
	
});
&#13;
<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 class ="container">
<form  action="#" method="post">
   <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>
	</form>
     <p> Refer:

<div id="selected_form_code">
 <select id="select_btn">
 <option value="0">--Select--</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>
&#13;
&#13;
&#13;

如何返回两种表单数据?当尝试打印该值时,它会在数组中显示表单数据值,但它不会打印第一个表单值。如何返回所有表单字段值。

2 个答案:

答案 0 :(得分:0)

我不知道你的需要是否正确:

$("form").submit(function(e){
    e.preventDefault();
    var bigdata = [];
    $.each($("form"), function(k, v){
    bigdata.push($(this).serializeArray());

    })
    console.log(bigdata);
})

Live DEMO JSFiddle

答案 1 :(得分:0)

你做不到。您不能简单地在单个HTTP请求上提交两个表单。

您需要做的是在客户端,您可以组合两个表单中的数据并将其作为单个表单数据提交。

按照链接合并两个单独表格中的数据并作为一个发送。

Merge values from two forms on submit