1

I'm trying to display modal right after submitting a form. Here's my code inside php tag (checks if user checked a box and if so, it is supposed to display the values of the row checked in a modal- but my modal isn't working..it only works if I make another button outside the button to display it.. ):

if(isset($_REQUEST["submit"])) {
    if(isset( $_REQUEST["userSelection"])) {
        $check= $_REQUEST["userSelection"];
    }
    if($check==0) {
        echo "walay sulod";
        // var_dump($check);
    } else
        $a = implode(",",$check);

    $_SESSION["userSelection"] = $a;
    // var_dump($_SESSION["userSelection"]);
?>
<script type="text/javascript"> 
    $(document).ready(function(){
        $('#exampleModalCenter').modal('show');
    });
</script>
<?php
}

?>

Here's my table containing a checkbox in each row:

<form method="REQUEST" action="" id="formID" name="userCheck">
    <div class="margin_table">
        <table class="table table-bordered table-hover">
            <thead>
                <th>School name</th>
                <th>Location</th>
                <th>Population</th>
                <th>Cost</th>
                <th>TNotchers</th>
                <th>Rating</th>
                <th><input type="submit" name="submit" value="submit" class="btn btn-primary render" data-toggle="modal" data-target="#exampleModalCenter"></th>
                <!-- <th><input type="submit" name="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"></input></th> -->
            </thead>
            <tbody>
                <?php foreach ($school as $s) {
                    echo '<tr>';
                    echo '<td>'.$s['school_name'].'</td>'; 
                    echo '<td>'.$s['location'].'</td>';
                    echo '<td>'.$s['population'].'</td>';
                    echo '<td>'.$s['cost'].'</td>';
                    echo '<td>'.$s['topnotchers'].'</td>';
                    echo '<td>'.$s['rating'].'</td>';
                    echo '<td><input type="checkbox" name="userSelection[]" id="mymod" onclick="userSelection()" value="'.$s['school_id'].'"</td>';
                    echo '</tr>';
                }
                ?>
            </tbody>
        </table>
    </div>
</form> 

Here's my modal:

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <?php var_dump($_SESSION["userSelection"]); ?> 
                    ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

I hope you could help me out. Thank you.

5
  • where did you add the $(document).ready part ? the php form isn't complete.
    – Abr001am
    Mar 18, 2018 at 16:51
  • what do you mean php form isn't complete? I'm sorry.
    – studJ
    Mar 18, 2018 at 17:11
  • here ?> this part does not have an opening tag
    – Abr001am
    Mar 18, 2018 at 17:12
  • did you consider using onsubmit() as shown here, or do you prefer firing the modal in back end for some purpose?
    – Abr001am
    Mar 18, 2018 at 17:14
  • Or you can use $.ajax({ type: "POST", .... success: function (data) { $('#exampleModalCenter .modal-body').html(data); $('#exampleModalCenter').modal('show');} dependently how is your data jsonified.
    – Abr001am
    Mar 18, 2018 at 18:03

1 Answer 1

0

If you just want to show the modal once a checkbox is checked use:

echo '<td><input type="checkbox" name="userSelection[]" id="mymod" onclick="$(\'#exampleModalCenter .modal-body\').html(\''. $s['school_id'] .'\');userSelection();" data-toggle="modal" data-target="#exampleModalCenter" value="'.$s['school_id'].'"</td>';

Or even fittier add $('#exampleModalCenter').modal('show'); in the function userSelection()

If yo want to submit the form at checkbox click add this $("[name=submit]").click() in your onclick() method.

This would show checked value from the backend side, which is safer.

You may also add arguments to a custom function added at onsubmit() to tell the server if the form is sumbitted or not yet.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.