Сохраняйте динамически генерируемые поля ввода

Я использую этот код для динамического создания полей ввода ADD More, а затем планирую использовать кнопку «Сохранить», чтобы сохранить их значения в базе данных. Проблема заключается в том, что на кнопке «Сохранить» я хочу продолжать отображать поля ввода, созданные пользователем. Однако они обновляются при нажатии кнопки «Сохранить».

JavaScript:

<script type="text/javascript">
    var rowNum = 0;

    function addRow(frm) {
        rowNum++;
        var row = '<p id="rowNum' + rowNum + '">Item quantity: <input type="text" name="qty[]" size="4" value="' + frm.add_qty.value + '"> Item name: <input type="text" name="name[]" value="' + frm.add_name.value + '"> <input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"></p>';
        jQuery('#itemRows').append(row);
        frm.add_qty.value = '';
        frm.add_name.value = '';

    }

    function removeRow(rnum) {
        jQuery('#rowNum' + rnum).remove();
    }
</script>

HTML:

<form method="post">
    <div id="itemRows">Item quantity:
        <input type="text" name="add_qty" size="4" />Item name:
        <input type="text" name="add_name" />
        <input onclick="addRow(this.form);" type="button" value="Add row" />
    </div>
    <p>
        <button id="_save">Save by grabbing html</button>
        <br>
    </p>
</form>

javascript php forms html jquery
person Wali Hassan    schedule 13.12.2013    source источник
comment
просмотрите AJAX и используйте event.preventDefault, чтобы страница не обновлялась.   -  person Justin Wood    schedule 14.12.2013

Ответы (2)


arrow_upward
4
arrow_downward

Один из подходов заключается в определении шаблона для его динамического добавления через jQuery.

Шаблон

<script type="text/html" id="form_tpl">
  <div class = "control-group" > 
    <label class = "control-label"for = 'emp_name' > Employer Name </label>
    <div class="controls">
        <input type="text" name="work_emp_name[<%= element.i %>]" class="work_emp_name"
               value="" /> 
    </div>
</div>

Button click event

$("form").on("click", ".add_employer", function (e) {
   e.preventDefault();
   var tplData = {
      i: counter
   };
   $("#word_exp_area").append(tpl(tplData));
  counter += 1;
});

Главное — вызвать e.preventDefault();, чтобы предотвратить перезагрузку страницы.

Возможно, вы захотите проверить этот рабочий пример

http://jsfiddle.net/hatemalimam/EpM7W/

person Hatem Alimam    schedule 13.12.2013
comment
Ваш код делает именно то, что я хочу, но я хочу каким-то образом сохранить недавно добавленные поля ввода, скажем, навсегда... до тех пор, пока они не будут удалены вручную. Дело в том, что если я обновлю браузер или закрою и снова открою этот файл, я вернусь к исходной точке... с первым полем ввода. - person Wali Hassan; 14.12.2013
comment
Что ж, в этом случае вам нужно сохранить все, что вы генерируете, в реляционную базу данных. Предположим, что пользователь создает 6 полей, и сгенерированные поля имеют идентификаторы, вам нужно сохранить formId/pageId и список сгенерированных полей, затем каждое из этих сгенерированных полей должно иметь соответствующий столбец введенного значения. @ДжоУилсон - person Hatem Alimam; 14.12.2013

arrow_upward
-2
arrow_downward

вместе с тем, что написал Хатем Алимам, пусть ваша форма вызывает файл upate.php, ориентированный на iframe размером 1px.

person sukebe7    schedule 15.04.2019