How to set my value only after checking my checkbox?

Question

I have created one form with dynamically created fields. and i have a one check box with unique ID . when user selects that check box then only those two fields are visible ("name and age"). and if user uncheck the select box then those fields are hiding . here is the code

 <style>
      .selectContainer{
       display:none;
        }
      input[type=checkbox]:checked ~ .selectContainer {
        display:block;
        }


</style>

And The HTML code Is:

                  <label for="name">Any Accompanying Person ?:</label>

            <input  type="checkbox" name="person" id="person" >Yes



            <div class="selectContainer">

            <br>



            <label>Person Details</label>
            <p>



             <div style="padding-left:70px;"> 
            <input type="button" value="Add Person" onClick="addRow('dataTable')" /> 
            <input type="button" value="Remove Person" onClick="deleteRow('dataTable')" /> 
            </div>
            </p>
            <table style="padding-left:50px;" id="dataTable" class="form" border="1"  >
            <tbody>
            <tr>
            <p>
            <td><input type="checkbox" name="chk[]" checked="checked" /></td>
            <td>
            <label>Name</label>
            <input type="text" size="20" name="name[]" id="name"   >
            </td>
            <td>
            <label>Age</label>
            <input type="text" size="20" name="age[]" id="age"  >
            </td>

            </p>
            </tr>
            </tbody>
            </table>
            <div class="clear"></div>
            </fieldset>

            </div>
                          <h3>Choose Your Payment Option</h3>
        <h1>

        <div style="padding-left:150px;">
        <input type="radio" name="type" value="visa" required value="1" >VISA/MASTER CARD:<br />
        <input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
        <input type="radio" name="type" value="neft">NEFT<br /><br/>

        </div>
        <label></label>
        <input type="submit" name="submit" id="submit" value="submit"><br />

