Function that call input type text - 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>

Make sure the *add* function is called after the *inputnumber* element is loaded. Also, replacing the value of the *innerHTML* property will remove all content and replace it with elements created from the newly assigned markup. Also, your markup is invalid. — RobG, Jun 16 '17 at 21:38

Alaa Attya Mohamed · Answer 1 · 2017-06-16T21:51:58.947

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>

edited Jun 16 '17 at 21:51

answered Jun 16 '17 at 21:39

Alaa Attya Mohamed

78
4

The function definition doesn't have to be after the element, only the call to it. – Barmar Jun 16 '17 at 21:42

BetaDev · Answer 2 · 2017-06-16T21:56:00.217

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

score 0 · Accepted Answer · answered Jun 16 '17 at 21:48

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.

Function that call input type text - Javascript / PHP

3 Answers3