Question

我正在为在线课程创建表单。如果现有学生转介学生意味着他们会得到这笔钱。

我的表单包含姓名，手机号码，电子邮件ID 下拉菜单提供您的推荐详情。例如：我在下拉列表中选择2表示它再次显示2行表格数据

推荐表格值包含姓名，手机号码，城市，课程名称。

根据选择我需要显示和隐藏多个表单字段和我需要进行验证，移动，城市和课程是必填字段。

然后，我需要捕获引用名称并指定学生由引荐者创建。

当我选择引用为2时，它显示字段值两次如何操作。如何进行验证

$(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/>")
	                 ))
	    }
	
	}
  
	
	
});

<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">
<div id="form1">
<form id="form_submit" 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>

     <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>

		
		
		 <!-- dynamic Registration Form Fields Creates here-->
		</form>
	</div> 
<!------ right side advertisement div ----------------->

	
</div>
<?Php
print_r($_REQUEST);
?>

when i select the refer as 2 and then it shows refer form fields 2 times.... i change refer field from 2 to 1 it shows one times of refer field.But,Now its show 3 times(2+1). How to do it....Where i did wrong????

Answer 1

$(document).ready(function(e) {
    $('#select_btn').change(function(e) {
        var selno = $(this).val();
		$('.input').remove();
		for(i=0; i < selno; i++ ){
		$('#input').append('<div class="input'+i+'"><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text" name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City: <select id="city" name="City"><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="B.A">B.A</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>');
		}
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<p>Change the age field and see what happens</p>
<div id="form1">
  <form id="form_submit" 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>
    <p>Refer:
      <select id="select_btn" name="refer">
        <option >select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </p>
    <div id="input">
      <div class="input">
        <p> Name:
          <input type="text" name="name" />
        </p>
        <p> Mobile:
          <input type="text" name="mob" />
        </p>
        <p>Email:
          <input type="text" name="email" />
        </p>
        <p>City:
          <select id="city" name="City">
            <option value="Mumbai">Mumbai</option>
            <option value="Chennai">Chennai</option>
            <option value="Delhi">Delhi</option>
            <option value="Jammu">Jammu</option>
            <option value="Ooty">Ooty</option>
          </select>
        </p>
        <p>Course:
          <select id="course" name="Course">
            <option value="B.com">B.com</option>
            <option value="B.A">B.A</option>
            <option value="MBA">MBA</option>
            <option value="B.Sc">B.Sc</option>
            <option value="BCA">BCA</option>
          </select>
        </p>
      </div>
    </div>
    <p align="center">
      <input type="submit" value="Join!" />
    </p>
  </form>
</div>

Answer 2

$(document).ready(function(e) {
	$("#select_btn").val('0');
    $('#select_btn').change(function(e) {
        var selno = $(this).val();
		$('#input').empty();
		for(i=0; i < selno; i++ ){
		$('#input').append('<div class="input'+i+'"><h2>'+(i+1)+'</h2><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text" name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City: <select id="city" name="City"><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="B.A">B.A</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>');
		}
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<p>Change the age field and see what happens</p>
<div id="form1">
  <form id="form_submit" 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>
    <p>Refer:
      <select id="select_btn" name="refer" value="0">
        <option value="0">select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </p>
    <div id="input">
      
    </div>
    <p align="center">
      <input type="submit" value="Join!" />
    </p>
  </form>
</div>

如何根据使用php的选择启用/禁用表单字段

2 个答案: