使用ajax加载部分视图，将触发提交按钮

Question

When I am loading a partial view with ajax the submit button is fired. If I remove/delete the submit button the partial view is rendered properly.

This is my javascript code:

$(".searchclientssendsms").keypress(function (event) {

    var keycode = (event.keycode ? event.keycode : event.which);
    if (keycode == '13') { //enter key

             var value = $(this).val();

             $.get("/smstemplate/SearchClients/" + value,

             function (data) {             
                $('#searchClientsResult').html(data);               
             });

    }
});

The line from RouteConfig regarding my search :

routes.MapRoute(name: "SearchClientsSendSMS", 
                  url: "smstemplate/searchclients/{search}", 
             defaults: new { controller = "smstemplate",
                                 action = "searchclients" });

And the functions from controller:

    public ActionResult SendSMS()
    {
        return View();
    }


    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult SendSMS(SMSTemplate sms, string[] clients)
    {

        foreach (string client in clients)
        {
            int idclient = Convert.ToInt32(client);
            Customer customer=db.Customers.Find(idclient);
           // SendSMS(customer.Phone, sms.Text);
        }

        return View();
    }


    public ActionResult SearchClients(string search)
    {
        List<Customer> clients = db.Customers.Where(c => c.Deleted == true && (c.Email.Contains(search) || c.Name.Contains(search) || c.Phone.Contains(search))).ToList();

        return PartialView(clients);
    }

If I execute the javascript function from firebug the partial view is rendered corrected. The submit button is not fired any more.

 $.get("/smstemplate/SearchClients/poir",

        function (data) {

            $('#searchClientsResult').html(data);

        });

I noticed this behaviour only at enter key.

So, what can cause that?

Answer 1

It seems to me that the Enter key is also submitting the button, so it is calling the AJAX and pressing button at the same time.

Try this:

$(".searchclientssendsms").keypress(function (event) {

var keycode = (event.keycode ? event.keycode : event.which);
    if (keycode == '13') { //enter key

         var value = $(this).val();

         $.get("/smstemplate/SearchClients/" + value,

         function (data) {             
            $('#searchClientsResult').html(data);               
         });

         event.preventDefault(); //Inside the if so only is prevented for Enter Key.

    }
});

And to disable it in all the page you could try this:

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
   });
});