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
– RobG, Commented Jun 16, 2017 at 21:38

Alaa Attya Mohamed · Accepted Answer · 2017-06-16 21:51:58Z

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, 2017 at 21:51

answered Jun 16, 2017 at 21:39

Alaa Attya Mohamed

784 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barmar Over a year ago

The function definition doesn't have to be after the element, only the call to it.

BetaDev · Accepted Answer · 2017-06-16 21:56:00Z

1

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

edited Jun 16, 2017 at 21:56

answered Jun 16, 2017 at 21:44

BetaDev

4,6943 gold badges25 silver badges48 bronze badges

Comments

genife · Accepted Answer · 2017-06-16 21:48:04Z

0

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.

answered Jun 16, 2017 at 21:48

genife

246 bronze badges

Collectives™ on Stack Overflow

Function that call input type text - Javascript / PHP

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related