Change an input field before submit

Question

I have to encode a domain name (IDNA) for a particular registrar using accents.

I have a simple input field :

<input type="text" id="idndomain" name="sld[0]" size="40" />

My jQuery function

$(document).ready(function() { 
 $('#domainform').submit(function(){
  $.getJSON("includes/idna/idna.php", {
   domain: $("input#idndomain").val()
  }, function(data){
   $("div#result").html($('<b>' + data.encoded + '</b>'));
   $('#idndomain').val(data.encoded);
  });
  return true;
 });
});

So i'm sending a query to idna.php which encodes the domain name and returns a json array :

{"encoded":"xn--caf-dma.ch"}

Problem is that the form is being submited with the 'original' value, not the value returned by the json query.

Question is : how to 'wait' for json result first, replace the input field with the encoded string and them submit ?

Answer 1

Try binding to the submit button instead of the form, and explicitly invoke the form's submit handler within the json call's success callback:

    $(document).ready(function() { 
            $('#submitButton').click(function(){

                    // maybe disable the submit button once clicked?
                    $(this).attr('disabled', true); 
                    $.getJSON("includes/idna/idna.php", {
                            domain: $("input#idndomain").val()
                    }, function(data){
                            $("div#result").html($('<b>' + data.encoded + '</b>'));
                            $('#idndomain').val(data.encoded);
                            // now submit the form
                            $('#domainform').submit();
                    });
                    return false;
            });
    });