jQuery отправляет неправильную форму html

У меня есть сценарий php, который извлекает элементы из базы данных и позволяет пользователям голосовать за них, я даю каждому из этих выбранных элементов (html-форму) с одним (поле ввода текста) и (кнопку отправки), чтобы отправить введенный счет при нажатии, и у меня есть сценарий jQuery на той же странице, который вставляет оценку через эту форму в базу данных без обновления страницы, все, кажется, работает отлично, за исключением того, что у нее есть сценарий.jQuery отправляет неправильную форму html

Этот скрипт допускает отправку только первой (html-формы) в цикле, и эта первая (форма html) влияет на элемент, который не следует за ним в цикле, как сделать каждую форму, приписываемую ее элементу?

Наряду с этим я также хочу, чтобы сценарий возвращал уведомление для пользователя, который отправляет оценку, чтобы сообщить им, были ли данные вставлены или не удались, и когда успех я хочу получить, что пользователь представил для них после представление

Любая помощь приветствуется, вот мой код:

<body> 

    <div id="items-wrapper"> 
    <?php //function where i fetch items/records from database $items=g et_items_function($page_id); if(!$items){ echo 'There are no items in this page yet!'; }else{ ?> 
    <div id="item"> 
     <?php //looping the fetched items/records foreach($items as $item){ $_itemid=$ item[ 'item_id']; $_name=$ item[ 'item_name']; $item_file='path/to/items/name-' .$_name. '-id-'.$_itemid. '.jpg'; ?> 
     <ul id="responds"> 
     <!--i want to append data here--> 
     </ul> 

     <img src="<?php echo $item_file; ?>" /> 

     <form action="setItemScore.php?itemPass=<?php echo $_itemid.'&pagePass='.$_pageid; ?>" method="POST"> 
     <input type="text" name="content_txt" id="contentText" placeholder="Enter score" /> 
     <button id="FormSubmit">Add Score</button> 

     <img src="images/loading.gif" id="LoadingImage" style="display:none" /> 
     </form> 
     <?php } ?> 
    </div> 
    <?php } ?> 
    </div> 

    <script type="text/javascript"> 
    $(document).ready(function() { 

     //Ajax request to setItemScore.php 
     $("#FormSubmit").click(function(e) { 
     e.preventDefault(); 
     if ($("#contentText").val() === '') { 
      alert("Please enter some text!"); 
      return false; 
     } 

     $("#FormSubmit").hide(); 
     $("#LoadingImage").show(); 

     var myData = 'score_value=' + $("#contentText").val(); 
     jQuery.ajax({ 
      type: "POST", 
      url: "setItemScore.php?itemPass=<?php echo $_itemid.'&pagePass='.$_pageid; ?>", 
      dataType: "text", 
      data: myData, 
      success: function(response) { 
      $("#responds").append(response); 
      $("#contentText").val(''); 
      $("#FormSubmit").show(); 
      $("#LoadingImage").hide(); 

      }, 
      error: function(xhr, ajaxOptions, thrownError) { 
      $("#FormSubmit").show(); 
      $("#LoadingImage").hide(); 
      alert(thrownError); 
      } 
     }); 
     }); 

    }); 
    </script> 

</body>

источник

2015-02-19 benjamin

2 вещи: - убедитесь, что ваш идентификатор уникален - кнопка html по умолчанию является «type = submit», поэтому поставьте «type = button» –

id i pass through form action уникален точно! – benjamin

Идентификатор должен быть уникальным на странице, используйте класс, если элемент должен присутствовать несколько раз. SO изменить id = «FormSubmit» по классу = «FormSubmit» и сменить слушателя –

Выпуск № 1

Вы должны всегда использовать .submit(), когда форма отправляется, а не кнопка отправки onclick() по двум причинам. 1) При использовании inputs вы можете нажать enter и отправить форму в обход всего метода. 2) .submit() использует форму, позволяющую получить детские предметы для этой формы.

Имея это в виду, я хотел бы добавить имя класса формы, которые вы знаете, в настоящее время представлены через AJAX, как:

<form class="ajax-form" action="setItemScore.php?itemPass=<?php echo $_itemid.'&pagePass='.$_pageid; ?>" method="POST"> 
... 
</form>

Тогда вместо .onclick() вы можете использовать:

$('.ajax-form').submit(function(e){ 
... 
});

Выпуск № 2

В запросе на AJAX вы используете следующую линию:

url: "setItemScore.php?itemPass=<?php echo $_itemid.'&pagePass='.$_pageid; ?>",

Это всегда собирается установить $_itemid на последнюю итерацию из вашей выше foreach() петли вместо action из формы.

Если вы используете метод, упомянутый выше в № 1, то вы можете просто использовать свойство формы действий:

url: $(this).prop('action')

В то время как $(this) является формой.

источник

2015-02-19 14:48:36

Вы правы, сценарий влияет на последний из цикла, не могли бы вы привести живой пример на скрипке? – benjamin

Если вы посмотрите на нижнюю часть, вы должны просто использовать значение формы формы. –

Я использовал свойство url: $ (this) .prop ('action') вместо моей строки кода, но ничего не произошло! – benjamin

jQuery отправляет неправильную форму html

ответ

Смежные вопросы