提交表單與圖像作為提交按鈕 - 不刷新

Question

目前我有一個表單作為提交圖像。 它工作正常，因為表單變量被傳遞並被處理。 但是，每次單擊表單提交時頁面都會刷新，因為處理頁面有一個返回表單頁面的標題。

我需要一種方法來發送表單變量而不需要刷新。 我知道它可以通過ajax完成。 但是，我面臨一個問題，因為我的提交按鈕是一個圖像。 有關如何糾正我的代碼以提交表單而不刷新的任何幫助都會很棒

    <form name ="nominate" action="" id ="nominate"  method="POST">
        <input type="hidden" name="id" value="<?php echo $id;?>">
        <input type="hidden" name="screenName" value="<?php echo $author;?>">
        <input type="hidden" name="course" value="<?php echo $course;?>">

//this is the image submit button 


 <input type="image"  style="float: left;" onMouseOver="this.src='images/nominated.png'"
            onMouseOut="this.src='images/nominate.png'" value="Place Order" src="images/nominate.png"  width="60" height="20">

</form>

<script> 
  $(function() {
    $(".button").click(function() {
     var id = $("#id").val();  
    var screenName = $("#screenName").val();


    var dataString = 'id='+ id + '&screenName=' + screenName + '&course=' + course;  
    alert (dataString);
    $.ajax({
       type: "POST",
       url: "nominate.php",
       data: dataString,
       success: function(){
         alert(dataString);
       }
    });


    });
  });

</script>

Answer 1

如果您將“按鈕”類添加到圖像中，那么您已完成的代碼應該可以使用。

<input type="image" class="button"....

Answer 2

首先，您需要添加id屬性，如jquery $("#")是元素的id。

<input type="hidden" name="id" id="id" value="<?php echo $id;?>">
<input type="hidden" name="screenName" id="screenName" value="<?php echo $author;?>">
<input type="hidden" name="course" id="course" value="<?php echo $course;?>">

然后正如安德魯所說，添加class="button"或使用$("#some_id")然后給按鈕輸入一個id="some_id" 。

$(".button").click(function(){
var url = "nominate.php";
var id = $("#id").val();  
var screenName = $("#screenName").val();
var course = $("#course").val();

$.post(url,{id:id, screenName:screenName , course:course }, function(data){

alert(data);

    });

});

這將提醒您從“nominate.php”發回的任何內容。 確保從腳本中刪除header()並可能發回成功或錯誤消息。

Answer 3

將類“按鈕”添加到圖像中。

此外，您似乎沒有在任何地方定義course 。 您可能也希望解決這個問題。