I would like to know how I can create text fields and insert data when the page loads.
What I'm trying to do is open an array row from a database, create text fields and fill in text fields when the page loads.
I have an array string from ms sql database that looks something like this:
test,test;bla;bla2;test44;test55;test66
I divided each individual array into ; , and I would like to create text fields and insert values into the text field one by one, so the end result will look like this:
I do not know how to do this using the following code.
No matter what I tried, I messed up the add / remove functions, or I end up cloning all the text fields when I click the plus button.
thanks
CM. THE CODE BELOW OR GOES AT https://jsfiddle.net/kj3cwww0
<script type='text/javascript'>//<![CDATA[ $(function() { var clone = function(tmpl) { return $((tmpl.clone()).html()) }, $template = $('#template_add_form'), formArray = [ clone($template) ], // init array with first row $formEntries = $('#entries'); $(document).on('click', '.btn-add', function() { formArray.push(clone($template)); updateForm(); // set focus to adding row = last element in array $(formArray).last()[0] .find('input') .first() .focus(); }); // remove not working yet $(document).on('click', '.btn-remove', function(evt) { var id; // iterate over formArray to find the currently clicked row $.each(formArray, function(index, row) { if ( row.has(evt.currentTarget).length == 1 ) { id = index; // click target in current row return false; // exit each loop } }); formArray.splice(id, 1); updateForm(); }); var updateForm = function() { // redraw form --> problem values are cleared!! var lastIndex = formArray.length - 1, name; // stores current name of input $formEntries.empty(); // clear entries from DOM becaue we re-create them $.each(formArray, function(index, $input) { // update names of inputs and add index $.each($input.find('input'), function(inputIndex, input) { name = $(input).attr('name').replace(/\d+/g, ''); // remove ids $(input).attr('name', name); }); if (index < lastIndex) { // not last element --> change button to minus $input.find('.btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); } $formEntries.append($input); }); }; updateForm(); // first init. of form }); //]]> </script> <script id="template_add_form" type="text/template"> <div class = "entry input-group col-xs-9"> <div class = "col-xs-3"> <input class = "form-control" name="balance" type = "text" placeholder = "Loan Balance" required = "required"/> </div> <div class="col-xs-3"> <input class="form-control" name="rate" type="text" placeholder="Interest Rate" required="required" /> </div> <div class="col-xs-3"> <input class="form-control" name="payment" type="text" placeholder="Minimum Payment" required="required"/> </div> <span class="input-group-btn col-xs-1"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span > </button> </span> </div> </script> <div class="container"> <div class="row"> <div class="control-group" id="fields"> <label class="control-label" for="field1"> <h3>Enter your loans below</h3> </label> <div class="controls"> <div class="entry input-group col-xs-3">How much extra money can you pay per month? <input class="form-control" name="extra" type="text" placeholder="Extra/month"> </div> <br> <div id="entries"></div> </div> <div class="input-group-btn"> <div class="col-xs-5"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> <br> <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another loan</small> </div> </div> </div>
FORM CONFIRMATION CODE:
<body> <form id="loanform" name="loanform" action="test5.asp" role="form" autocomplete="off" method="post"> <INPUT type="hidden" name="action" value="submit"> <div class="container"> ......the rest of the existing code goes here... </div> </form> </body>
CALLING FROM THIS FROM CLASSICAL ASP:
if strComp(Request.Form("action"), "submit")= 0 then Response.write("IT WORKS") end if