DOM Jquery does not work with form

Question

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

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

And the one where you make a request for a PHP file and show the result within a certain 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 time to click the form input, already runs the above script without clicking the form Submit button.

I need that when the user puts the email and when clicking the form’s Submit button, then yes, make the request of the php file and show the result in the div. How could you solve this problem with 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>

Answer 1

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 be executed.

To solve change the selector of the method for the <input type="submit" />

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

Or if you prefer you can add an id to <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){
  ...
});