CODEWITHSUNDEEP
javascriptjquery
li.
li.

Reputation: 573

How to Submit only after Jquery finished updating the field

I have a form where a user inputs a word, when pressing the button I want it to translate the word (using the jquery script) into the same field. Only after completed to populate the field, it should continue and submit the translated word.

everything is working except that it will submit as soon as it translating causing the original word to be submitted instead of the translated one. the original page shows that the word had been translated.

please help on how to make it submit only after the word have been translated in the text field. ? should I use a delay ? if so how ? or is there an oncomplete, "onpopulate" or something like that ?

here is the script: 

<script type="text/javascript">     
$(function transle() {  
    $('#transbox').sundayMorningReset();
    $('#transbox  input[type=submit]').click(function(evt) {
        $.sundayMorning(
          $('#transbox input[type=text]').val(),
            { source:'', destination:'ZH', menuLeft:evt.pageX, menuTop:evt.pageY},
               function(response) {
                    $('#transbox input[type=text]').val(response.translation);                      
                }
        );

    });             
});

</script>

and the form:

 <table id="transbox" width="30px" border="0" cellspacing="0" cellpadding="0">
     <form action="custom-page" method="get" name="form1" target="_blank" id="form1" >
         <tr>
             <td><input  id="q" name="q" type="text" class="search_input" value="Evening dress" /></td>
             <td><input type="submit" /></td>
         </tr>
     </form>
 </table>

there are another JS called for the script but I don't sure its needed for the question.

thank you.

Upvotes: 0

Views: 153

Answers (1)

Amir Ismail
Amir Ismail

Reputation: 3883

you can use type="button" instead of type="submit" and after filling call submit event of your form

function(response) {
      $('#transbox input[type=text]').val(response.translation);
      document.forms.form1.submit();
}

<input type="button" />

Upvotes: 1

Related Questions