Pass the value of check checkbox and display the first value on the array

Question

I need help on my php program.

I have 2 forms inside my testing.php

Main form named "mainform"
the other Form is with checkbox named "modalForm"

My program works like this. If you click the disabled textbox, a modal will pop-up containing the form with checkbox. If only 1 of the checkbox were check I'm gonna display the textlabel of it on my disabled textbox otherwise if more than 2 were check I will display the value "Multiple" on the disabled textbox.

In short I will display only the textlabel on UI while its value will be inserted/updated into the system database.

I tried lots of condition and still i dont get it. anyone help me please.

Here is my look a like code

testing.php

<form method="post" name="mainform" action="">
        <label>TestLabel</label>
        <a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
            <input disabled type="text" name="test" placeholder="test" value="">
        </a>
    </form>

    <form method="post" name="modalForm" id="modalForm" action="testing.php">
        <div class="modalwrapper" id="modal">   <!-- modal -->
                <div class="modalcontainer">    
                    <div class="modalcol1">
                        <label>Test 1</label>
                        <input type="checkbox" name="test_modal[]" value="mark">
                        <div class="clear"></div>
                        <label>Test 2</label>
                        <input type="checkbox" name="test_modal[]" value="joe">
                        <div class="clear"></div>
                        <label>Test 3</label>
                        <input type="checkbox" name="test_modal[]" value="kevin">
                        <div class="clear"></div>
                        <label>Test 4</label>
                        <input type="checkbox" name="test_modal[]" value="michael">
                        <div class="clear"></div>
                        <label>Test 5</label>
                        <input type="checkbox" name="test_modal[]" value="jordan">
                        <div class="clear"></div>

                        <div class="savebutton">
                            <input class="btn1" type="submit" value="Submit"/>
                        </div>
                    </div>
                </div>
            <div class="overlay"></div>
        </div>      
    </form>

styles.css

