HTML

Question

我的表格看起来像这样。

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

现在我的问题是 1）当用户从Visa类别中选择其他选项时，会自动为用户显示一个文本框并捕获他输入的内容。 2）将该细节保存到mysql数据库中

使用的语言是PHP，MYSQL

感谢。

Answer 1

您可以在表单中添加一个文本框，并在第一时间将其隐藏使用javascript更改您提到的下拉列表时，可以看到文本框您可以在接受数据的页面中获取文本框的值，并将其插入add_customers.php中的数据库以及其他变量。

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

以html格式添加

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

并更改

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

祝你好运： - ）

Answer 2

最初，您可以隐藏文本框div，然后在选择输入的“onchange”事件中显示它。

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

使用Jquery，您可以这样显示： -

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

Answer 3

这里有一些基本的JavaScript / jQuery可以帮助您解决第一个问题：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();
    }
});

如果＆＃34;其他＆＃34;上面的代码将只显示一个文本框（和附带的标签）。选择了该选项，如果随后选择了其他选项，则会删除该文本框。

希望有所帮助！

当用户选择其他选项时，添加另一个文本框

3 个答案:

HTML

JS