Cambiar un campo de entrada antes de enviar

Question

Tengo que codificar un nombre de dominio (IDNA) para un registrador particular usando acentos.

que tienen un campo de entrada simple:

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

Mi función jQuery

$(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; 
    }); 
}); 

Así que estoy enviando una consulta a idna.php que codifica el nombre de dominio y devuelve una matriz JSON:

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

problema es que el formulario se submited con el valor 'original', no el valor devuelto b y la consulta json.

La pregunta es: ¿cómo 'esperar' el resultado de json primero, reemplazar el campo de entrada con la cadena codificada y enviarlos?

Answer 1

Trate unión al botón de enviar en lugar de la forma, e invocan explícitamente manejador de forma submit dentro éxito de devolución de llamada de la llamada JSON:

$(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; 
      }); 
    });