And the php Code is:

  if(isset($_POST['submit'])){


    $name = $_POST['name'];
    $age = $_POST['age'];

    $intIncrement = 0;
    for($l=0; $l < count($name); $l++)
    {
    if ($age[$l]>=12)
    {
    $intIncrement++;
    }


    $user_name="name";

    $user_id=123;


    $qry="INSERT INTO Accomp_Person (name,age,ref_id, ref_name)

    VALUES ('$name[$l]','$age[$l]', '$user_id','$user_name')";

Problem: i am storing name and age of the Accompanying Person .if user checks the check box and add the name and age then its storing in database successfully but the problem is when user came and simply check and then after uncheck the check box (Any Accompanying Person?) then the empty value is storing in database . how to avoid this . i want store those value only check box(Accompanying Person?) is checked. Please help me .

Kamruzzaman · Accepted Answer · 2015-01-19 13:14:51Z

0

please user this code

if(isset($_POST['submit'])){


$name = $_POST['name'];
$age = $_POST['age'];
$checkBox = $_POST['chk'];

$intIncrement = 0;
for($l=0; $l < count($name); $l++)
{
if ($age[$l]>=12)
{
$intIncrement++;
}

$user_name="name";

$user_id=123;
if(isset($checkBox[$l])){
$qry="INSERT INTO Accomp_Person (name,age,ref_id, ref_name)

VALUES ('$name[$l]','$age[$l]', '$user_id','$user_name')";
}

}

answered Jan 19, 2015 at 13:14

Kamruzzaman

1,4431 gold badge12 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nayana Over a year ago

not that check box. This is the check box (<label for="name">Any Accompanying Person ?:</label> <input type="checkbox" name="person" id="person" >Yes).

jaibatrik · Accepted Answer · 2015-01-19 12:54:33Z

0

Before storing the value of $name and $age to database, check if they have valid non-empty values.

You can check for empty values in the following way -

if (!isset($name) || empty($name)) {
  // $name is either NULL or empty.
  // display error message
}

edited Jan 19, 2015 at 12:54

answered Jan 19, 2015 at 12:46

jaibatrik

7,6419 gold badges36 silver badges65 bronze badges

2 Comments

Nayana Over a year ago

how to check weather my values are empty or not ?

jaibatrik Over a year ago

stackoverflow.com/questions/2201452/…

ABIRAMAN · Accepted Answer · 2015-01-19 12:55:50Z

0

set default value in your database for name and age. check if check box is checked. And disable age and name if check box not checked. Form does not post disable inputs. so it will not save with empty

answered Jan 19, 2015 at 12:55

ABIRAMAN

9698 silver badges12 bronze badges

Comments

Sarath Kumar · Accepted Answer · 2015-01-19 12:57:32Z

0

try this one..

    if (empty($_POST['name'])) {
          $firstNameErr = "Name is required";
          $valid = false; //false
       }
       else {
          $name= test_input($_POST["name"]);
       }
       if (empty($_POST['age'])) {
          $ageErr= "Age is required";
          $valid = false;
       }
       else {
          $age= test_input($_POST["age"]);
       }
 if($valid){
  // do the insert here
  }

answered Jan 19, 2015 at 12:57

Sarath Kumar

2,3531 gold badge14 silver badges26 bronze badges

1 Comment

Nayana Over a year ago

if value is set then all so not storing .

Rakesh_Kumar · Accepted Answer · 2015-01-19 13:20:51Z

0

If you want Javascript to play some role, First thing you should do is to put a callback when checkbox is clicked. Thereafter you can check for existence of both Name and Age data.If both values exists, then only call addRow(). Here is simple prototype

<input type='checkbox' id='chk' onclick='check();'/>
<input type='text' id='name' />
<input type='text' id='age' '/>

And javascript snippet as:

function check(){
if(document.getElementById('chk').checked){
    var name= document.getElementById('name').value;
    var age=document.getElementById('age').value;
    if(name && age){
        //Only when both name and age, then addRow function call
    }
}
}

Hope you can take it from here!

answered Jan 19, 2015 at 13:20

Rakesh_Kumar

1,4621 gold badge17 silver badges30 bronze badges

Comments

David Thomas · Accepted Answer · 2015-01-19 13:25:24Z

While you'll still need to verify server-side, in PHP, this approach runs in the front-end to disable each of the <input> elements in the same row as the checkbox. A disabled element is not considered 'successful,' and therefore is not submitted to the server:

A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.

However:

Controls that are disabled cannot be successful.

_{"Successful controls," W3.org as accessed at 13:21 (GMT), 19/01/2015.}

function toggleRowInputs() {
  // caching a reference to the changed checkbox element:
  var checkbox = this,
      // the starting point for the (following) while loop:
    row = checkbox;
  
  // while the tagName of the 'row' variable is neither 'tr' nor 'body':
  while (row.tagName.toLowerCase() !== 'tr' && row.tagName.toLowerCase() !== 'body') {
    // row is changed to the current node's parentNode and we run again:
    row = row.parentNode;
  }

  // if the checkbox was found inside of a <tr> element:
  if (row.tagName.toLowerCase() === 'tr') {
    // we find all the <input> elements of that row, and use filter()
    // to keep only those elements that are not of type="checkbox":
    var inputs = Array.prototype.filter.call(row.querySelectorAll('input'), function(input) {
      if (input.type !== 'checkbox') {
        return input;
      }
    });
    
    // iterating over those found inputs:
    inputs.forEach(function(input) {
      // if the checkbox is checked we enable (disabled = false) the input,
      // otherwise if it's unchecked we disable (disabled = true) the input:
      input.disabled = !checkbox.checked;
    });
  }

}


// using Array.prototype.forEach() to iterate over the array-like NodeList
// returned by document.querySelectorAll() (which uses CSS syntax to find
// the <input> elements of type="checkbox":
Array.prototype.forEach.call(document.querySelectorAll('input[type=checkbox]'), function(checkbox) {
  // adding an event-listener for the 'change' event to each of those
  // <input> elements, which executes the named function:
  checkbox.addEventListener('change', toggleRowInputs);
});

input[disabled] {
  opacity: 0.5;
}

<table style="padding-left:50px;" id="dataTable" class="form" border="1">
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="chk[]" checked="checked" />
      </td>
      <td>
        <label>Name</label>
        <input type="text" size="20" name="name[]" id="name" />
      </td>
      <td>
        <label>Age</label>
        <input type="text" size="20" name="age[]" id="age" />
      </td>
    </tr>
  </tbody>
</table>

Note that I've slightly changed your HTML, removing the needless <p> tags that originally surrounded some of the <td> elements, since the only valid children of a <tr> element is a <td> or a <th>, if you want a paragraph then it has to go inside of either of those elements.

References:

HTML:
- Forms in HTML documents.
- "Successful Controls."
JavaScript:

Collectives™ on Stack Overflow

How to set my value only after checking my checkbox?

6 Answers 6

1 Comment

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related