Storing Dynamic Input into a PHP Variable

Question

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();
  }
}

I am not getting it, do you want to submit your form to some .php file? or just wants to show the Selections at in the same web page using javascript ? Or you want to show dynamic HTML in the same manner? — hmd
– hmd, Commented Apr 26, 2016 at 13:47
Rather than adding the input dynamically, why not add it to the HTML, using Javascript to show it when the user selects Other? You can also use js to hide it when loading the form, thus having a failover if javascript is disabled for some reason. — bjelleklang
– bjelleklang, Commented Apr 26, 2016 at 13:48
I am trying to submit it to some .php file using $_POST @hmd — Gela
– Gela, Commented Apr 26, 2016 at 13:48
That is exactly what I am doing. The problem isn't with Js here, I just need to store the value in a PHP variable using $_POST @bjelleklang — Gela
– Gela, Commented Apr 26, 2016 at 13:50
Dude why don't you use JQuery? Can I write some JQuery in solution? — hmd
– hmd, Commented Apr 26, 2016 at 13:51

Zakaria Acharki · Accepted Answer · 2016-04-26 14:14:04Z

1

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.

edited Apr 26, 2016 at 14:14

answered Apr 26, 2016 at 13:56

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

5 Comments

Ricardo Vigatti Over a year ago

I don't think he needs to modify the JS, you can check the existence of the variable "other_category" and perform the same task. <?php if (isset($_POST['other_category']) ... etc, etc

Gela Over a year ago

Thanks but I am in need of the PHP snippet, not the Js or HTML @Zakaria Acharki

Zakaria Acharki Over a year ago

@RicardoVigatti i think he need because of extra code and bad implementation, i'm offer hem simple code do the same think he want in proper way..

Zakaria Acharki Over a year ago

@Gela all you want is $_POST["other_category"]

Gela Over a year ago

Thank you, I figured out the PHP part and it's all working now thanks to your revised Js @Zakaria Acharki

Zakaria Acharki · Accepted Answer · 2016-04-26 14:20:04Z

1

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!

edited Apr 26, 2016 at 14:20

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

answered Apr 26, 2016 at 13:57

user3785693

2 Comments

Ricardo Vigatti Over a year ago

There is no need to change the javascript, since you can check the existence of the variable on the PHP. Use isset($_POST['other']) and assign a default value if needed.

user3785693 Over a year ago

Yes, that's true but my javascript edit does not validate the existence of the variable, only dynamically shows/hides the extra text input if or if not the checkbox is checked.

balasubramani · Accepted Answer · 2016-04-26 14:01:55Z

0

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>

answered Apr 26, 2016 at 14:01

balasubramani

194 bronze badges

Comments

Ricardo Vigatti · Accepted Answer · 2016-04-26 14:10:46Z

0

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'] : '';
?>

answered Apr 26, 2016 at 14:10

Ricardo Vigatti

53514 silver badges30 bronze badges

Comments

hmd · Accepted Answer · 2016-04-26 14:11:49Z

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;
}
?>

Tyler2P · Accepted Answer · 2023-02-23 11:29:58Z

0

<?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);
?>

edited Feb 23, 2023 at 11:29

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Feb 21, 2023 at 10:26

Codes Dot

12 bronze badges

1 Comment

Tyler2P Over a year ago

Your answer could be improved by adding more information on what the code does and how it helps the OP.

Collectives™ on Stack Overflow

Storing Dynamic Input into a PHP Variable

6 Answers 6

5 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related