Using AJAX for multiple selects and no submit button

Question

Alright, so right now I have a page that has two select buttons. Once both of them are set, I want the page to automatically update. Then, whenever a new option is selected each time, the page will keep automatically updating. Here's my HTML:

<form action="" method="POST" id = "multiple">
    <select name="op" id="op"> 
        <?php
            require('C:\www\php\connect.php'); 
            require('C:\www\php\stuff1.php'); // populates first select bar
        ?>   
    </select>

    <br>

    <select name="op2" id="op2"> 
        <?
            php require('C:\www\php\stuff2.php'); //populates second select bar
        ?> 
    </select>
</form>

Here was my jQuery BEFORE. Right now with this, it will automatically submit the page once two items are selected:

$(document).ready(function () {
    $('#op,#op2').on('change', function () {
        if ($('#op').val() && $('#op2').val()) {
            $("#multiple").submit();
        }
    });
});

Here's my (not working) AJAX response that I want to try to implement to do what I mentioned at the start:

$(document).ready(function (e) {
    $('#op,#op2').on('change', function () {
        $("#multiple").submit();
        var url = "C:\www\php\stuff2.php"; 
        alert("show me signs of life"); // show response
        $.ajax({
               type: "POST",
               url: url,
               data: $("#multiple").serialize(),
               success: function(data)
               {
                   alert(data); // show me something
               }
             });

        e.preventDefault();
    }
});

Where exactly am I going wrong here? I'm pretty sure that my URL situation is a little bit messed up seeing as how I use multiple php files to populate the boxes, but I feel like that doesn't matter. If it helps, the file where the magic happens is in stuff2.php, so that was the only one I've included.

I don't think u can do ajax to a local file on the hard drive ie.var url = "C:\www\php\stuff2.php"; as browsers don't allow it as it's considered cross domain — wirey00
– wirey00, Commented Feb 4, 2016 at 16:19
Yes it would be since it would be looking for it on the same domain. Browsers also don't allow access to local files on the hard drive due to security so by using that relative url it should work. I'm assuming since you're using php you have a php server running on your local host — wirey00
– wirey00, Commented Feb 4, 2016 at 16:55
You say no submit but you have $("#multiple").submit(); right there to DO a submit. - note you need then do the UPDATE in the callback (success or the .done deferred — Mark Schultheiss
– Mark Schultheiss, Commented Feb 4, 2016 at 17:25

Alo · Accepted Answer · 2016-02-04 16:14:56Z

2

The code:

$("#multiple").submit()

will perform an HTTP POST request to the current URL. You don't need it if you are making AJAX calls.

Simply having:

$.ajax({
     type: "POST",
     url: url,
     data: $("#multiple").serialize(),
     success: function(data)
     {
          alert(data); // show me something
     }
});

should work just fine.

answered Feb 4, 2016 at 16:14

Alo

3,9042 gold badges20 silver badges25 bronze badges

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

4 Comments

John Over a year ago

To be specific, I'm trying to update my c3js charts. I did what you did and I got the alert. The problem now is that the charts themselves aren't updating like they're supposed to

Alo Over a year ago

Are you updating the object related to the chart? Take a look here: Line Chart. You should be able to update the chart by feeding it data using the 'load' method of the respective object.

John Over a year ago

Yes. But how do I get my input from my updated form and then use the load method to update the chart without ajax?

Alo Over a year ago

I would need a little more context to be more helpful, but, to answer the question, you simply need to do something like this: chart.load({columns: ['op', $('#op').value()], ['op2', $('#op2').value()]});

Collectives™ on Stack Overflow

Using AJAX for multiple selects and no submit button

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related