0

I have a form here http://excavator.net.au/test1.php after blur the the postcode the suburb is loading with dropdown with some option

here is the jquery code

$(document).ready(function(){
    $("#zip").on('blur',function(){
        $.post("get_suburb_admin1.php",{zip:$(this).val()}, function(d){
            $("#suburb_cnt").html(d);
        });
    });

});

But when submit the form before ajax loading it getting fine. But when it submit after ajax load it is not getting the value of suburb. Please check the above url, solution is helpful for me.

sudip-fullstack
  • 105
  • 6
  • Why would it send the value of `suburb`, the only value you're sending in the $.post function is the value of `#zip` ? – adeneo Jan 11 '14 at 20:43
  • open the `form` before `table` and close it after `table`. – Fredrick Gauss Jan 11 '14 at 20:52
  • Have you tried returning, for example, a JSON and then adding manually the children of `#suburb_cnt`? Maybe just doing `$(el).html()` isn't enough for the browser to detect the `select` element. – Alejandro Iván Jan 11 '14 at 20:54

4 Answers4

0

What does your console say, regarding this? I believe the issue may be that $(this) inside of $.post refers to the window object, and not to #zip. A couple other notes, too:

  1. What it looks like you're attempting to do is send whatever value #zip has, which is an input element referring to the postcode (not to the suburb).

  2. Since the select is going to be loaded dynamically, old handlers no longer apply. However, you can delegate, like so:

    $(document).on('blur','#suburb',function() {
    //do whatever
});

  3. As far as context issues go for this, I believe $.post callbacks are called in the context of the window. Try this to fix that issue, perhaps:

    $("#zip").on('blur',function(){
    var self = this;
    $.post("get_suburb_admin1.php",{zip:$(self).val()}, function(d){
        $("#suburb_cnt").html(d);
    });
});

Overall it appears there could be several potential issues with your code, and with what you are trying to do. I recommend you search for more information regarding AJAX, JavaScript function context, and jQuery selectors.

Side note: you may want to reconsider how you are loading the select with your php, unless you are committed to it for a good reason. Testing the webpage myself, it took almost 10 seconds at times for the select to load from your AJAX call.

Josh Beam
  • 19,292
  • 3
  • 45
  • 68
  • Sorry I have tried this code but same issue.. not getting the value after submit.Please see the url kindl. you can check the console also here.. http://excavator.net.au/test1.php – sudip-fullstack Jan 11 '14 at 20:50
0

Open the form before the table and close it after the table.

First look and Second look

<form action=""...>
    <table>
        <tr>
            ...
        </tr>
    </table>
</form>
Community
  • 1
  • 1
Fredrick Gauss
  • 5,126
  • 1
  • 28
  • 44
0

Now I saw in firebug(tab NET) what data sending by submit.

First input[name=suburb1] - its OK. POST all need fields.

Second onBlur you replace input[name=suburb1] by select[name=suburb1] (by Ajax). You can see that this select exists in DOM ( see in console). But it doesnt sending by POST (others fields - OK). I dont know why its is happening ( google silent).

I found one solution:

$("#frm input[type=submit]").submit(function(){
   // get value from "dynamic-ajax" select 
   var suburb = $("select[name=suburb1]").val();

   // adding hidden with same name & value 
   $('<input>').attr({
      type: 'hidden',
      name: 'suburb1',
      value: suburb,
   }).appendTo("#frm");
});
voodoo417
  • 11,861
  • 3
  • 36
  • 40
0

This is what your HTML look lke after your AJAX call.

The FORM has been rewrited and close just after the opening. So when you submit there is not input to pass.

<body>
<form name="frm" id="frm" action="test1.php" method="post" 
      enctype="multipart/form-data"></form>
<tbody><tr>
            <td>Address :</td>
            <td><input name="address" value="" type="text"></td>
        </tr>

        <tr>
            <td>Suburb :</td>
            <td id="suburb_cnt"><select id="suburb" name="suburb1">
    <option value="ALEXANDRIA">ALEXANDRIA, New South Wales</option>
    <option value="BEACONSFIELD">BEACONSFIELD, New South Wales</option>
    <option value="EVELEIGH">EVELEIGH, New South Wales</option>
    </select></td>
        </tr>

        <tr>
            <td>Postcode :</td>
            <td><input name="zip" id="zip" value="" type="text"></td>
        </tr>

        <tr>
            <td>State :</td>
            <td id="state_cnt"><input name="state" id="state" value="" type="text"></td>
        </tr>
        <tr>
            <td></td>
            <td><input value="submit" name="submit" type="submit"></td>
        </tr>

Taz
  • 78
  • 6