Creating dynamic form fields with javascript

Question

I'm using javascript to create dynamic fields as part of a larger form.

In the form the user can add additional names to the form by clicking a button and filling in the extra names.

My code works fine in JSFiddle, but when I test this on my code editor the jQuery doesn't work in Live Preview (I use Brackets). I've tried disabling Lint File.

I have a feeling it could be how I have my code editor / file set up but unsure. Help would be much appreciated!

Link to working JSFiddle - http://jsfiddle.net/0pbeuksL/

HTML

How I've linked my JS

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="access.js"></script>

The relevant section of the form

<p> Site Attendees</p><br>
                <div class="container1">
                <button class="add_form_field">Add Attendee &nbsp; 
                <span style="font-size:16px; font-weight:bold;">+ </span>
                </button>
                <div><input type="text" name="personsundertakingworks" id="personsundertakingworks" placeholder="Name"></div>
                </div>

JS

  function addFields(){
            var number = document.getElementById("member").value;
            var container = document.getElementById("container");
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                container.appendChild(document.createTextNode("Member " + (i+1)));
                var input = document.createElement("input");
                input.type = "text";
                container.appendChild(input);
                container.appendChild(document.createElement("br"));
            }
        }

Your `JQuery` doesn't actually contain any jQuery... it's pure javascript — freefaller, Jul 15 '20 at 10:48
How exactly does your code not work? What errors are displayed? — s.kuznetsov, Jul 15 '20 at 10:53
This is most likely a problem in your editor. I think here you will find solutions to your problem - https://stackoverflow.com/questions/25108420/brackets-live-preview-not-working. — s.kuznetsov, Jul 15 '20 at 10:59
Are there any errors when you run in Live Preview? I would say copy the jquery.js locally and reference same as your access.js - but you're not using it (in the code provided) so you could also just remove it - it might be failing to load the external script for some reason. — freedomn-m, Jul 15 '20 at 11:09
Could you also include exactly which editor you are using? Closest I could find is brackets.io and https://stackoverflow.com/tags/adobe-brackets/info - but this goes to v1.14 not v2. — freedomn-m, Jul 15 '20 at 11:12
@freefaller Sorry, I have jQuery in the script just not in that section, my fault for not being thorough and thanks for pointing out! Will edit the question — Emelia East, Jul 15 '20 at 11:19
@sergeykuznetsov No errors are displayed, the field simply doesn't duplicate. I will have a look at that answer and report back thank you! — Emelia East, Jul 15 '20 at 11:21
@freedomn-m I use Brackets release 1.14.2, it gets referred to as Brackets 2. Sorry for the confusion! It is the one you've found — Emelia East, Jul 15 '20 at 11:21
@sergeykuznetsov That had my answer in and fixed my problems (was so simple of course), thanks so much! — Emelia East, Jul 15 '20 at 11:27
@Emelia East, i was very glad that you managed to solve your problem. Have a nice day :-) — s.kuznetsov, Jul 15 '20 at 11:32

score 0 · Answer 1 · answered Jul 15 '20 at 11:29

0

It was a really simple settings problem with my code editor, Brackets 1.14.2

Essentially just select, File > 'Enable Experimental Live Preview'

Thanks to @sergeykuznetsov for sharing the post which helped me solve this

answered Jul 15 '20 at 11:29

Emelia East

9
2

Creating dynamic form fields with javascript

1 Answers1