Как добавить новое текстовое поле при нажатии кнопки?

Я пытаюсь вставить некоторые предложения в базу данных MySQL с помощью PHP. Но дизайн поля таков, что он показывает только одно поле и кнопку [add], чтобы вставить новое текстовое поле. Поэтому, в зависимости от потребностей пользователя, количество текстовых полей меняется.Как добавить новое текстовое поле при нажатии кнопки?

<div class="row"> 
    <h5>LEARNING GOALS</h5> 
    <div style="display:table; width:100%;"> 
     <div style="display:table-row;"> 
     <div style="display:table-cell;"> 
      <input class="text-field" name="goal" type="text" placeholder="Goals*" style="width:100%"> 
     </div> 
     <div style="display:table-cell; vertical-align:middle;width:65px;"> 
      <input class="add-field-btn" type="button" value="+" style="width:65px;"></div> 
     </div> 
    </div> 
</div>

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

источник

2014-10-16 user1012181

Да, я это сделал. Но я не мог найти его – user1012181

Также, как использовать деления с отображением таблицы вместо фактического использования таблицы? –

Пытается создать отзывчивый дизайн. Не хотите использовать таблицу – user1012181

Demo Проверьте эту скрипку.

document.getElementById('#whereToAppend').append('<input type="text" name="WhateverYouwant"/>'); 

document.getElementsByTagName('body')[0].appendChild('<input type="text"/>');

Если вы хотите динамические имена, задайте имя или идентификатор класса для ввода. И использовать setAttribute в JavaScript, чтобы установить имя

источник

2014-10-16 07:31:08

Вы хотите? –

Как назначить имя каждому новому текстовому полю? – user1012181

Зачем вам решать вопрос? – user1012181

<html> 
<head> 
<title>jQuery add/remove</title> 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 

<style type="text/css"> 
    div{ 
     padding:8px; 
    } 
</style> 

</head> 

<body> 

<h1>jQuery add/remove </h1> 

<script type="text/javascript"> 

$(document).ready(function(){ 

    var counter = 2; 

    $("#addButton").click(function() { 

    if(counter>10){ 
      alert("Only 10 textboxes allow"); 
      return false; 
    } 

    var newTextBoxDiv = $(document.createElement('div')) 
     .attr("id", 'TextBoxDiv' + counter); 

    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' + 
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >'); 

    newTextBoxDiv.appendTo("#TextBoxesGroup"); 


    counter++; 
    }); 

    $("#removeButton").click(function() { 
    if(counter==1){ 
      alert("No more textbox to remove"); 
      return false; 
     } 

    counter--; 

     $("#TextBoxDiv" + counter).remove(); 

    }); 

    $("#getButtonValue").click(function() { 

    var msg = ''; 
    for(i=1; i<counter; i++){ 
     msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); 
    } 
      alert(msg); 
    }); 
    }); 
</script> 
</head><body> 

<div id='TextBoxesGroup'> 
    <div id="TextBoxDiv1"> 
     <label>Textbox #1 : </label><input type='textbox' id='textbox1' > 
    </div> 
</div> 
<input type='button' value='Add Button' id='addButton'> 
<input type='button' value='Remove Button' id='removeButton'> 
<input type='button' value='Get TextBox Value' id='getButtonValue'> 

</body> 
</html>

источник

2014-10-16 07:39:21

Одно решение было бы попробовать и сериализации все входы и сохранить их в базу данных. Вы просто отправить их, подав форму, то в PHP сделать что-то вроде:

$inputs = serialize($_GET); // $inputs = serialize($_POST); 
mysql_query('INSERT INTO `table` SET inputs = "'.$inputs.'"'); // try to validate the variable before

Это было бы неплохо, учитывая тот факт, что у вас есть переменное число полей. При выборе их использовать deserialize воссоздать данные:

$r = mysql_query('SELECT inputs FROM `table`'); 
... 
$data = deserialize($row['inputs']);

Другим вариантом было бы, чтобы все входы с JavaScript или JQuery и передавать их с помощью AJAX.

var _data = []; 
$('input.text-field').each(function(i, e) { 
    _data.push($(e).val()); 
}); 

$.post('file.php', { d : JSON.stringify(_data)}, function(e){ 
    alert(e); 
})

PHP:

$d = json_decode($_POST['d']); 

foreach($d as $k => $v) { 
    // value of the input no. $k is $v 
}

Вы можете использовать @ код JQuery Nickunj для добавления нового ввода.

источник

2014-10-16 07:40:30 Romeo

Можете ли вы объяснить мне метод AJAX также – user1012181

Отредактирован ответ. – Romeo

ok, позвольте мне проверить – user1012181

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

Теперь при щелчке на кнопке вас добавить текстовое поле с таким же именем, как

your first field code:<input class="text-field" name="goal[]" type="text" placeholder="Goals*" style="width:100%"> 

Javascript code: $('#yourselector').append('<input class="text-field" name="goal[]" type="text" placeholder="Goals*" style="width:100%">');

Это конечный сервер, который вы можете получить все отправленные значения в $ _POST [ «цели»], который будет представлять собой массив;

источник

2014-10-16 07:42:06

Как добавить новое текстовое поле при нажатии кнопки?

ответ

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