asked on

Generating Form Inputs from Entered Input Value

Hi,

I need to create a div in a form using jquery/javascript and html that contains a specific amount of user textfield inputs based on a number that the user enters in, in another textfield input above. The div would have to be hidden then appear once the user inputs a number from 1-10 (10 being the max total of generated textfield inputs).

So for example, i would type in the number 4 into a textfield input and below a div is generated with 4 textfield inputs for the user to put in 4 different names.

Can anyone point me in the right direction for making such a thing?
Help would be most appreciated.

VincentPuglia

use a trigger (onblur or onclick event) to call a function that appends the div's innerHTML with the appropriate HTML needed. Something like:

divObj.innerHTML += "<input type='text' name='field" + i + "'>"

Of course, you'll want to add a table or <br> and appropriate text so the fields will look pretty.

Vinny

Scott Fell

In simple terms you would have jquery with this example http://jsbin.com/umunow/1/edit
It needs tweeking but it gets you going.

$('#qty').blur(function () {
    var x = $('#qty').val()
    for (i = 0; i < x; i++) {
        $('#more').append('<input type="text">')
    }
});

Open in new window

and html

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>

<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form>
  <input type="text" id="qty">
  <div id="more"></div>
  
</form>
</body>
</html>

Open in new window

JiveMedia

ASKER

This is great! Thanks for your help.
How would i go about limiting the about of generated text inputs to 10 and giving each input its own id/name for form submission to a processing script.

Thanks again!

VincentPuglia

the same way I did it: name=field' + i + ' id='something' + i"

Scott Fell

Here is the updated working jsbin http://jsbin.com/umunow/2/edit

I would not rely on the number in the drop down as that can be spoofed and use your server side code to actually make sure there are only 10 and of course scrub the data.

$('#qty').change(function() {

var x =$('#qty').val();

for(i=0;i<x;i++)
   {
$('#more').append('<input id="name'+i+'" type="text">');
   }
  
});

Open in new window

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>

<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form>
  <select name="qty" id="qty">
    <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
     <option value="8">8</option>
     <option value="9">9</option>
     <option value="10">10</option>
    
  </select>
  <div id="more"></div>
  
</form>
</body>
</html>

Open in new window

JiveMedia

ASKER

Hi Padas,

Thanks for your help!
One thing i did notice from the last example is that if you choose a number from the drop down it works fine, however...if you select another number afterwards it adds the number inputted to the previous amount of boxes, instead of just changing from 4 to 7 boxes for example.

How would i go about fixing this?

VincentPuglia

It occurs because it is "append"ed. You either have to zero the div out, or use my method "innerHTML"

ASKER CERTIFIED SOLUTION

Scott Fell

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer