add Dynamic input

Question

Hi I want to add tbody dynamically so each time type number in in plannedvisit is add one more tbody But I got an error. I am using jsf and javaScript here is what I've done so far:

I am calling the javascript function by entering numeber:

 <h:inputText type="number" id="plannedVisit" styleClass="form-control"
       onkeyup=" addInput('dynamicInput'); return false; " required="true" >
    </h:inputText>


<div class="form-group"><div class= "col-sm-6" >
    <div id="nextVisitTable" class="input-group table">
        <table id="nextVisitTable1" class="table" style="width:10%;margin-  top:-210px; margin-left:90px; overflow:auto;">
           <thead>
              <tr>
                 <th>Reason</th>
                 <th>Date</th>
                 <th>Time</th>                                          
               </tr>
          </thead>
      <tbody>
      <tr>
      <td><h:inputText type="number" class="reasonOfVisit" styleClass="form- control"
required="true">

        </h:inputText></td>
    <td><h:inputText type="date" class="reasonOfVisit" styleClass="form-control"required="true">

      </h:inputText></td>

   </tr>                                                
   </tbody>
   </table>   
   </div>                                       
</div>

and this is the Script:

function addInput(divName){
           var counter = 1;
           console.log(counter);
           var limit = 3;
                 if(counter == limit){ 
                 alert("You have Reached the Limit");
                 }
                  else {
          var newdiv = document.createElement('tbody');
          newdiv.innerHTML = "<tr><td><h:inputText type="number" class="reasonOfVisit" styleClass="form-control" required="true">
                              </h:inputText></td>
                              <td><h:inputText type="date" class="reasonOfVisit" styleClass="form-control" required="true">
                              </h:inputText></td>
                              </tr>"; 
          counter++;   
     }
                }

and the error is: SyntaxError: missing ; before statement at this line

newdiv.innerHTML = "<tr><td><h:inputText type="number....</tr>"

I am not sure is it correct way or Not Please help if u have any idea. Thanks

possible duplicate of [How do I escape quotes in HTML attribute values?](http://stackoverflow.com/questions/7753448/how-do-i-escape-quotes-in-html-attribute-values) — Kukeltje, Jul 16 '15 at 08:48
This is a huge [XY-problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). You seem completely miss the point of JSF: http://stackoverflow.com/q/4421839. This is the answer you're looking for: http://stackoverflow.com/q/3409053 — BalusC, Jul 16 '15 at 08:55

youssef mohamed · Answer 1 · 2015-07-17T02:06:51.080

Try this

var counter = 1,
    limit = 3;
function addInput(event)
{
    if(counter == limit){
        alert("You have Reached the Limit");
    }
    else {
        var newdiv = document.createElement('tbody');
        newdiv.innerHTML = '<tr><td><h:inputText type="number" class="reasonOfVisit" styleClass="form-control" required="true">
                      </h:inputText></td>
                      <td><h:inputText type="date" class="reasonOfVisit"   styleClass="form-control" required="true">
                      </h:inputText></td>
                      </tr>'; 
        counter++;
    }
}

window.onload = function() {
    var element = document.getElementById("plannedVisit");
    element.addEventListener("keyup", addInput, false);
};

and your HTML

<input type="number" id="plannedVisit" styleClass="form-control" >

add Dynamic input

1 Answers1