Jquery不会阻止提交按钮操作

Question

could you help me with these please: 你能帮我解决这些问题吗：

I'm working on a PHP-Jquery-AJAX-JSON search, the idea is to have a php form where to type the ID of a specific employee and then via AJAX show the name in a div always in the same php form. 我正在进行PHP-Jquery-AJAX-JSON搜索，想法是有一个php表单，在那里键入特定员工的ID，然后通过AJAX显示div中的名称总是在同一个php表单中。

My problem is that I can show the message I would like to display in the div because when I press the submit button it always redirects to the action page specified in the form instead of just show the message into the div, so could you please tell me what is my problem? 我的问题是，我可以显示我想在div中显示的消息，因为当我按下提交按钮时，它总是重定向到表单中指定的操作页面，而不是只显示消息到div中，所以你能告诉我我有什么问题？ as you will see I specified e.preventDefault() in the code as show below: 正如您将看到的，我在代码中指定了e.preventDefault（），如下所示：

$(document).ready(function() {
 $("#submit_id").click(function (e) {
   e.preventDefault();
   var id = $("input#ID_id");   

  if(validaForm(id)){ 

  $("#submit_id").hide();
  var url = $("#form_id").attr('action'); 
  var data = $("#form_id").serialize();   
  var type = $("#form_id").attr('method');

  $("#LoadingImage").show();
  $("#ajax_id").html("<div class='cargando'> realizando busqueda</div>");

$.ajax({
    url:url,          
    data:data,       
    type:type,      
    cache: false,  
    contentType: "application/x-www-form-urlencoded", 
    dataType: 'json', 
    encode: true

    .done(function(data) {   // using the done promise callback
       if ( ! data.success) {
        $("#LoadingImage").fadeOut();
          if (data.errors.ID_name) {
           $("#ajax_id").html("<div class='cargando'> Debe especificar el ID</div>");           
            } // if

        } // if 
        else {
            $("#ajax_id").html("<div class='cargando'> Tudo Ben</div>");
        } // else
    }) // done-promise


    .fail(function(data) {   // using the fail promise callback

        console.log(data);
    }); // fail-promise

    }); // AJAX call

  } // validaForm*/
            });
    });

    function validaForm(id){
        var id_val = id.val().trim();
        if((id_val=="") || id_val.replace(/s+/,'') == ''){
            alert("Favor ingrese el ID");
            id.addClass("posicionamiento");
            $("#div_id").html("<div class='error'>Debe especificar el nombre</div>");
            return false;
        }else{  
        id.removeClass("posicionamiento");
        $("#div_id").empty();
        }
        return true;
    }

HTML: HTML：

<html>
  <head>
    <title>BUSCADOR</title>
  </head>
  <body>
    <form method="post" id="form_id" action="process.php">
      <fieldset>
        <legend>Buscador Asincrono</legend>
        <p>ID a buscar: <input type="text" name="ID_name" id="ID_id"/>
          <div id="estado_id"></div></p>
        <p><input type="submit" id="submit_id" value="Buscar"/></p>
        <img src="imagenes/cargando.gif" id="LoadingImage" style="display:none" align="center"/> <div id="ajax_id" align="center"></div>
      </fieldset>
    </form>
  </body>
</html>

Answer 1

You are trying to prevent the click event instead of the submission itself. 您试图阻止点击事件而不是提交本身。

Use .submit ( doc ) instead of .click in your event handler (and bind the event to the form instead of the submit button): 使用.submit （ DOC ）代替.click在事件处理（并绑定该事件的形式，而不是提交按钮）：

$(document).ready(function() {
 $("#form_id").submit(function (e) {
   e.preventDefault();
   // ...

If you want to submit the form at a specific point, you can use then $("#form_id").submit(); 如果要在特定点提交表单，可以使用$("#form_id").submit();

Update: I made a fiddle to find out what was wrong: 更新：我找到了一个小提示，找出错误：

You closed your .ajax() too late :-) 你太迟了关闭你的.ajax() :-)

$.ajax({
// ... 
    .done(function(data) {   // using the done promise callback
    // ...
    }) // done-promise
    .fail(function(data) {   // using the fail promise callback
    // ...
    }); // fail-promise
}); // AJAX call

Change this to: 将其更改为：

$.ajax({
   // ... 
}) // AJAX call
.done(function(data) {   // using the done promise callback
   // ...
}) // done-promise
.fail(function(data) {   // using the fail promise callback
    // ...
}); // fail-promise

It's corrected in the fiddle. 它在小提琴中被纠正了。

Jquery不会阻止提交按钮操作

问题描述

1 个解决方案

解决方案1
5 已采纳 2015-05-15 15:08:50

Jquery不会阻止提交按钮操作

问题描述

1 个解决方案

解决方案1 5 已采纳 2015-05-15 15:08:50

解决方案1
5 已采纳 2015-05-15 15:08:50