Blur event problem with Submit button

Asked

Viewed 369 times

0

Good afternoon, I have a form, it has a text field that triggers the event . Blur that takes the name typed and returns an id with ajax, picks up the saved id in another Hidden input, the problem is that the Blur event is only triggered if you click in empty place (to lose focus) and then in the Submit button, if you click directly in the Submit the Blur event is not triggered, any solution to such a problem? I tried to switch to event change but it also didn’t work if you click directly on Submit.

 $("#responsavel").blur(function(){var cdgResp  = $("#responsavel").val();$.post("controller/responsavel.php",  {nomeResponsavel:cdgResp} , function(idResp) {if (idResp != false){$("#idResponsavel").val(idResp); }else { $("#idResponsavel").val("0"); } });});

above is the javascript that fires the Blur

<form action="javascript:func()" method="post">action="javascript:func()" method="post"><input id="responsavel" type="text" name="responsavel" value=<?php echo $dados['responsavel']; ?>"><input id="idResponsavel" type="hidden" name="idResponsavel" value="<?php echo $dados['idResponsavel']; ?>"><input type="submit" value="enviar"></form>

and above this the form, I created now generic to exemplify better, the data is already filled with php but if change the name of the responsible field would have to change the id of the same.

javascript jquery submit-form onblur

  • You have to put the friendly code to get proper help!

  • Good morning, I changed the description exemplifying my problem.

  • Have you tried "onfocusout" ? Try looking at the js mailing list: https://www.w3schools.com/jsref/dom_obj_event.asp

  • Actually the Blur event is actually being triggered, but as it is an AJAX that does the form Submit there is happening before AJAX is finished being processed, so not the time to fill in the Hidden field. Always remember that AJAX are requests in parallel. In your case I recommend using $.ajax instead of $.post and using the attribute async: false

  • I tried yes @andreia_sp , but it didn’t work.

  • @Lucasferreira is exactly what is happening, is shooting but the data going to Submit is not changed, thanks for the tip, I will try this way with async:false

Show 1 more comment

1 answer

1

Use the:

keyup

(click Run to see an example) 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("input").keydown(function(){
        $("input").css("background-color", "yellow");
        
    });
    $("input").keyup(function(){
        $("input").css("background-color", "pink");
        $("#resposta").append("<br>Requisitando...");
        setTimeout(function(){ $("#resposta").empty(); }, 500);
        
        //aqui ficará seu ajax...Sempre buscando por um id...
        //Utilize um loading, para travar o botao submit, 
        //até a requisição terminar, dura menos de um segundo
         
    });
});
</script>
</head>
<body>

Nome digitado: <input type="text">
<div id="resposta"></div>
<br><br><br>
<p>Digite uma letra. Toda vez que ele ficar YELLOW e voltar para o PINK, um evento irá verificar e retornar o ID.</p>

</body>
</html>

  • Thanks for the @Lollipop reply, in a common case it would work, but in my case it didn’t work because in this same text field I use jquery autocomplete, so when I start typing appears a list of names I select (type a select), hence in this case the keyup is no longer triggered, unless it continued typing the name until the end

  • But you didn’t say you used the autocomplet... And the autocomplet has its Vents, you’re not supposed to be using the input for this.

  • I didn’t get your quote about "don’t use input for this" but I did some research on the autocomplet events (which I didn’t know I had) and found "select" and "change"!

  • this example here solves my problem http://www.tutorialspark.com/jqueryUI/jQuery_UI_AutoComplete_Overridding_Default_Select_Action.php

  • Exactly, my dear. When you use any plugin and need to implement something, see if the documentation has what you need.

Browser other questions tagged javascript jquery submit-form onblur

You are not signed in. Login or sign up in order to post.