Sakthi S Sakthi S - 6 months ago 33
Javascript Question

how to enable /disable form field based on selection using php



<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#select_btn" name="refer">

<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">
<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>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>
</div>





I am create the form with for online course. if the existing student refer the student means they will get the money.

My form contain Name,Mobile No,Email Id
Give your referral details as drop down.
Eg: i select 2 in the drop-down means it show the 2 rows form data again

Referral form value contain Name,Mobile No,City,Course Name.

Based on the selection i need to show and hide multiple form fields and
I need put validation and Mobile,City and Course is mandatory field.

Then,I need to capture the refers name and assign the students are created by referr.

When i select refer as 2 it shows the field value two times how to do it. How to put validation

Answer

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

Comments