Search jQuery

jQuery Forum

I need dynamic forms

in Getting Started • 11 years ago

I need to make a dynamic form and some people have told me I need to use jquery, I don't know any jquery nor am I interested in learning a new language. I just need to figure out how to do what I want with it and once it is in place forget about it.

Right now I have a website that is 100% php/html

I have a page where people need to enter information into forms and then submit it so it can be saved to a database. There are a few parts of the form that I need to be dynamic. Here is what I need to happen.

Have a text box where the user can enter a number. Then jquery should take than number and run a loop to create that many of the desired field with unique incremental names.

So the user should see nothing but a text box with a 0 in it and a submit button. The user types 5 in the text box and then jquery creates 5 fields below that text box named field1, field2, field3, field4, field5.

Can someone please explain how I can do this with jquery or point me to a location that can teach me how to do this.

Thanks.

Replies(7)

dsvick

Re: I need dynamic forms

11 years ago

Here is something that should get you started, you can tweak it as needed:

$("#theBtn").click(function(){
var qty = $("#fieldQty").val();
if (!isNaN(qty)){
for (var i = 1; i <= qty; i++){
var newElem = "<input type='text' name=field'" + i + "' />";
$("#theBtn").before(newElem);
}
} else {
alert("You must enter a number.");
}
return false;
});

That is using markup that looks like this:

<form id="theForm">
<input type="text" id="fieldQty" />
<input type="submit" id="theBtn" value="Create Fields" />
</form>

Obviously you'll need to change it to suite your page.

Dave

grimshad

Re: I need dynamic forms

11 years ago

Thanks for the reply, are there any opening/closing tags for that? Can I put it inside my php/html? Would this go in the html file that displays the frontend or in the php file that handles the backend work?

Will this work without reloading the page? I understand all the code, but not the syntax, it seems like this will work and do what i'm looking for if I can understand it a little better and make sure i'm implementing it correctly and in the right location.

I am pulling information from the input fields in the html file to a backend php file. These new elements added by jquery won't be in the html file by default, so will I still be able to access them by their input names via php?

EDIT:

I tried this code and it does not work. I entered it exactly as written and didn't change any names or fields. I did however put the jquery script in <script></script> tags in the header area.

The form is displayed on the page, I enter a number and click create fields button and it reloads the page with no changes :(

dsvick

Re: I need dynamic forms

11 years ago

The JQuery code needs to go in script tags and be contained in the document ready handler, the entire block would look like this:

<script type="text/javascript">
$(document).ready(function() {
// code goes here
});
</script>

You also need to make sure you include the JQuery library. And make sure that the ID of the button you are clicking matches the id selector in this line: $("#theBtn").click(function(){, without the hash

I know you said you didn't want to learn a new language, but you should take a look at this getting started tutorial (http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery) to get you going.

Yes, the newly added fields will be accessible by your php handler page.

grimshad

Re: I need dynamic forms

11 years ago

As per your new instructions and some reading of the getting started stuff. Here is what my new code looks like:

<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("theBtn").click(function(){
var qty = $("fieldQty").val();
if (!isNaN(qty)){
for (var i = 1; i <= qty; i++){
var newElem = "<input type='text' name=field'" + i + "' />";
$("theBtn").before(newElem);
}
} else {
alert("You must enter a number.");
}
return false;
});
});
</script>

This still doesn't work though. Same result as last time. I did download the latest jquery .js file, renamed it to jquery.js and put it in the same directory as the html file. Also if your wondering this is what the form code looks like:

<dl>
<dt><label for="fieldQty">Test Fields:</label></dt>
<dd><input type="text" name="fieldQty" size="45" maxlength="10" value="{FIELDQTY}" class="inputbox autowidth" /></dd>
<dd><input type="submit" id="theBtn" value="Create Fields" /></dd>
</dl>

it is probably also important to note that chrome shows these script errors when on the page now:

Resource interpreted as Other but transferred with MIME type undefined.

Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'

dsvick

Re: I need dynamic forms

11 years ago

Two things, the first one is easy, you need to add an id to your input with the name 'fieldQty', the id should be the same as the name.

As for the error you're getting, it sounds like either you're using another JavaScript library or JQuery is not being included/found?
Are you using another library as well as JQuery?
Can you see JQuery in the scripts tab of the debugger?

grimshad

Re: I need dynamic forms

11 years ago

So I think Mootools is using the $. So from what I know I need to replace all the $'s with JQuery. So I did that and I added the id="fieldQty" to the input. Still no dice. According to the debugger it goes from jQuery("theBtn").click(function() strait to the end of the script.

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("theBtn").click(function(){
var qty = jQuery("fieldQty").val();
if (!isNaN(qty)){
for (var i = 1; i <= qty; i++){
var newElem = "<input type='text' name=field'" + i + "' />";
jQuery("theBtn").before(newElem);
}
} else {
alert("You must enter a number.");
}
return false;
});
});
</script>

Here's a question that I should have asked a while ago: Should I even be using JQuery to do this? Can't javascript do this without JQuery? What are the benefits of me doing this in JQuery over just using javascript.

At this point I can see JQuery has a minor inconvenience of requiring an extra library on the server, which is no big deal. I'm not exactly sure what benefits JQuery is giving me though, it was just recommended to me.

dsvick

Re: I need dynamic forms

11 years ago

Your missing the hash marks in your selectors, the # tells it that it is looking for an ID. Make the following changes:

jQuery("theBtn") ... jQuery("#theBtn")
jQuery("fieldQty") ... jQuery("#fieldQty")
jQuery("theBtn") ... jQuery("#theBtn")

No, you dont have to use JQuery to do this, but using it makes it easier by handling all of the browser compatibility issues as well as making the code you actually need to write smaller.

Top Reply

Response title

Attachments

jQuery Forum

I need dynamic forms

Replies(7)

Re: I need dynamic forms

Re: I need dynamic forms

Re: I need dynamic forms

Re: I need dynamic forms

Re: I need dynamic forms

Re: I need dynamic forms

Re: I need dynamic forms

Statistics

Tags

Actions