CODEWITHSUNDEEP
javascriptphpjqueryhtml
I love coding
I love coding

Reputation: 1191

How to retrive all options of all selects of a form in Jquery?

I want to retrieve all the options selected of different selects within the same form with Jquery. By the way, the main goal is to retrieve the result of a submit. The situation is something like that: 

 <form id="myform" action="result.php" method="post">
    <select id="select1" name="select[]">
        <option value="A1">1</option>
        ...
    </select>
    <select id="select2" name="select[]">
        <option value="A1">1</option>
        ...
    </select>
    <input type="submit">
</form>

Within result.php, there is this function:

 if (!empty($_POST['select'])) {

    $selects = array();

    foreach ($_POST['select'] as $check) {
        $selects[] = $check;

    }
    if(count($selects)==0){
    echo "ERROR";}else{echo "OK"}
}

How Can I display an alert, with the result of echo of result.php, in the page where there is the form?

Upvotes: 2

Views: 242

Answers (2)

Don Boots
Don Boots

Reputation: 2166

It took some deciphering and I am assuming you need to keep your selects generic. Instead of using the invalid select[] naming, I retrieved all of the <select> via jQuery. Not sure if that fits the bill or not.

If you need to keep them named select[], I would recommend looking at Get values from multiple select boxes with same name? Including its value with jquery and php in addition to the solution below.

HTML

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#mySubmitAjax').click(function(e) {
                var selects = $('select');
                var selects_results = "";

                selects.each(function(i,v) {
                    selects_results += i + '=' + $(v).val() + '&';
                });

                $.ajax({
                    url: 'result.php',
                    method: 'POST',
                    data: selects_results,
                    success: function(data, status, jqXHR) {
                        alert(data);
                    }
                })
            });
        });
    </script>
</head>
<body>
    <form name="myForm">
        <select>
            <option value="1">one</option>
            <option value="2">two</option>
        </select>

        <select>
            <option value="1">one</option>
            <option value="2">two</option>
        </select>

        <button type="button" id="mySubmitAjax">Submit w/AJAX</button>
    </form>
</body>
</html>

result.php

<?php
    $post = $_POST;
    $results = [];

    foreach($post as $p) {
        $results[] = $p['v'];
    }

    print json_encode($results);

?>

Upvotes: 1

stef77
stef77

Reputation: 1000

When executing the PHP code, you're on the server side again. Whereever you build the HTML output, this is where you could, e.g., include a script tag created by PHP which does something like this:

<script>
    alert("<?php echo $selectResults; ?>");
</script>

This is horribly unmaintainable (you shouldn't have PHP code mixed up this way in your HTML output), but since I don't know how you create your pages, I hope you get the idea.

It is very important to understand where which code is executed, and since you're on the PHP, i.e., server side, there is no straightforward way to "send" JavaScript alerts back to the client (ignoring WebSockets here).

Another way is to post the result via AJAX to the server, get the server's response ("ERROR", "OK", or whatever), and use this in your AJAX callback to alert the message. Again, since I don't know how you build your pages, I cannot tell which is more feasible.

Upvotes: 1

Related Questions