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; 
}); 
});