时间戳

首页 > 解决方案 > Javascript 添加输入

javascript - Javascript 添加输入

问题描述

我对编码很陌生，找不到我的错误。为什么这不起作用？它不会改变网站上的任何内容，并且 sublime 上的语法不正确。它应该在表单的末尾添加一个新的输入。这与语法有关。#add 是可访问的。不知道改什么语法错误在线

var html = '安特伍德';}

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

标签： javascriptjqueryhtml

解决方案

请尝试以下方法：

$(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>

我还在这里为您的查询创建了一个 jsfiddle：https ://jsfiddle.net/erLcrk9z/1/

推荐阅读