提交带有图像作为提交按钮的表单 - 不刷新答案

【问题标题】：submit form with image as submit button - no refresh提交带有图像作为提交按钮的表单 - 不刷新
【发布时间】：2012-03-06 04:30:03
【问题描述】：

目前我有一个包含图像作为提交的表单。它工作正常，因为表单变量通过并得到处理。但是，每次单击表单提交时，页面都会刷新，因为处理页面有一个返回表单页面的标题。

我需要一种无需刷新即可发送表单变量的方法。我知道它可以通过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>

【问题讨论】：

标签： php ajax forms

【解决方案1】：

如果您将“按钮”类添加到图像中，您所做的代码应该可以工作。

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

【讨论】：

【解决方案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() 并可能发回成功或错误消息。

【讨论】：

我为每个字段输入了 id，但经过测试，我发现传递的 id 始终是列表中的第一个 id。我不确定为什么会这样。我是否也需要将 ajax 放入循环中？

【解决方案3】：

将“按钮”类添加到您的图像中。

另外，您似乎没有在任何地方定义course。你可能也想解决这个问题。

【讨论】：

天啊！！我不敢相信我忘记调用 php course 变量。我已经在顶部声明了它，但没有将它分配为 javascript 变量。但是，警报现在显示 id 和 course 没有通过。
您是否确认您的隐藏表单字段正在由 PHP 填充。 $id 和 $author 可能不包含任何数据。