通过jquery代码捕获表单提交

时间:2014-03-12 00:04:57

标签: jquery forms

我有以下html表单,您的提交操作由jQuery代码处理:

<form method="post" action="cad_usuario.html" id="target">      
    <p><input type="hidden" name="id_usuario"></p>
    <p><input type="text" name="login" placeholder="Login" size=20 maxlength=40> </p>       
    <p><input type="text" name="senha" placeholder="Senha" size=20 maxlength=40> </p>
    <p><input type="text" name="pnome" placeholder="Primeiro Nome" size=20 maxlength=40> </p>
    <p><input type="text" name="unome" placeholder="Ultimo Nome" size=20 maxlength=40> </p>
    <p>
      <select name="tipo">
        <c:forEach var="tipo" items="${tipos}">
            <option value="<c:out value="${tipo.id}"/>"> <c:out value="${tipo.nome}"/> </option>
        </c:forEach>
      </select>
    </p>

    <c:forEach var="item2" items="${campos}">
        <p><input type="text" name="${item2.campo}" placeholder="${item2.campo}" size=20 maxlength=40> </p>
    </c:forEach>

    <p><button type="submit" class="btn btn-lg btn-primary" id="btn_cadastra">Cadastrar</button></p>
    <p><button type="submit" class="btn btn-lg btn-primary" id="btn_altera">Alterar</button></p>
</form>

jquery代码是:

<script>
$( "#target" ).submit(function( event ) {       
      // Stop form from submitting normally
      event.preventDefault();

      // Get some values from elements on the page:
      var $form = $( this ),
        url = $form.attr( "action" );

      // Send the data using post
      var posting = $.post( url, $(this).serialize() );

      // Put the results in a div
      posting.done(function( data ) {
        $("#result_3").show();
        $( "#result_3" ).empty().append( data );
        $("#result_3").hide(5000);
        if(url == "edit_usuario.html") {
            $("#btn_form").val("Cadastrar");
            $("#title").empty().append("<strong>Novo</strong> Cadastre um novo usuario.");
            $("#target").attr("action", "cad_usuario.html");​
        }
      });
});  
</script>

我的问题是,尽管此代码应该捕获返回并保存在变量发布中,但要附加到id“result_3”标识,这不会发生,并且响应显示在新的页面中。我如何解决这个问题,以获得理想的结果?

2 个答案:

答案 0 :(得分:0)

好的,在发布这个问题之后,我解决了这个问题,显然,在其中一行代码的末尾有一个无效字符会导致执行问题。

答案 1 :(得分:0)

我猜测你的代码永远不会被调用。您可能需要将代码放在$(document).ready()块中,或者在浏览器解析DOM后确保事件已连线。要确保调用您的代码,请在函数的第一行添加debugger行。

$( "#target" ).submit(function( event ) {       
   // Stop form from submitting normally
   debugger;

打开浏览器的开发者工具,然后点击“提交”按钮。如果你的代码被调用,那么浏览器将会#34;打破&#34;在debugger行,您就可以单步执行代码来查找问题。