Главная » PHP » javascript - вставка запроса из поля клонированной формы

javascript — вставка запроса из поля клонированной формы

У меня есть проект, в котором я должен иметь возможность сделать несколько входов, если это необходимо. Я действительно новичок в JavaScript, и метод вставки, с которым я знаком, — это только метод POST, который я проанализировал в Form. Мой вопрос, как мне сделать, чтобы использовать запрос в моем сценарии?

Это мой код и запрос необходим между Do...While внизу:

<div id="form" class="hidden">
Nama : <input type="text" name="nama"><br/>
Kuantitas : <input type="text" name="kuantitas"><br/>
Kategori : <select name="idKategori">
<?php
while ($rowKategori = mysqli_fetch_object($resultKategori)) {
echo "<option value='".$rowKategori->id."'>".$rowKategori->nama."</option>";
}
?>
</select>
<input type="hidden" name="hidden" value="bahan">
<input type="button" id="remove" value="Remove">
</div>

<form>
<input type="button" value="Tambah barang lain" id="add">
<input type="button" id="insert" value="Insert" style="margin-left: 50%;">

$(document).ready(function() {
var form_index = 0;
$("#add").click(function() {
form_index++;
$(this).parent().before($("#form").clone().attr("id", "form" + form_index));
$("#form" + form_index).css("display", "inline");
$("#form" + form_index + " :input").each(function() {
$(this).attr("name", $(this).attr("name") + form_index);
$(this).attr("id", $(this).attr("id") + form_index);
});
$("#remove" + form_index).click(function() {
$(this).closest("div").remove();
});
});
$("#insert").click(function() {
var i = 0;
do {
i++;
} while (i != 5);
});

Я действительно плохо разбираюсь в английском, поэтому позвольте мне объяснить это так просто, как я могу.

  1. я хотел сделать поле формы с кнопкой отправки, как обычно.
    Разница в том, что я хотел сделать кнопку клона, чтобы я мог добавить
    больше формы поля с одной кнопкой отправки.
  2. код, который я пишу, — это то, что я изучаю на другой странице, и я не знаком с ним.
  3. я не знаю, как получить значение из клонированной страницы, и я не знаю, как обрабатывать само значение в сценарии, так как я действительно noob в javascript
  4. что я хотел сделать, это как вы получаете значение из всех клонированных полей формы, пока я нажимаю кнопку отправки? метод, с которым я знаком, — это метод POST, но я думаю о том, чтобы написать весь мой запрос на javascript, так как метод POST не может выполнить цикл для всех полей формы, поэтому я делаю цикл на javascript

и мне жаль моего английского, я не очень хорош в этом

-1

Решение

Хорошо, вы идете, вот скрипка этого.

https://jsfiddle.net/2ngjqxge/3/

HTML / PHP

<div id="form_block_wrapper" class="hidden"> <!-- added an outside wrapper -->
<div class="form_block" class="hidden">
Nama : <input type="text" name="nama[]"><br/>
Kuantitas : <input type="text" name="kuantitas[]"><br/>
Kategori : <select name="idKategori[]">
<?php while ($rowKategori = mysqli_fetch_object($resultKategori)): ?>
<option value="<?php echo $rowKategori->id; ?>">
<?php echo $rowKategori->nama; ?>
</option>
<?php endWhile; ?>
</select>
<input type="hidden" name="hidden[]" value="bahan">
<input type="button" name="remove" value="Remove">
</div>
</div> <!-- close #form_block_wrapper -->

<input type="button" value="Tambah barang lain" id="add">
<input type="button" id="insert" value="Insert" style="margin-left: 50%;">

Пожалуйста, обратите внимание, я изменил ряд вещей. Самое главное, все имена входов, которые будут представлены, я добавил [], так nama становится nama[] и т.д. Теперь, если вы отправите это как форму, на стороне сервера вы получите массивы вместо отдельных элементов. Отдельные элементы будут перезаписаны следующим динамически созданным «form_block», так что это то, что нам нужно для их обработки. Данные, которые вы ожидаете при отправке формы, будут такими: (при условии, что у нас есть 3 «form_blocks»):

   $_POST['nama'] = [
0 => 'nama from first form block',
1 => 'nama from second form block',
2 => 'nama from third form block',
];

$_POST['kuantitas'] = [
0 => 'kuantitas from first form block',
1 => 'kuantitas from second form block',
2 => 'kuantitas from third form block',
];
//etc...

Затем я удалил все идентификаторы, так как мы знаем, что идентификаторы в элементах HTML должны быть уникальными, поэтому нет смысла возиться с ними, когда мы создаем и уничтожаем динамический контент. Мы могли бы добавить индекс, как вы делали изначально, но селекторы достаточно просты, поэтому нам не нужно это делать. И стоит того, чтобы все было просто, зачем усложнять.

Я также использовал «альтернативный» синтаксис PHP для блока while. while(..): с двоеточием вместо while(..){ с кронштейном. Для меня это выглядит лучше, если смешать с HTML, чтобы <?php endWhile; ?> вместо <?php } ?>, Это не имеет большого значения здесь, поскольку это мало. Но после добавления пакетов PHP у вас будет все это зависание } брекеты везде. Проще отслеживать закрытие блоков кода, когда они похожи endIf; endWhile; и т. д. Я также сохранил HTML как HTML, а не как большую строку, которая должна быть выведена на экран, опять же, потому что так мне кажется лучше. Это также делает дело с цитатами " проще, чем объединять PHP '<tag attr="'.$php.'">',

Эти вещи вы можете сделать в любом случае, просто я немного конкретен и перфекционист, когда дело доходит до форматирования и читабельности. Вроде как на моем пути.

Javascript (jQuery)

(function($){
$(document).ready(function() {

//get and cache Outer HTML for .form_block
var selectHtml = $('.form_block:eq(0)')[0].outerHTML;

$("#add").click(function() {
$('#form_block_wrapper').append(selectHtml);
});

//use .on for events on dynamic content ( event delegation )
$("#form_block_wrapper").on('click', 'input[name="remove"]', function() {
$(this).closest(".form_block").remove();
});

$("#insert").click(function() {
//I have no idea what you want to do here?
//Are you trying to insert something into the page
//or Are you trying to insert the data into the DB, ie submit it to the server.

//you can serialze all the data https://api.jquery.com/serialize/
//$('#form_block_wrapper').serialize();

//you can get the selected options and get their value
var d = [];
$('select[name="idKategori[]"]').each( function(){
d.push($(this).val());
});
alert(d.join(','));
});

});  //document.ready
})(jQuery); //assign jQuery to $ - for compatibility reasons.

Первое, что нужно сделать, это не клонировать select но вместо этого сделайте снимок его HTML. Хранится в selectHtml, Есть несколько причин, почему это лучше.

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

  • если мы удалим все блоки формы, клонировать нечего и мы попадем на страницу без элементов формы, скажем, что мы обновляем.

  • основываясь только на длине моего кода -vs- вашего оригинального кода, должно быть очевидно, какой метод проще обрабатывать. Простое легко читать и поддерживать, делать больше с меньшими затратами.

Еще одна вещь, которую стоит отметить, это то, что вы прикрепляли событие кнопки удаления к каждой кнопке по мере их создания. Хотя это нормально, мы можем добиться большего, используя делегирование событий $.on обрабатывать этот элемент.

Я до сих пор понятия не имею, что вы хотите сделать с помощью вставки,

  • Вы имеете в виду вставить что-то на страницу

  • Вы имеете в виду отправить форму и вставить данные куда-нибудь.

но, надеюсь, это поможет

0

Другие решения

Других решений пока нет …

Источник
По вопросам рекламы [email protected]
Web-Answers © 2024 Наверх