CODEWITHSUNDEEP
phphtml
user2978559
user2978559

Reputation: 3

select option dropdown hidden input validation

In the below code: i have a select option dropdown(Employed,UmEmployed) If i select Option Employed it shows some input field(Current Designation, Current CTC) if i submit data without inserting anything it show validation: current designation is required.

If i select another option from dropdown that is unemployed it should redirect to another page directly but its not going to success.php (unemployed) that one is also validating.

<html> 
<head>  
<style>
#employer
{
    display:none;
}
.error
{
    color:#F00;
}
</style> 
<?php
$currentdes="";
$currentdesErr="";

if ($_SERVER['REQUEST_METHOD']== "POST") {
   $valid = true;
   if(empty($_POST["desig"]))
    {
        $currentdesErr="* Current Designation is Required";
        $valid=false;
        echo "<style>#employer{display:block;}</style>";
    }
    else
    {
        $currentdes=test_input($_POST["desig"]);
    }
    //if valid then redirect
  if($valid){
      include 'database.php';
      echo '<META HTTP-EQUIV="Refresh" Content="0; URL=success.php">';    
    exit;
  }  
}

function test_input($data)
{
     $data = trim($data);
     $data = stripslashes($data);
     $data = htmlspecialchars($data);
     return $data;
}

?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<form id="jsform" method="post" action="<?php htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<p>Chose Your Browser: <select name = "currentsta" required>
        <option value = "">-- Select an Option --</option>
        <option value = "1" <?php if(isset($_POST["currentsta"]) && $_POST["currentsta"] == "1") echo "selected"; ?>>Employed</option>
        <option value = "2" <?php if(isset($_POST["currentsta"]) && $_POST["currentsta"] == "2") echo "selected"; ?>>UnEmployed</option>
        </select>
    </p>
  <div id="employer">
   Current Designation: <label><input type="text" name="desig" size="50" /></label>
    <span class="error"><?php echo $currentdesErr?></span>
    <br>
       Current CTC: <label><input type="text" size="50" /></label><br>

    </div>

<!--currentstatus starts here-->
<script type="text/javascript">

$('p select[name=currentsta]').change(function(e){
  if ($('p select[name=currentsta]').val() == '1'){
    $('#employer').show();
  }else{
    $('#employer').hide();
  }
});

</script>
<!--currentstatus Ends here-->

  <!--Submit Button-->
   <input type="button" value = "Submit" onClick=" document.getElementById('jsform').submit();" />
  </form>
</body>
</html>

Upvotes: 0

Views: 376

Answers (2)

shanavascet
shanavascet

Reputation: 589

The desig input field will be empty for unemployed option as it is not being filled. Hence you should consider both the conditions. Also don't include database.php in the if block . Instead inside the success.php

<html> 
    <head>  
    <style>
    #employer
    {
        display:none;
    }
    .error
    {
        color:#F00;
    }
    </style> 
    <?php
    $currentdes="";
    $currentdesErr="";

    if ($_SERVER['REQUEST_METHOD']== "POST") {

       $valid = true;  
       if(empty($_POST["desig"]) && $_POST["currentsta"]==1)
        {
            $currentdesErr="* Current Designation is Required";
            $valid=false;
            echo "<style>#employer{display:block;}</style>";
        }
        else
        {
            $currentdes=test_input($_POST["desig"]);
        }
        //if valid then redirect
      if($valid){
          //include 'database.php';
          header('Location:success.php');   
        exit;
      }  
    }

    function test_input($data)
    {
         $data = trim($data);
         $data = stripslashes($data);
         $data = htmlspecialchars($data);
         return $data;
    }

    ?>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    </head>
    <body>
    <form id="jsform" method="post" action="<?php htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    <p>Chose Your Browser: <select name = "currentsta" required>
            <option value = "">-- Select an Option --</option>
            <option value = "1" <?php if(isset($_POST["currentsta"]) && $_POST["currentsta"] == "1") echo "selected"; ?>>Employed</option>
            <option value = "2" <?php if(isset($_POST["currentsta"]) && $_POST["currentsta"] == "2") echo "selected"; ?>>UnEmployed</option>
            </select>
        </p>
      <div id="employer">
       Current Designation: <label><input type="text" name="desig" size="50" /></label>
        <span class="error"><?php echo $currentdesErr?></span>
        <br>
           Current CTC: <label><input type="text" size="50" /></label><br>

        </div>

    <!--currentstatus starts here-->
    <script type="text/javascript">

    $('p select[name=currentsta]').change(function(e){
      if ($('p select[name=currentsta]').val() == '1'){
        $('#employer').show();
      }else{
        $('#employer').hide();
      }
    });

    </script>
    <!--currentstatus Ends here-->

      <!--Submit Button-->
       <input type="button" value = "Submit" onClick=" document.getElementById('jsform').submit();" />
      </form>
    </body>
    </html>

Upvotes: 1

Kamehameha
Kamehameha

Reputation: 5473

If on selection of unemployed option, you want to redirect to another page, then redirect it using JavaScript.

In the script at the end of the page, the modification would be - 

$('p select[name=currentsta]').change(function(e){
  if ($('p select[name=currentsta]').val() == '1'){
    $('#employer').show();
  }else{
    //$('#employer').hide();
    //This redirects to next page on selecting the option.
    window.location.href= "success.php";
  }
});

Upvotes: 0

Related Questions