Ajax+PHP form needs 2 clicks to be submited - php

Question

Here is my code:
<script type="text/javascript">
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#formIDRegister").validationEngine(); //--> this is the jQuery Validation Engine. The code below has no relation with it.
});
function func(){
$(document).ready(function() {
$(document).ajaxStop($.unblockUI);
$("#formIDRegister").submit(function() {
$("input[type=submit]").attr("disabled", "disabled");
$.blockUI({message: '<h1><img src="./images/misc/ajax-loader.gif" /> Espere um momento...</h1>'});
var trueName = $("#trueName").val();
var trueSurname = $("#trueSurname").val();
var phoneHomeCountryId = $("#phoneHomeCountryId").val();
var phoneHomeCityId = $("#phoneHomeCityId").val();
var phoneHome = $("#phoneHome").val();
var phoneCellCountryId = $("#phoneCellCountryId").val();
var phoneCellCityId = $("#phoneCellCityId").val();
var phoneCell = $("#phoneCell").val();
var userCpf = $("#userCpf").val();
var userBirth = $("#userBirth").val();
var userAddressCountry = $("#userAddressCountry").val();
var userAddressState = $("#userAddressState").val();
var userAddressCity = $("#userAddressCity").val();
var userAddressStreet = $("#userAddressStreet").val();
var userAddressNumber = $("#userAddressNumber").val();
var userAddressCompl = $("#userAddressCompl").val();
var userAddressDistrict = $("#userAddressDistrict").val();
$.post('./cadastro/processa/identificacao', {trueName:trueName, trueSurname:trueSurname, phoneHome:phoneHome, phoneHomeCountryId:phoneHomeCountryId, phoneHomeCityId:phoneHomeCityId, phoneCell:phoneCell,phoneCellCountryId:phoneCellCountryId, phoneCellCityId:phoneCellCityId, userCpf:userCpf, userBirth:userBirth, userAddressCountry:userAddressCountry, userAddressState:userAddressState, userAddressCity:userAddressCity, userAddressStreet:userAddressStreet, userAddressNumber:userAddressNumber, userAddressCompl:userAddressCompl, userAddressDistrict:userAddressDistrict, },
function(resposta) {
$("#ErrorBarContent1").hide();
$("#ErrorBarContent2").hide();
$("#ErrorBarContent3").hide();
$("input[type=submit]").removeAttr("disabled");
if (resposta != false) {
if(resposta == "11"){
$("#ErrorBarContent1").show();
}
if(resposta == "12"){
$("#ErrorBarContent2").show();
}
if(resposta == "1"){
$("#ErrorBarContent3").show();
}
} else {
location.href ="cadastro/caracteristicas-gerais/";
}
});
return false;
});
});
}
</script>
Here is the HTML
<form id="formIDRegister" class="" method="post" action="javascript:func()" accept-charset="UTF-8">
<div id="ErrorBarContent1" onclick="$(this).fadeOut('slow');" style="display:none;"><div class="yellowErrorBar">Todos os campos devem ser preenchidos</div></div>
<div id="ErrorBarContent2" onclick="$(this).fadeOut('slow');" style="display:none;"><div class="yellowErrorBar">Cpf já está sendo utilizado por outro usuário.</div></div>
<div id="ErrorBarContent3" onclick="$(this).fadeOut('slow');" style="display:none;"><div class="redErrorBar">Opps, ocorreu um erro ao atualizar seu cadastro, nossa equipe já foi avisada. Por favor, tente novamente mais tarde.</div></div>
<!-- name -->
<div class="rowOff" id="name">
<p><i>1.</i> Identificação</p>
<label>
<span class="trueName">Seu(s) nome(s)</span><br />
<input value="" class="validate[required] text-input" type="text" name="trueName" id="trueName" />
</label>
<label>
<span class="trueSurname">e seu(s) sobrenome(s)</span><br />
<input value="" class="validate[required] text-input" type="text" name="trueSurname" id="trueSurname" />
</label>
</div>
<!-- phone -->
<div class="rowOn" id="phone">
<p><i>2.</i> Telefones para contato</p>
<div class="phone1">
<span class="phoneHome">Telefone de contato 1</span><br />
<input onmouseover="tooltip.show('Insira o código de seu país');" onmouseout="tooltip.hide();" value="" class="validate[required,custom[onlyNumberSp]] text-input" type="text" name="phoneHomeCountryId" id="phoneHomeCountryId" maxlength="3" />
<input onmouseover="tooltip.show('Insira o código de área');" onmouseout="tooltip.hide();" value="" class="validate[required,custom[onlyNumberSp]] text-input" type="text" name="phoneHomeCityId" id="phoneHomeCityId" maxlength="2" />
<input value="" class="validate[required,custom[onlyNumberSp]] text-input" type="text" name="phoneHome" id="phoneHome" />
</div>
<br />
<br />
<br />
<div class="phone2">
<span class="phoneCell">Telefone de contato 2</span><br />
<input onmouseover="tooltip.show('Insira o código de seu país');" onmouseout="tooltip.hide();" value="" class="validate[required,custom[onlyNumberSp]] text-input" type="text" name="phoneCellCountryId" id="phoneCellCountryId" maxlength="3" />
<input onmouseover="tooltip.show('Insira o código de área');" onmouseout="tooltip.hide();" value="" class="validate[required,custom[onlyNumberSp]] text-input" type="text" name="phoneCellCityId" id="phoneCellCityId" maxlength="2" />
<input value="" class="validate[required,custom[onlyNumberSp]] text-input" type="text" name="phoneCell" id="phoneCell" />
</div>
<div id="divPhoneInfo">Seu número de telefone não será divulgado. Garantimos o sigilo.</div>
</div>
<!-- cpf -->
<div class="rowOff" id="cpf">
<p><i>3.</i> CPF</p>
<label>
<span class="userCpf">Insira seu CPF </span><br />
<input value="" class="validate[required] text-input" type="text" name="userCpf" id="userCpf" /> <span class="hotspot" onmouseover="tooltip.show('Insira o número de seu CPF de 11 dígitos');" onmouseout="tooltip.hide();"><img src="./images/userInterface/info.png" /></span>
</label>
<div id="divCpfInfo">Insira um número de CPF válido. O uso de números falsos implica no descumprimento dos Termos de Utilização, e estará sujeito às penas da Lei.</div>
</div>
<!-- birth -->
<div class="rowOn" id="birth">
<p><i>4.</i> Data de nascimento</p>
<label>
<span class="userBirth">Insira sua data de nascimento </span><br />
<input value="" class="validate[required] text-input" type="text" name="userBirth" id="userBirth" /> <span class="hotspot" onmouseover="tooltip.show('Você PRECISA ser maior de 18 anos para se cadastrar! O formato é dd/mm/aaaa');" onmouseout="tooltip.hide();"><img src="./images/userInterface/info.png" /></span>
</label>
</div>
<!-- address -->
<div class="rowOff" id="adress">
<p><i>5.</i> Endereço</p>
<label id="pais">
<span class="userAddressCountry">País</span><br />
<select name="userAddressCountry" id="userAddressCountry" class="validate[required]" onchange="buscaEstados(this.value)" /></select>
</label >
<label id="estado" style="display: none">
<span class="userAddressState">Estado</span><br />
<select value="" class="validate[required] text-input" type="text" name="userAddressState" id="userAddressState" onchange="buscaCidades(this.value)"/><option value="">Primeiramente, selecione o pais</option></select>
</label>
<label id="cidade" style="display: none">
<span class="userAddressCity">Cidade</span><br />
<select value="" class="validate[required] text-input" type="text" name="userAddressCity" id="userAddressCity" readonly="readonly" /><option value="">Primeiramente, selecione o pais</option></select>
</label>
<br />
<br />
<br />
<div id="endereco" style="display: none">
<label>
<span class="userAddressStreet">Escreva seu Endereço</span><br />
<input value="" class="validate[required] text-input" type="text" name="userAddressStreet" id="userAddressStreet" />
</label>
<label>
<span class="userAddressNumber">Número</span><br />
<input value="" class="validate[required] text-input" type="text" name="userAddressNumber" id="userAddressNumber" />
</label>
<label>
<span class="userAddressCompl">Complemento</span><br />
<input value="" class="" type="text" name="userAddressCompl" id="userAddressCompl" />
</label>
<label>
<span class="userAddressDistrict">Bairro</span><br />
<input value="" class="validate[required] text-input" type="text" name="userAddressDistrict" id="userAddressDistrict" />
</label>
</div>
</div>
<div id="divAddressInfo">Assim como os números de contato e o CPF, seu endereço estará sob total sigilo. Em seu perfil aparecerão apenas <b>País</b>, <b>Estado</b> e <b>Cidade</b></div>
<!-- submit -->
<div class="rowOn" style="margin-top: 40px; padding-top: 40px;">
<label style="margin-left: 170px;">
<input class="submit" type="submit" value="Enviar e Prosseguir" id="sendButtonRegister" />
</label>
</div>
<!-- /formID4 -->
</form>
When I click in submit, in the first click, nothing happens (actually, the position of the screen goes to its middle). The form is submited only in the second click. What is wrong?

Answer 1

You should not use the $(document).ready(function() into function func()
best of all use the next code
$('#formIDRegister').submit(function(e){
e.preventDefault();
func();//your function
});
this code you can put into $(document).ready function or after your form
also remove action="javascript:func()" attribute from form tag