调用输入类型文本的函数-Javascript / PHP

Question

i'm creating a form page where i 'ill put some inputs to my customers fill it.

but , every time i must write for example >

<input type="number" class="form-control" name="quantidade" required max="900" />

for example , but i see a friend that was using javascript function to call theses input , so when he want insert a input like this , he just call on your index.page .

someone could help ?

i have tryed this .

<script type="text/javascript">
  function add() {
    document.getElementById("inputnumber").innerHTML = '<input type="number" class="form-control" name="quantidade" required max="900" />';
  }
</script>

with this index.page

<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <form role="form">
                    <div class="form-group" id="inputnumber">
                    </div>
                    <div class="form-group">
                    </div>
                    <button type="submit" class="btn btn-default">
                        Submit
                    </button>
                </form>
            </div>
            <div class="col-md-6">
            </div>
        </div>
    </div>
</div>

Answer 1

yes this will work but you should place your function call after declaring your html element you're using. for example

<script type="text/javascript">
 function add()
 {
document.getElementById("inputnumber").innerHTML = '<input type="number"      class="form-control" name="quantidade" required max="900" />';
}
</script>
<div id="inputnumber"></div>
<script>
    add()
</script>

As you might notice the function call is placed after the "inputnumber" dev

<div id="inputnumber"></div>

Answer 2

Here simple example:

<script type="text/javascript">
    function add(){
        document.getElementById("inputnumber").innerHTML = '<input type="number" class="form-control" name="quantidade" required max="900"/>';
    }
</script>
<form role="form">
    <div class="form-group" id="inputnumber">
    </div>
    <button onclick="add();">Add +</button>
    <button type="submit" class="btn btn-default">
        Submit
    </button>
</form>

Note: If you want to add only one input element. Run this code and you will get it.

For multiple element on your form, take a look at

Dynamically add form element using Javascript-Simple one
Append Element
Good and Simple: Add Input Fields Dynamically to Form Using JavaScript

Answer 3

So easy, u need this function, look:

function callInput(a,b,c) {
    var x = document.createElement('input');
    x.className = 'form-control';
    x.type = b;
    x.name = c;
    a.appendChild(x);
}

How to use, look:

callInput(parentElemen,'type','name');

Example:

callInput(document.getElementsByTagName('form')[0],'submit','quantidade');

Good luck.