CODEWITHSUNDEEP
phpmysql
user2481198
user2481198

Reputation: 21

Add another text box when a user select other option

My form is looking like this.

<form action="add_customers.php" method="post"     onsubmit="MM_validateForm('name','','R','passport_no','','R','remarks','','R');return     document.MM_returnValue">
  <tr>
    <td>Name of the Applicant:</td>
    <td><label for="name"></label>
    <input type="text" name="name" id="name" /></td>
  </tr>
  <tr>
     <td>Country applying for :</td>
    <td><label for="country"></label>
      <select name="country" id="country">
        <option>Singapore</option>
        <option>Malaysia</option>
        <option>Istanbul</option>
         <option>Thailand</option>
        <option>China</option>
        <option>Other</option>
    </select></td>
  </tr>
  <tr>
    <td>Visa Categeory :</td>
    <td><label for="visa_categeory"></label>
      <select name="visa_categeory" id="visa_categeory">
        <option>Visit</option>
        <option>Business</option>
        <option>Other</option>
    </select></td>
  </tr>
  <tr>
    <td>Passport No:</td>
    <td><input type="text" name="passport_no" id="passport_no" /></td>
  </tr>
    <tr>
    <td>Remarks:</td>
    <td><label for="remarks"></label>
    <textarea name="remarks" id="remarks" cols="45" rows="5"></textarea></td>
  </tr>
  <tr>
     <td>&nbsp;</td>
    <td><input type="submit" name="submit" id="submit" value="Submit" /></td>
  </tr></form>

Now My problem is 1) when a user select other option from Visa Category then automatically display a text box for user and capture that what he enter. 2) save that details into mysql database

Used languages are PHP,MYSQL

Thanks.

Upvotes: 0

Views: 5577

Answers (3)

Andy
Andy

Reputation: 1

Here's some basic JavaScript/jQuery that should help you solve your first problem: http://jsfiddle.net/j4aXQ/

HTML

<form>
    <select name="visa_category">
        <option>Visit</option>
        <option>Business</option>
        <option>Other</option>
    </select>
</form>

JS

$('select').change(function() {
    var $selected = $('select option:selected');
    if ('Other' === $selected.text()) {
        $('form').append($('<input>').prop({'type':'text','id':'visa_other','name':'visa_other'}));
        $('form').append($('<label>').prop({'for':'visa_other'}).html('Testing'));
    } else {
        $('input').remove();
        $('label').remove();
    }
});

The above code will only display a text box (and accompanying label) if the "Other" option is selected, and will then remove that text box if a different option is subsequently picked.

Hope that helps!

Upvotes: 0

raavan
raavan

Reputation: 88

You can add a text box in your form and make it hidden first time.
Get the textbox visible on change of the dropdown you have mentioned using javascript.
You can get the value of the textbox in the page where you accepts the data and insert into data database in add_customers.php along with other variables. 

<script>
function visacatOnchange(){
    var visa_cat = document.getElementById('visa_categeory').value 
    if(visa_cat == "Visit")
        document.getElementById("new_textbox").style.display="block";
    else
        document.getElementById("new_textbox").style.display="none";
}
 </script>

In html form add

<input type="text" name="new_textbox" id="new_textbox" style="display:none;">

and change 

<select name="visa_categeory" id="visa_categeory" onChange="visacatOnchange();">

Good luck :-)

Upvotes: 1

Vivek Sadh
Vivek Sadh

Reputation: 4268

Initially you can keep the textbox div hidden and then display it on "onchange" event of select input. 

<div id="textboxdiv" style="visibility: hidden">
Visa Option <input type="text" id="someid"/>
</div>


 <select name="visa_categeory" id="visa_categeory"  onchange="showTextBox()" > 
         <option>Visit</option>
            <option>Business</option>
            <option value="99" >Other</option>
      </select>

Using Jquery you can display it like this:-

      function showTextBox(){
      if ($('#visa_categeory').val() == '99') {
      $('#textboxdiv').css({'visibility':'visible'});
    }

Upvotes: 0

Related Questions