Ajax + PHP表单需要提交2次点击

时间:2012-08-09 06:56:21

标签: php javascript ajax forms submit

这是我的代码:

<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>

这是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 <a href="">Termos de Utilização</a>, 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>

当我点击提交时,在第一次点击时,没有任何反应(实际上,屏幕的位置会进入中间)。表单仅在第二次单击时提交。有什么问题?

1 个答案:

答案 0 :(得分:0)

你不应该使用$(document).ready(function()到函数func()

最重要的是使用下一个代码

$('#formIDRegister').submit(function(e){ 
    e.preventDefault(); 
    func();//your function 
}); 

此代码可以放入$(document).ready函数或表单之后 同时从表单标记

中删除action =“javascript:func()”属性