CODEWITHSUNDEEP
phphtml
Gela
Gela

Reputation: 11

Storing Dynamic Input into a PHP Variable

I have a bunch of check boxes, one of them being "Other". Once the user checks other, it opens up a new input field for more details. I need to store the input value in a PHP variable using POST. Below is what I have but I can't seem to find more information on how to do this since it's a little more specific.

HTML:

        <td>Categories?</td>
<td>
    <input type="checkbox" name="categories[]" value="P">Poster<br>
    <input type="checkbox" name="categories[]" value="B">Brochure<br>
    <input type="checkbox" name="categories[]" value="F">Flyer<br>
    <input type="checkbox" name="categories[]" value="M">Mailer<br>
    <input type="checkbox" name="categories[]" value="N">Newsletter<br>
    <input type="checkbox" name="categories[]" value="G">Program<br>
    <input type="checkbox" name="categories[]" value="V">Invitations<br>
    <input type="checkbox" name="categories[]" value="O" onclick="dynInput(this);">Other<br>
    <p id="insertinputs"></p>
</td>

Js:

 function dynInput(cbox) {
  if (cbox.checked) {
    var input = document.createElement("input");
    input.type = "text";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "Explain: ";
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
  } else {
    document.getElementById(cbox.name).remove();
  }
}

Upvotes: 1

Views: 1380

Answers (6)

Codes Dot
Codes Dot

Reputation: 1

<?php
  list($var1, $var2) = explode(' ', readline());
  
  // Typecasting to integers
  $var1 = (int)$var1;
  $var2 = (int)$var2;
  
  echo "The sum of " . $var1 . " and "
    . $var2 . " is " . ($var1 + $var2);
?>

Upvotes: 0

user3785693
user3785693

Reputation:

Don't bite me if I'm wrong but if you are looking to dynamically show an extra form when the user ticks the options, perhaps you can have it like

    <input type="checkbox" name="categories[]" value="V">Invitations<br>
    <input type="checkbox" name="categories[]" value="O" onclick="dynInput(this);">Other<br>
    <input type="text" id="others" style="display: none;" name="other" placeholder="Please specify"></input>
    <p id="insertinputs"></p>

and with the JS,

<script type="text/javascript">
function dynInput(cbox) {
    if (cbox.checked) {
        document.getElementById("others").style.display = "initial";
    } else {
        document.getElementById("others").style.display = "none";
    }
}
</script>

then, you can handle the extra $_POST['others'] server-side!

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

I think what you need is to create a field, give it a name then hide it and every time user click on other show it, then when you submit your form the field will be sent as post just like categories[] but with given name (in my example other_category) :

JS :

function dynInput(cbox) {
    if (cbox.checked) {
      document.getElementById("other").className="";
    } else {
      document.getElementById("other").className="hidden";
    }
}

CSS : (Used just to avoid inline style)

.hidden{
  display:none;
}

HTML :

<input type="checkbox" name="categories[]" value="P">Poster<br>
<input type="checkbox" name="categories[]" value="B">Brochure<br>
<input type="checkbox" name="categories[]" value="F">Flyer<br>
<input type="checkbox" name="categories[]" value="M">Mailer<br>
<input type="checkbox" name="categories[]" value="N">Newsletter<br>
<input type="checkbox" name="categories[]" value="G">Program<br>
<input type="checkbox" name="categories[]" value="V">Invitations<br>
<input type="checkbox" name="categories[]" value="O" onclick="dynInput(this);">Other<br>
<div class="hidden" id="other">
  Explain: <input type="text" name="other_category"/>
</div>

PHP : (After submit)

 $_POST["other_category"]

Hope this helps.

Upvotes: 1

hmd
hmd

Reputation: 970

As OP didn't tagged JQuery in the question. But I'm giving some JQuery solution it may help the OP or someone else.

HTML:

<!--Including JQUERY library through google api-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form type="POST" action="yourfile.php">
    <table>
        <tr>
            <td>Categories?</td>
            <td>
                <input type="checkbox" name="categories[]" value="P">Poster<br>
                <input type="checkbox" name="categories[]" value="B">Brochure<br>
                <input type="checkbox" name="categories[]" value="F">Flyer<br>
                <input type="checkbox" name="categories[]" value="M">Mailer<br>
                <input type="checkbox" name="categories[]" value="N">Newsletter<br>
                <input type="checkbox" name="categories[]" value="G">Program<br>
                <input type="checkbox" name="categories[]" value="V">Invitations<br>
                <input class="other_category" type="checkbox" name="categories[]" value="O">Other<br>
                <p id="insertinputs" style="display:none;">
                    <input type="text" name="categories[other]" value="">
                </p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><button type="submit">Submit</button></td>
        </tr>
    </table>
</form>

Javascipt/JQuery:

<script type="text/javascript">
$(function() {
    // On click event for Other Checkbox 'other_category' by using '#' selector
    $( "#other_category" ).click(function() {

        // Checking if Other Checkbox is checked or not
        if($(this).is(":checked")){
            // Showing 'insertinputs' div
            $("#insertinputs").show();
        }else{
            // So, if the clicked checkbox isn't 'Other' we are hiding the div
            $("#insertinputs").hide();
        }

        // making input field value empty on click of Other checkbox
        $("#insertinputs input").val('');

    });
});

</script>

PHP:

<?php
// yourfile.php
if( !empty($_POST['categories']) ){
    echo "<pre>";
    print_r($_POST['categories']);
    exit;
}
?>

Upvotes: 0

Ricardo Vigatti
Ricardo Vigatti

Reputation: 525

Here's a PHP solution, don't need to modify the JS:

<?php
    $categories = $_POST['categories'];

    // check the existence of the "other_field" variable,
    // if it not exists, assign a default value (an empty string in our case).
    $other_field = isset($_POST['other_field']) ? $_POST['other_field'] : '';
?>

Upvotes: 0

balasubramani
balasubramani

Reputation: 19

I have Created a Code using Jquery. it may be help for you.

<script>
    $("#dynInput").on("click", function(){
        if($(this).prop( "checked" ))
        $('#insertinputs').html('<input type="text" name="FieldName" >');
        else
            $('#insertinputs').html('');
    });
</script>

Upvotes: 0

Related Questions