/* modal layout */
    .modalwrapper {
        top: 0;
        left: 0;
        opacity: 0;
        position: absolute;
        visibility: hidden;
        box-shadow: 0 3px 7px rgba(0,0,0,.25);
        box-sizing: border-box;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
    }

    .modalwrapper:target {
        opacity: 1;
        visibility: visible
    }

    .overlay {
        background-color: #000;
        background: rgba(0,0,0,.8);
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    .modalcontainer {
        display: table;
        background-color: #777;
        position: relative;
        z-index: 100;
        color: #fff;
        padding: 5px;
    }

    .modalcol1 { display: table-cell; }

    .clear { clear: both; }

    .modalwrapper input[type=checkbox] {
        float: right;
        margin-right: 20px;
    }

    .savebutton input[type=submit] {
        float: right;
        background-color: maroon;
        color: #fff;
        border: none;
        padding: 5px 10px;
        margin-top: 5px;
        margin-right: 20px;
    }
    /* modal layout ends here */

Hope you guys can help me. I wanna know how can I pass the value of the checkboxes on my mainform . Thank you so much in advance.

For your case, you will need to use `Javascript` for passing values from one element to another, because this is client side problem. — Brane, Dec 30 '16 at 08:49
hi. how can i do it using js , can u give me a sample program or link to make it? thanks. — Let Soo Gas, Dec 30 '16 at 08:53
There is somethig that can help http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set — dimis283, Dec 30 '16 at 10:19

score 0 · Answer 1 · answered Dec 30 '16 at 09:00

Here is the sample for couple of cases that you may find usefull for your problem.

PHP variable to Javascript variable:

<?php   $myvar=10;   ?>

<script type="text/javascript">
    jsvar = <?php echo $myvar; ?>;
    document.write(jsvar);  // Test to see if its prints 10:
</script>

Form variable to Javascript variable:

<form name="myform4">    <input type="hidden" name="formvar" value="100">     </form>

<script type="text/javascript">
    jsvar = document.myform4.formvar.value;
    document.write(jsvar) // test
</script>

PHP variable to Form variable:

<form name="myform4">
    <input type="hidden" name="formvar" value="<?php $phpvar=10; echo $phpvar; ?>"> // PHP code inside HTML!!
</form>

Javascript variable to Form variable:

<form name="myform3">
    <!-- It needn't be a "hidden" type, but anything from radio buttons to check boxes -->
    <input type="hidden" name="formvar" value="">
</form>

<script type="text/javascript">
    jsvar=10;
    document.myform3.formvar.value = jsvar;
</script>

score 0 · Answer 2 · edited May 23 '17 at 12:33

JavaScript: You can solve this problem just with JS. To do so, you have to replace you action-Attribute in the form-Tag to action="#". To read more about the hashtag there, look up this link.

After that, you have to call a JS-Function when the Form gets submitted. YOu can do this with adding onSubmit="countCheckboxes()" to the <form>-Attribute. This means, that if the form gets submitted, this JS-Function gets executed. Now, you just have to create a new JS-Function called countCheckboxes(). There, you can count the selected checkboxes with this line:

alert(document.querySelectorAll('input[type="checkbox"]:checked').length);

Check now, if there is just one selected checkbox or more and set the value of the <input>.

Tip:

Get the value of the only checked checkbox, you have to restructure your HTML like this:

<label>
    Step 1
    <input type="checkbox" ... />
</label>
<label>
    Step 2

...

And then get the (first and only) text in the label with the checked box like this:

document.querySelectorAll('input[type="checkbox"]:checked')[0].parentElement.textContent

jQuery: To open and close your modal you should use JS. I recommend you to use the jQuery library (Check out this article to learn how to use jQuery in your JS). With that, you can simply open and close the modal with .fadeIn() and .fadeOut(). In fact, here we have another problem: Normally in jQuery, you can check if something got clicked with this code:

$("#idOfYouElement").click(function() {
    // this code gets executed if the element got clicked
});

But in your case, the input is disabled and doesn't fire a clickevent and this results that the .click()-Function also doesn't get executed. To fix this, we place a <div> over the input, which is transparent so the users don't see it. Then we add the .click()-Function to this div and not the input. This would look like this:

HTML:

<form method="post" name="mainform" action="">
    <label>TestLabel</label>
    <input type="text" id="inpCheckboxes" name="test" placeholder="test" value="" disabled >
</form>

JavaScript:

$("#inpCheckboxes").click(function(){
    $("#idOfYourModal").fadeIn();
});

After this, we have to close the modal after the submit-button got clicked. There are multiple solutions for that, for me, this one using .submit() is the cleanest:

$("#idOfYourForm").submit(function() {
    $("#idOfyourModal").fadeOut();      // Since your Modal is also your Form, you could also use here $(this).fadeOut();
});

You also want to count all your checked checkboxes. You can combine this with your function above, since you want to count the checkboxes when the user hits 'submit'. The jQuery-way to count theboxes would be:

var l = $("input[type='checkbox']:checked").length;

With this value, you can now use a if else to set the value of your <input>-Field (remember to remove now the disabled-Attribute from it).

is it necessary to use jQuery to open and close the modal? From my codes above, i did it without using jQuery. my program works like the modal will close only if the submit button was clicked. I need to pass the value of those checkboxes checked on my mainform so that i can echo the first value stored on the array. — Let Soo Gas, Dec 30 '16 at 11:00
No, it isn't. I just taught, jQuery would be simpler for you. Check out my new answer with a possible solution with pure JS. Hope this helps :) — Andy, Dec 30 '16 at 11:26
yay! javascript is working but how can i echo the value of checkbox if only 1 were check and if more than 2, i want to echo "Multiple" . thanks much mate. — Let Soo Gas, Dec 30 '16 at 11:50
Updated the answer, this should be enough for you to get the code working properly. — Andy, Dec 30 '16 at 13:11

dimis283 · Accepted Answer · 2016-12-30T12:11:14.830

0

I tried that code,set id="submit" at the submit button of the modal form and id="test_modal[]" at checkboxes,I used some functions of jquery I set at header the <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 <script type="text/javascript">
    $(document).ready(function(){
    $("#submit").click(function(e) {

      //  var checked = [];
        i=0;
        temp=""
$("input[name='test_modal[]']:checked").each(function ()
{   temp=$(this).val();
    i++;
   // checked.push($(this).val());
});
if (i==1)
      $("#test").val(temp);        
  else if (i>1)
      $("#test").val('multiple');
                 $("#modal").fadeOut();  
                // alert($("#do").val())
    e.preventDefault();
});
});</script>

edited Dec 30 '16 at 12:11

answered Dec 30 '16 at 11:50

dimis283

222
3
10

oh god. im sorry. but instead of displaying the value, i want to display the textlabel , can it also be done? – Let Soo Gas Dec 30 '16 at 14:53
if you talk about the field that writes the checkbox values,at php post you can call it $_post['test'] – dimis283 Dec 30 '16 at 16:52
hi, instead of echoing the value, i would like to echo the label on it. in our code, for example the value is "mark" ,what i would like to echo on the textbox is the label "Test 1" . i am going to insert the value on the database and what i would like to appear on the user is only the label or the description from checkbox they check. but your code is perfectly working. thank you so much again. – Let Soo Gas Jan 01 '17 at 16:33
So you can set hidden the field "test" and use for example the label to echo the "test 1" – dimis283 Jan 01 '17 at 17:25
for the label value of checkboxes maybe this is usefull http://stackoverflow.com/questions/17688489/how-can-i-get-the-value-of-labels-associated-with-checkboxes-and-did-i-break-js – dimis283 Jan 01 '17 at 17:32
hey, is it advisable to use multiple form in a single php file like what i did? because im thinking of the database, if i connect and insert the value on the db, would there be an error or something like that. did you experience it somehow? – Let Soo Gas Jan 02 '17 at 09:31
If form tags are separate ,I thing it must be ok,but you may test it – dimis283 Jan 02 '17 at 10:53

Pass the value of check checkbox and display the first value on the array

3 Answers3

Linked