отправить форму с изображением в качестве кнопки отправки - без обновления

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

Сначала вам нужно добавить атрибут id, как в jquery $("#") - это идентификатор элемента.

<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 2

Код, который вы сделали, должен работать, если вы добавите класс «кнопки» к изображению.

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

Answer 3

Добавьте класс 'button' к своему изображению.

Кроме того, вы, кажется, не определили course где-либо.Возможно, вы тоже захотите это исправить.