JS/AJAX自動提交表單：禁用回車鍵以防止頁面刷新

Question

我正在使用一個函數，它將使用ajax進行提交，並且不需要單擊按鈕的幫助。但我目前正在經歷兩個問題，其中試驗和錯誤沒有找到合理的解決方案：

首先有什麼辦法可以禁用輸入按鈕單擊（這會導致整個頁面刷新）？在JS功能是如何工作的

二

JSFIDDLE基本的例子，感覺就像我去的迂迴的方式來顯示的內容已經公佈。我怎樣才能改變$('#special').html('<p>' + $('#resultval', result).html() + '</p>');這個功能的這部分，讓它只在一個名爲#special的div裏面，而不需要span or <p> #resultval？

每次我通過PHP我所要做的設置像這樣顯示的結果呼應：<div id="special"><span id="resultval">This is the result.</span></div>

<script> 
    $(document).ready(function() { 
    var timer = null; 
    var dataString; 
    function submitForm(){ 
     $.ajax({ type: "POST", 
       url: "posting.php", 
       data: dataString, 
       success: function(result){ 

        $('#special').html('<p>' + $('#resultval', result).html() + '</p>'); 

       } 

     }); 
     return false; 
    } 
    $('#ytinput').on('keyup', function() { 
     clearTimeout(timer); 
     timer = setTimeout(submitForm, 050); 
     var name = $("#ytinput").val(); 
     dataString = 'name='+ name; 
    }); 
    }); 

</script> 

Answer 1

$(document).ready(function() { 
var timer = null; 
var dataString; 
function submitForm(event){// the function call on click or on submit onclick=submitForm(event); 

    event.preventDefault(); //to prevent enter key 
    $.ajax({ type: "POST", 
      url: "posting.php", 
      data: dataString, 
      success: function(result){ 

       $('#special').text(result); //you can use text() or html() only 

      } 

    }); 
    return false; 
} 
$('#ytinput').on('keyup', function() { 
    clearTimeout(timer); 
    timer = setTimeout(submitForm, 050); 
    var name = $("#ytinput").val(); 
    dataString = 'name='+ name; 
}); 
});