jslnriot/dynamic-form.html

## dynamic-form.html
<html>
  <head>
    <script>
      // http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/
      var counter = 0;
      var limit = 10;

      function addNewGradeCheck(e, divName) {
        e.preventDefault();

        if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
          return;
        }

        var newdiv = document.createElement('div');
        newdiv.innerHTML =
          "Check " + (counter + 1) +
          "<br>" +
          "Cell: " + "<input type='text' class=\"small\" name='myInputs[]'>" +
          "Check: " + "<input type='text' name='myInputs[]'>";

        document.getElementById(divName).appendChild(newdiv);

        counter++;
      }
    </script>

    <style>
      .answerCheckContainer input[type=text] {
        padding:5px 0px;
        margin:5px 5px 5px 0px;
      }

      .add_form_field
      {
        background-color: #1c97f3;
        border: none;
        color: white;
        padding: 8px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border:1px solid #186dad;
      }

      input{
        border: 1px solid #1c97f3;
        width: 260px;
        height: 40px;
        margin-bottom:14px;
      }

      input.small {
        border: 1px solid #1c97f3;
        width: 60px;
        height: 40px;
        margin-bottom:14px;
      }

      .delete{
        background-color: #fd1200;
        border: none;
        color: white;
        padding: 5px 15px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>

  </head>

  <body>
    <br /><br /><br /><br />

    <form action="http://localhost:3000/checker" method="get" name="form_check">

      <label>Excel File: &nbsp;&nbsp;</label>
      <input name="excel_file" />
      <br /><br />

      <label>Sheet Name:</label>
      <input name="sheet_name" />
      <br /><br />

<!---------------------------->
      <div class="answerCheckContainer">
        <button class="add_form_field" onClick="addNewGradeCheck(event,'divName')">
          Add New Check &nbsp;
          <span style="font-size:16px; font-weight:bold;">+ </span>
        </button>

      </div>

      <div id="divName">

      </div>
<!---------------------------->

<!--
      <label>Check 1:</label><br />
      Cell: <input name="check1_cell" />
      Value: <input name="check1_value" />
      <br /><br />

      <label>Check 2:</label><br />
      Cell: <input name="check2_cell" />
      Value: <input name="check2_value" />
      <br /><br />

      <label>Check 3:</label><br />
      Cell: <input name="check3_cell" />
      Value: <input name="check3_value" />
      <br /><br />
-->

      <br /><br /><br />
      <p>
        <input type="submit" value="Submit Grade Key">
      </p>

    </form>
  </body>
</html>
	<html>
	<head>
	<script>
	// http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/
	var counter = 0;
	var limit = 10;

	function addNewGradeCheck(e, divName) {
	e.preventDefault();

	if (counter == limit) {
	alert("You have reached the limit of adding " + counter + " inputs");
	return;
	}

	var newdiv = document.createElement('div');
	newdiv.innerHTML =
	"Check " + (counter + 1) +
	"<br>" +
	"Cell: " + "<input type='text' class=\"small\" name='myInputs[]'>" +
	"Check: " + "<input type='text' name='myInputs[]'>";

	document.getElementById(divName).appendChild(newdiv);

	counter++;
	}
	</script>

	<style>
	.answerCheckContainer input[type=text] {
	padding:5px 0px;
	margin:5px 5px 5px 0px;
	}

	.add_form_field
	{
	background-color: #1c97f3;
	border: none;
	color: white;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border:1px solid #186dad;
	}

	input{
	border: 1px solid #1c97f3;
	width: 260px;
	height: 40px;
	margin-bottom:14px;
	}

	input.small {
	border: 1px solid #1c97f3;
	width: 60px;
	height: 40px;
	margin-bottom:14px;
	}

	.delete{
	background-color: #fd1200;
	border: none;
	color: white;
	padding: 5px 15px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	margin: 4px 2px;
	cursor: pointer;
	}
	</style>

	</head>

	<body>
	<br /><br /><br /><br />

	<form action="http://localhost:3000/checker" method="get" name="form_check">

	<label>Excel File:   </label>
	<input name="excel_file" />
	<br /><br />

	<label>Sheet Name:</label>
	<input name="sheet_name" />
	<br /><br />

	<!---------------------------->
	<div class="answerCheckContainer">
	<button class="add_form_field" onClick="addNewGradeCheck(event,'divName')">
	Add New Check
	<span style="font-size:16px; font-weight:bold;">+ </span>
	</button>

	</div>

	<div id="divName">

	</div>
	<!---------------------------->

	<!--
	<label>Check 1:</label><br />
	Cell: <input name="check1_cell" />
	Value: <input name="check1_value" />
	<br /><br />

	<label>Check 2:</label><br />
	Cell: <input name="check2_cell" />
	Value: <input name="check2_value" />
	<br /><br />

	<label>Check 3:</label><br />
	Cell: <input name="check3_cell" />
	Value: <input name="check3_value" />
	<br /><br />
	-->

	<br /><br /><br />
	<p>
	<input type="submit" value="Submit Grade Key">
	</p>

	</form>
	</body>
	</html>