Dynamically added field in javascript and saving the data to mysql

Question

Iam having a small issues with my dynamic form in javascript. when i click add supplier button, two form fields are added automatically. i can add how much fields ever i wanted. But when i click add supplier button the previously added form values are going off. What's the mistake iam doing?

 <html>
<head>
    <script type="text/javascript">
        function addTextArea(){
            var div = document.getElementById('div_quotes');
            div.innerHTML += "<input type='text' name='sup_name[]' />";
            div.innerHTML += "<input type='text' name='sup_email[]' />";
            div.innerHTML += "\n<br />";
        }
    </script>
</head>
<body>
<form method="post" action="ajax.php?tender_id=<?php echo $tender_id ?>">
<div id="div_quotes"></div>
<input type="button" value="Add Supplers" onClick="addTextArea();">
<input type="submit" name="submitted">
</form>
</body>
</html>

Vibhesh Kaul · Accepted Answer · 2015-10-26 11:28:59Z

1

Use appendChild() instead of innerHTML that will prevent the existing form elements from getting overwritten.

function addTextArea(){
        var div = document.getElementById('div_quotes');
        var temp = document.createElement('div');
        temp.innerHTML ="<input type='text' name='sup_name[]' /><input type='text' name='sup_email[]' /><br />";
        div.appendChild(temp );
    }

edited Oct 26, 2015 at 11:28

answered Oct 26, 2015 at 11:03

Vibhesh Kaul

2,6211 gold badge24 silver badges39 bronze badges

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

3 Comments

Sujith Nair Over a year ago

Its not working.. When i click add supplier button, its not triggering anything...?

Vibhesh Kaul Over a year ago

wait theres a mistake!

Sujith Nair Over a year ago

Thank you, its working now. just that a colon was missing in this line.. temp.innerHTML ="<input type='text' name='sup_name[]' /><input type='text' name='sup_email[]' /><br />". I corrected it. Thank you

Collectives™ on Stack Overflow

Dynamically added field in javascript and saving the data to mysql

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related