DOM Jquery does not work with form

Question

DOM Jquery does not work with form

Navigation

#1 by (2 votes)

0

I have this script that opens an html page with Jquery DOM

$('.abas').on('click', function(){
   var paginas = ["planejamento_estrategico2.php","mentoria_fast_food.php","terceirizacao.php","marketing_full-time.php","mastermind.php"];
   aba_index = $(this).attr('tabindex');
   $('.abas').removeClass('active');
   $(this).addClass('active');
   $("#texto").load ("http://dominio.com.br/"+paginas[parseInt(aba_index) - 1]);
});

This is where you place a request for a PHP file and show the result within a given div.

$(document).on('click', '#reg-form_3', function(e){

            e.preventDefault(); 

            $.ajax({
                url: 'email_planejamento.php',
                type: 'POST',
                data: $(this).serialize() 
            })
            .done(function(data){
                $('#form-content_2').fadeOut('slow', function(){
                    $('#form-content_2').fadeIn('slow').html(data);
                });
            })
            .fail(function(){
                alert('Ajax Submit Failed ...');    
            });
});

My problem is when I click on the input of the form, it executes the above script without clicking the form's submit button.

I need when the user places the email and clicking on the submit button of the form, then yes, request the php file and show the result in the div. How could I solve this problem with the jquery DOM?

My html

<form action="email_planejamento.php" method="post" class="wpcf7-form" id="reg-form_3" novalidate>
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="6">
<input type="hidden" name="_wpcf7_version" value="4.9.2">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f6-p1065-o1">
<input type="hidden" name="_wpcf7_container_post" value="1065">
</div>
<div class="digite_email">
<span class="wpcf7-form-control-wrap email"><input type="text" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Digite seu e-mail"></span>
</div>
<div class="assinar">
<input type="submit" value="Ver um exemplo de sucesso" class="wpcf7-form-control wpcf7-submit">
</div>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>

jquery

asked by anonymous 02.01.2018 / 12:14

1 answer

AsyncTask - Does not run twice Generate options from a select (years) according to another selected field

score 2 · Accepted Answer

The problem is that you are capturing every click on the element with id reg-form_3 what happens is that this element is the form, ie every time you click on the form your script will run.

To resolve, change the selector method to <input type="submit" />

$(document).on('click', '#reg-form_3 input[type="submit"]', function(e){
   ...
});

Or if you prefer you can add an id in <input type="submit" /> and capture the click on this element:

<input type="submit" value="Ver um exemplo de sucesso" 
   id="btnSubmit" class="wpcf7-form-control wpcf7-submit" />

$(document).on('click', '#btnSubmit', function(e){
  ...
});