Javascript add input

Question

i'm pretty new to coding and can't find my error. Why isn't this working? It doesn't change anything on the website and the syntax is incorrect on sublime. It's supposed to add a new input at the end of the form. It's something with the syntax. #add is accesable. Don't know what to change the syntax error is on line

var html = ' Antwoord ';}

    </head>
<body>
<!--navigatie -->

  <div class="container">
      <nav>
    <div class="row">
    <div class="col-md-4 studentdocent">
       <button type="button" class="btn btn-primary">Docent</button>
         <a href="student.php"><button type="button" class="btn btn-primary">Student</button> </a>
         </div>
    <div class="col-md-8">
         <h1 class="head"> Meerkeuzevragen</h1>
     </div>
    </div>
  </div>
</nav>



<form action="jsonswitch.php" method="post">
<div class="container">


<!-- Oefening input -->
<div class="all">
<div id="toevoeg">
  <div class="row">
    <div class="col-md-12">
      <label>Naam van de oefening</label>
      <div class="input-group">
        </div>
        <input type="text" id="tbox" class="form-control" name="oefening" placeholder="Naam van de oefening">
      </div>
    </div>
  </div>

<!-- vraag input -->

  <div class="row">
    <div class="col-md-12">
      <label>Zet hier je vraag neer</label>
      <div class="input-group">
        </div>
        <input type="text" id="tbox" class="form-control" name="vraag" placeholder="Voer hier je vraag in..">
      </div>
    </div>



<!-- antwoord input -->

  <div class="row">
    <div class="col-md-12">
      <label>Antwoord A</label>
      <div class="input-group">
        <div class="input-group-addon">
          <input type="checkbox" name="checkbox1">
        </div>
        <input type="text" id="tbox" class="form-control" name="antwoorda" placeholder="Zet hier antwoord a neer...">
      </div>
    </div>
  </div>




  <div class="row">
    <div class="col-md-12">
      <label>Antwoord B</label>
      <div class="input-group">
        <div class="input-group-addon">
          <input type="checkbox" name="checkbox2">
        </div>
        <input type="text" id="tbox" class="form-control" name="antwoordb" placeholder="Zet hier antwoord b neer...">
      </div>
    </div>
  </div>




  <div class="row">
    <div class="col-md-12">
      <label>Antwoord C</label>
      <div class="input-group">
        <div class="input-group-addon">
          <input type="checkbox" name="checkbox3">
        </div>
        <input type="text" id="tbox" class="form-control" name="antwoordc" placeholder="Zet hier antwoord c neer...">
      </div>
    </div>
  </div>




  <div class="row">
    <div class="col-md-12">
      <label>Antwoord D</label>
      <div class="input-group">
        <div class="input-group-addon">
          <input type="checkbox" name="checkbox4">
        </div>
        <input type="text" id="tbox" class="form-control" name="antwoordd" placeholder="Zet hier antwoord d neer...">
      </div>
    </div>
  </div>
</div>








<!-- Verstuur button  -->
  <div class="col-md-4">
<button class="upload btn btn-info fa fa-upload" type="submit"></button>

<button class="upload btn btn-success fa fa-plus" id="add"></button>

<button class="upload btn btn-danger fa fa-minus" id="remove"></button>
  </div>
</div>
</div>
</div>
</form>

$(document).ready(function(e){
//variabelen
var html = '<div class="row"> <div class="col-md-12"> <label>Antwoord</label> <div class="input-group"> <div class="input-group-addon"> <input type="checkbox" name="checkbox4"> </div> <input type="text" id="childmake" class="form-control" name="antwoordd" placeholder="Zet hier antwoord d neer..."> </div> </div> </div>
</div> '/;

//input toevoegen
$("#add").click(function(e){
  $("#all").append(html);
});

Trying running $("#add") in your browser console to see, if the element on which you are trigerring is present. — 5eeker
– 5eeker, Commented May 22, 2018 at 12:23
Did you look at the error in your browser's developer console? I see one syntax error by just glancing at the code — epascarello
– epascarello, Commented May 22, 2018 at 12:23
epascarello, i did this is giving the error but i don't know how to fix it: var html = '<div class="row"> <div class="col-md-12"> <label>Antwoord</label> <div class="input-group"> <div class="input-group-addon"> <input type="checkbox" name="checkbox4"> </div> <input type="text" id="childmake" class="form-control" name="antwoordd" placeholder="Zet hier antwoord d neer..."> </div> </div> </div> — acetrap
– acetrap, Commented May 22, 2018 at 12:28

Mikaal Anwar · Accepted Answer · 2018-05-22 12:33:25Z

2

Please try the following:

$(document).ready(function(e) {

  var html = '<div class="row"> <div class="col-md-12"> <label>Antwoord</label> <div class="input-group"> <div class="input-group-addon"> <input type="checkbox" name="checkbox4"> </div> <input type="text" id="childmake" class="form-control" name="antwoordd" placeholder="Zet hier antwoord d neer..."></div></div></div></div>';

  $("#add").click(function(e) {
    $("#all").append(html);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="add" value="Add"></input>
<p>
  Html will be added after this ...
</p>
<div id="all"></div>

I have also created a jsfiddle for your query here: https://jsfiddle.net/erLcrk9z/1/

answered May 22, 2018 at 12:33

Mikaal Anwar

1,79114 silver badges24 bronze badges

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

1 Comment

Mikaal Anwar Over a year ago

Glad I could help! :)

Narendra Singh · Accepted Answer · 2018-05-22 12:31:00Z

0

why you added '/' at the end of html variable? Please remove this.

And also closing braces for ready() is missing.

answered May 22, 2018 at 12:31

Narendra Singh

351 silver badge6 bronze badges

Comments

Teshtek · Accepted Answer · 2018-05-22 12:34:08Z

0

You add this '/; , the slash at the end, also you have an extra </div>

This code works:

var html ='<div class="row"> <div class="col-md-12"> <label>Antwoord</label> <div class="input-group"><div class="input-group-addon"><input type="checkbox" name="checkbox4"> </div> <input type="text" id="childmake" class="form-control" name="antwoordd" placeholder="Zet hier antwoord d neer..."> </div></div></div>';

$("#add").click(function(e){
  $("#all").append(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add
</button>
<div id="all">
</div>

answered May 22, 2018 at 12:34

Teshtek

1,3921 gold badge12 silver badges22 bronze badges

Comments

Takit Isy · Accepted Answer · 2018-05-22 12:34:23Z

Your variable html isn't correctly set, and your code doesn't end correctly:

The line break before the last div was a problem (strings can't have a line break in it)
The / has nothing to do in your variable just before the ;
Closing braces for ready() are missing.

⋅ ⋅ ⋅

Here is a working snippet:

$(document).ready(function(e) {
  //variabelen
  var html = '<div class="row"> <div class="col-md-12"> <label>Antwoord</label> <div class="input-group"> <div class="input-group-addon"> <input type="checkbox" name="checkbox4"> </div> <input type="text" id="childmake" class="form-control" name="antwoordd" placeholder="Zet hier antwoord d neer..."> </div> </div> </div> </div>';

  //input toevoegen
  $("#add").click(function(e) {
    $("#all").append(html);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="all"></div>

Collectives™ on Stack Overflow

Javascript add input

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related