【问题标题】:how to enable /disable form field based on selection using php如何使用php根据选择启用/禁用表单字段
【发布时间】:2016-05-18 10:07:55
【问题描述】:

我正在为在线课程创建表格。如果现有学生推荐该学生,则意味着他们将获得这笔钱。

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

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

根据选择我需要显示和隐藏多个表单域和 我需要进行验证,Mobile、City 和 Course 是必填字段。

然后,我需要捕获被推荐人的姓名并分配学生是由推荐人创建的。

当我选择引用为 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????

【问题讨论】:

  • 你尝试了什么?
  • 嗨 kiran,我创建了表单,但我不知道如何验证以及如何存储引用名称
  • 我建议您搜索数据库以存储引用名称。您应该搜索如何使用 php 保存到数据库。这些主题有很多例子,包括验证和清理
  • 好的,谢谢,但是当我点击引用时如何再次显示表单字段是 2

标签: javascript php jquery forms


【解决方案1】:

$(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>

【讨论】:

    【解决方案2】:

    $(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>

    【讨论】:

    • 嗨,Praveen,我如何设置手机号码和姓名。例如,如果在引用中选择两个表示它显示两个表单字段并且两个字段都是必需的。怎么做,它会增加。我需要选择 5 表示它显示该字段 5 次,再次选择 4 表示仅显示该字段 4 次
    • 我想你是在询问表单验证手机、姓名、电子邮件
    • 当我选择 2 它再次显示两个表单域我选择 3 意味着它 (2+3) 5 个表单域。总下拉值是 5 它只显示 5 不增加值????
    猜你喜欢
    • 2019-04-20
    • 1970-01-01
    • 2013-12-14
    • 1970-01-01
    • 2012-05-21
    • 1970-01-01
    • 1970-01-01
    • 2010-11-22
    • 1970-01-01
    相关资源
    最近更新 更多