包含ajax的javascript函数在提交后不起作用，但与按钮单击事件一起起作用

Question

it is strange. I have a function with ajax that works great:

function searchProduct(){
var barcode=$.trim($('#barcode1').val());
$.ajax({
        type: 'GET',
        url: 'http://.............',
        data:{ 
            action: "search", 
            var: barcode, 
            },
        cache: false,
        datatype: 'json',
        success: function(output){

when I call this function from a form submit event, any way, I get error function of ajax.

<form id="searchBox" name="searchBox" onsubmit="searchProduct()">

BUT if I call this function with button click event its works and get success()

<span  class="tab-label" onclick="searchProduct()">Scan</span>

what you think about this?

Answer 1

On form submit event you have to stop its default behavior using preventDefault() otherwise post back will occur and that could be reason of error.

Pass current element reference to the function using searchProduct(this) and in the function use preventDefault() like this:

<form id="searchBox" name="searchBox" onsubmit="searchProduct(this);">

Jquery:

function searchProduct(event){
var barcode=$.trim($('#barcode1').val());
$.ajax({
        type: 'GET',
        url: 'http://.............',
        data:{ 
            action: "search", 
            var: barcode, 
            },
        cache: false,
        datatype: 'json',
        success: function(output){
         }
      });

     event.preventDefault();

}

Answer 2

Form submit will actually send a HttpRequest to the web server, I wonder why do you want to send an AJAX request along with that.

OnClick will be simple event you can use it to trigger AJAX request, it will not send any other HttpRequest to the server.