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>