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。你可能也希望解决这个问题。

提交表单与图像作为提交按钮 - 不刷新

3 个答案: