Как предотвратить появление кнопок с формы

Question

Я хочу получить некоторые данные с страницы JSON с помощью JSP. JSON получает аргумент userId, основанный на пользовательских данных userId, заполняется на странице JSON. Я использую метод getJSON(), чтобы получить данные на странице. Но, моя проблема, когда нажата кнопка, форма отправляется. Этот fiddle является одним без getJSON(). Метод не отправляет форму после нажатия кнопки submit, но Here Форма отправляется после нажатия кнопки. Я возвращаюсь false все еще бесполезно.

Пожалуйста, расскажите, как я могу получить данные из JSON без отправки формы. Если есть альтернативный или лучший подход, предложите один.

Вот мой код:

$("input[name=submit]").click(function(){ 
    var dataToBeSent = $("form").serialize(); 
    alert (dataToBeSent); 
    $.getJSON(url,dataToBeSent, function(data) { 
     var items = []; 
     $.each(data, function(key, val) { 
      items.push('<li id="' + key + '">' + val + '</li>'); 
     }); 
     $('div').html($('<ul/>', { 
      'class' : 'my-new-list', 
      html : items.join(' ') 
     })); 
    }); 
    return false; 

С уважением

Dibya

Answer 1

вам нужно сделать event.preventDefault()

$("input[name=submit]").click(function(e){ 
    ................ 
    ................ 
    ................ 
    ................ 
    e.preventDefault(); 
}); 

возвращение ложным не останавливает событие как он не похож на object.onclick. чтобы остановить поведение по умолчанию, вы должны использовать preventDefault.

Answer 2

Попробуйте превратить его в возвращение функции вместо обработчика событий, как это:

<script type="text/javascript"> 
    function serializeForm(){ 
     var dataToBeSent = $("form").serialize(); 
     alert(dataToBeSent); 
     // $.getJSON(); function here 
     return false; 
    } 
</script> 
<form action="#submit" method="post" onsubmit="return serializeForm();"> 
    <input type="text" name="data1" id="data1" value="1" /> 
    <input type="text" name="data2" id="data2" value="2" /> 
    <input type="text" name="data3" id="data3" value="3" /> 
    <input type="submit" /> 
</form>