Jump to content

Archived

This topic is now archived and is closed to further replies.

digitalgod

adding text fields depending on user input

Recommended Posts

I was just wondering if someone knew how can I have a text field where a user can enter a number and when he types lets say 3 it will add 3 text fields under it.

I know it can be done in AJAX but I really know nothing about AJAX for now so if someone could point me to a tutorial or a script that already does that would be great.

Thanks

Share this post


Link to post
Share on other sites
www.ajaxfreaks.com is a good start for you.

But the point is you cant do that with AJAX, you can do that with Javascript! And for that textboxes:
[code]
function addTxtBox(number)
{
for (var i = 1 ; i <= number ; i++)
{
if (i > 1)
document.getElementById('txtBoxArea').innerHTML += "<br />" ;
document.getElementById('txtBoxArea').innerHTML += '<input type="text" id="txtBox'+number+'" name="txtBox'+number+'" />' ;
}
}
[code]
while your html code should like
[code]
<input type="text" id="txtBoxNum">
<input type="button" onclick="addTxtBox(document.getElementById('txtBoxNum'))">
<span id="txtBoxArea"></span>
[code]

I could be missing something so check the code. But that's generally how you can do.[/code][/code][/code][/code]

Share this post


Link to post
Share on other sites
thanks radalin I'll give it a shot

the reason why I want to do it with ajax is that I don't want the user to click a button to add more boxes, I would really like it to be done as soon as the user enters a value.

Why can't it be done with ajax? I know I have a lot of reading to do...

Share this post


Link to post
Share on other sites
ok did a few changes and made it work, I used a drop down instead with an onChange event. I'm guessing it would also work with a textbox and an onChange event but I'd have to limit the number allowed

thanks!

*edit*

got another question.. If a user selects 2, it will make 2 other fields appear, now if a user selects 3 right after, it will add another 3 boxes.... Any way I can stop that from happening?

[b]Nevermind I figured it out, simply added this at the begining of the function[/b]
[code]
document.getElementById('txtBoxArea').innerHTML = '';
[/code]

Share this post


Link to post
Share on other sites
[quote author=digitalgod link=topic=104432.msg418086#msg418086 date=1155919811]
Why can't it be done with ajax? I know I have a lot of reading to do...
[/quote]

You can't do it with ajax because ajax is not a scripting language or something. It's a new way (well not that new because it's been 2 or 3 years since it's begun) to make things work. Ajax is the acronym of Asynchronus Javascript and XML. You use a client side script language, a server side script language and a type to transfer data. Generally client side is javascript. Server side varies from php to asp and data type varies from XML to JSON till simple texts. But Use JSON.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.