Save dynamically generated input fields

Question

I am using this code to generate dynamically ADD More input fields and then plan on using Save button to save their values in database. The challenge is that on Save button, I want to keep displaying the User Generated Input fields. However they are being refreshed on Save button clicked.

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>

look into AJAX and use the event.preventDefault to prevent the page from refreshing. — Justin Wood
– Justin Wood, Commented Dec 13, 2013 at 20:41

Hatem Alimam · Accepted Answer · 2013-12-13 21:14:43Z

4

One approach is to define a template to add it dynamically via jQuery

Template

<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;
});

The main thing is to call e.preventDefault(); to prevent the page from reload.

You might want to check this working example

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

edited Dec 13, 2013 at 21:14

answered Dec 13, 2013 at 20:56

Hatem Alimam

10.1k4 gold badges47 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wali Hassan Over a year ago

Your code is doing exactly what I want but I want to somehow keep the newly added input fields should be there , lets say , Forever... until manually deleted. The thing is that if I refresh browser or close and open this file again, I am back to square one .. with first input field.

Hatem Alimam Over a year ago

Well in this case you need to save whatever you generate into a relational database. Let's say that the user generate 6 fields, and the generated fields has IDs, you need to save the formId/pageId and the list of generated fields, then each of these generated fields, must have a corespondent column of the value entered. @JoeWilson

sukebe7 · Accepted Answer · 2019-04-15 15:06:54Z

-2

along with what Hatem Alimam wrote, have your form call an upate.php file, targeting an iframe of 1px.

answered Apr 15, 2019 at 15:06

sukebe7

896 bronze badges

Collectives™ on Stack Overflow

Save dynamically generated input fields

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related