Create a div, input text field, checkbox field, and button with javascript?

[Bl4ckMaj1k]

Good afternoon fellas!! Got another JS question for ya...let me know if I am making any sense  :-)

 

So I have the following form elements

 

<div id="tool1" class="check box">
<input name="form_checkboxes[]" type="checkbox" value="Some_Tool" /><br />
</div>

<div id="tool1_label" class="form_label">
Some Tool Name
</div>

<div id="tool_quantity" class="form_quantity">
Quantity
</div>

<div id="tool_textfield" class="form_quantity_textfield">
    <input name="quantity[some_Tool]" type="text" size="3" />
</div><br />

 

On the screen, this form would look similar to the following

 

o Some Tool Name              Quantity ___

 

Assume that the circle in the beginning is a check box and the underscore after 'Quantity' is a text field. 

I have some static tools on the form but I want the user to be able to add as many additional fields as they need to. In other words, I want some fields marked 'Other' or something like that. So the form may look something like this.

 

o Hammer              Quantity ___

o Wrench                Quantity ___

o Drill                      Quantity ___

o Screw Driver        Quantity ___

 

Then when the user has filled out the on screen fields, there should be a button at the bottom marked 'add tool' or something like that. Upon clicking that button, the form will change to the following (for this example, lets assume the button was clicked 3 times)

 

o Hammer              Quantity ___

o Wrench                Quantity ___

o Drill                      Quantity ___

o Screw Driver        Quantity ___

o Other 1                Quantity ___

o Other 2                Quantity ___

0 Other 3                Quantity ___

 

As you can say, clicking three times created 3 additional fields to the original form. The user should be able to type in a specific name for his/her tool though. So, instead of saying 'Other 1', 'Other 2',  or 'Other 3', it would read whatever the name of his added tool is. Is this something I need to do in Javascript or PHP? I can't figure any PHP for this process and I am complete idiot when it comes to JS lol. Any help would be greatly appreciated as I can honestly say I wouldn't even know how to Google this LOL.

 

Also, I am writing this stuff to a database so I need some way to keep these fields unique. I figure there is some type of JS function that will allow the 'Value' for my inputs to be whatever the user types in and that will create my unique ID. I can run a check of some sort that says if those 2 fields are equal then an alert pops us saying something like 'hey, those have to all be unique dude'...!!!

 

So, what do you all think? Am I out of my mind to even think this is possible or should I get punched in the face for not knowing how to do this in my sleep??

[freelance84]

So... you want an 'add tool' button.

 

The user can pick from existing tools, then names of which are stored in a db.

or/

The user can enter their own name of the tool?

 

 

[Bl4ckMaj1k]

So... you want an 'add tool' button.

 

The user can pick from existing tools, then names of which are stored in a db.

or/

The user can enter their own name of the tool?

 

 

 

Wow you summed that up a lot better than I did. In a word, yes, that's what I am looking to create. Can you point me in the right direction? Is this possible?

[freelance84]

Well you could either:

 

1) On the load of the page, get php to store all available tool names somewhere on the printed html page. You could store them as js variables, a hidden <select> or hidden fields form fields or comma seperated in a hidden div... anywhere. If you went for the hidden <select> tag, when the user pressed add tool you could display the said select tag to the user, they could select an option and 'onchange' of the select take the new value the user selected and place it at the end of your list.

 

2) Do the whole lot with complete page reloads, when the user hits 'new tool' reload the php with the new tool.

 

3) Use ajax to generate the list of available tools. I've literally just learnt ajax, and it's pretty straight forward: http://www.w3schools.com/ajax/default.asp or http://www.degraeve.com/reference/simple-ajax-example.php.

When the user hits add tool, js then sends the request back to the server for the list of tools (which is basically a php script), the server (if using php) then prints the available list of tools into the designated container specified by your js script.