Динамическая форма с использованием HTML и JQuery

Question

Я пытаюсь сделать динамическую форму с помощью HTML и CSS. Я добавляю часть своего кода ниже. Я не могу понять, почему код не работает.

JavaScript:

<script> 
$(document).ready(function(e) { 
    var labelfiled = '<div><label>Label</label><input type="text" name="label[]"></div>'; 
    var valuefiled = '<div><label>Value</label><input type="text" name="value[]"></div>'; 
    var labdiv = $(".labdiv"); 
    var valdiv = $(".valdiv"); 
    var addbutton = $(".add_more"); 
    $(addbutton).click(function(){ 
      $(labdiv).append(labelfiled); 
      $(valdiv).append(valuefield); 
    }); 
</script> 

HTML:

<form> 
<div class="col-md-6 labdiv"> 
<div><label>Label</label> 
<input type="text" name="label[]"> 
</div> 
</div> 
<div class="col-md-5 valdiv"> 
<div> 
<label>Value</label> 
<input type="text" name="value[]"> 
</div> 
</div> 
<button class="add_more">Add values</button> 
</form> 

Если кто-то может помочь было бы здорово.

Я также хотел бы знать, как я могу обрабатывать данные, когда я отправляю это в переменную javascript из массива. Например, если у меня есть 2 входа для значения в from, я хочу сохранить их в массиве javascript, а затем преобразовать в JSON.

Answer 1

Форма должна быть в методе = "POST", и если вы влезть в функции PHP:

if(!empty($_POST) && isset($_POST){ /*try something with $_POST*/ } 

Answer 2

Попробуйте

$(".add_more").click(function() { 
        var postData = { 
         field1: $("#id_field1").val(), 
         field2: $("#id_field2").val() 
        }; 

    $.ajax({ 
      dataType: "json", 
      data:JSON.stringify(postData), 
      url: URL, 
      method: 'POST' 
     }); 

});

Answer 3

Несколько вещей, которые могут улучшить ваше обучение:

JQuery и вам код

Весь код JQuery должен быть обернут в этом ...

$(document).ready(function() { 
    // jQuery 
}); 

На var, которые вы создали, вы уже инициализировали их как элементы jQuery. Поэтому, когда вы ссылаетесь на них снова, вам не нужно (например) $ (addbutton) as addbutton. См исправленный код ниже)

<script> 
    $(document).ready(function(e) { 
     var labelfiled = '<div><label>Label</label><input type="text" name="label[]"></div>'; 
     var valuefiled = '<div><label>Value</label><input type="text" name="value[]"></div>'; 
     var labdiv = $(".labdiv"); 
     var valdiv = $(".valdiv"); 
     var addbutton = $(".add_more"); 
     addbutton.click(function(){ 
      labdiv.append(labelfiled); 
      valdiv.append(valuefield); 
     }); 
    }); 
</script> 

Консоль

При проверке консоли ...

Скажем, например, если вы пишете код JS console.log(1 + 1) на вашей странице, где вы хотите увидеть эту сумму. Из-за того, что вы написали код на стороне клиента, когда ваша веб-страница загружается (и в зависимости от того, где вы положили console.log()), если вы проверите инструменты разработчика в выбранном вами браузере, то есть Chrome или IE, есть раздел console, где вы можете увидеть результат того, что вы напечатали (т. е. используя этот пример, это будет 2). В этом console в браузере также будут отображаться ошибки, которые он обнаруживает (например, $ is not defined - если вы пытаетесь ссылаться на jQuery, но библиотека не включена), это хороший инструмент для веб-разработчиков (отсюда и имя;)) для отладки клиента боковой код.

Добавление элементов в массив

кодекса для получения input ценности представить в виде: (JQuery)

var array = []; 
$("form").on("submit", function() { 
    $("input").each(function() { 
     array.push($(this).val(); 
    }); 
}); 

Я хотел бы предложить, что вы идете и прочитайте книгу/учебник по коду jQuery, а также основные понятия веб-разработки :)

Примеры:

• jQuery

Для справки к основам, если вы застряли, выше ссылка является более надежным: - w3schools