PHP and Form Handling event

Question

I am trying to create form object based on the input on of the another select/textbox of the same box. For example if the user selects "Yes"/checks show him the textbox to input the value else do not show.

<form id="create_config_file" name="create_config_file" method="post">
  <table width="87%" height="220" border="2" cellpadding="1" cellspacing="1" class="CSSTableGenerator">
    <tbody>
      <tr>
        <td colspan="2">Server Details</td>
      </tr>
      <tr>
        <td width="226">Name:</td>
        <td width="783"><input name="server_name" type="text" id="server_name" size="40"></td>
      </tr>
      <tr>
        <td>IP Address:</td>
        <td><input name="ip_address" type="text" id="ip_address" size="40"></td>
      </tr>
      <tr>
        <td>Port:</td>
        <td><input name="port" type="text" id="port" size="10"></td>
      </tr>
      <tr>
        <td>NAT:</td>
        <td><select name="NAT" id="NAT">
            <option value="Yes">Yes</option>
            <option value="No" selected="selected">No</option>
        </select></td>

Now I need to show input box to the user, if selects YES or else no input box is displayed. How can I achieve this. I am using PHP.

I googled but looks like my search query was not good enough.

Any help is appreciated.

THANKS

I would use jquery, $('#NAT').on('change', function(){if($(this).val()=='Yes')//do something)}); — depperm, Jun 08 '15 at 18:40

score 2 · Answer 1 · answered Jun 08 '15 at 18:46

What you are trying to achieve is not related to your server language. You can use your input onchange events to show or hide an item:

<script>

function tryme(obj) {
    if ($(obj).checked) {
        $("#my_textbox").show();
    } else {
        $("#my_textbox").show();
    }

}

</script>
<input type="checkbox" onclick="tryme(this);" />
<input type="text" id="my_textbox" />

If you forced to show the form again, a point in the future, you maybe have some challenge with your editing content, try loading with php or displaying dynamically using javascript.

score -1 · Answer 2 · edited May 23 '17 at 11:43

PHP is not need to achieve this. Because PHP is a server side scripting. You need to use Client side scripting languages like javascript to achieve this. To know more detail about client side scripting vs Server side Scripting check this link. I used JQuery which is a javascript library. I added the code below which will as you expected. But you need to learn more about javascript, jquery, php refer w3schools.com.

<html>
<head>
<!-- Add the Library file -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<form id="create_config_file" name="create_config_file" method="post">
 <table width="87%" height="220" border="2" cellpadding="1"
  cellspacing="1" class="CSSTableGenerator">
  <tbody>
   <tr>
    <td colspan="2">Server Details</td>
   </tr>
   <tr>
    <td width="226">Name:</td>
    <td width="783"><input name="server_name" type="text"
     id="server_name" size="40"></td>
   </tr>
   <tr>
    <td>IP Address:</td>
    <td><input name="ip_address" type="text" id="ip_address" size="40"></td>
   </tr>
   <tr>
    <td>Port:</td>
    <td><input name="port" type="text" id="port" size="10"></td>
   </tr>
   <tr>
    <td>NAT:</td>
    <td>
    <select name="NAT" id="NAT">
      <option value="Yes">Yes</option>
      <option value="No" selected="selected">No</option>
    </select>
    </td>
   </tr>
  </tbody>
 </table>
</form>
</body>
<script>
$(document).ready(function(){
 $("#server_name").hide();
 $("#ip_address").hide();
 $("#port").hide();
 $("#NAT").change(function(){
  if($(this).val() == "Yes"){
   $("#server_name").show();
   $("#ip_address").show();
   $("#port").show();
  }else{
   $("#server_name").hide();
   $("#ip_address").hide();
   $("#port").hide();
  }
 });
});
</script>
</html>

PHP and Form Handling event

2 Answers2