Develop Reference

How to append additional sets of fields to html form

Example: let's say we have a form with 3 fields: pc, part_id, part_details. Sometimes you will want to add additional parts to database when adding pc, so part_id and part_details should be duplicated(part_id and part_details should be corresponding). What I want is the best way to append this two fields to the form?
I know if you just want to duplicate one field you can name the field like this:
<input type="text" name="part_id[]">
Then we can easily get the post data as array. But now we are duplicating more than one field, if we use the approach above at the post end the two/multiple arrays will not be relevant. The approach described here seems to be a good one http://www.quirksmode.org/dom/domform.html, but the fact that names are changing all the time makes it complicated to use the post data as well.
There is another possible approach described here Multiple Forms With Input Fields With The Same Name Attribute? Good Or Bad? . It gives an idea to duplicate the entire form. I am not sure if I understand it correctly, but when I try putting two identical forms in the same page and submit one of them, only data from this form will be submitted, the other one will be ignored. Also it is not suitable for my scenario as not all the fields should be duplicated.
So what is the best way to accomplish this duplicating job?

In the link you gave, they didn't duplicate the form, just the elements inside the form which is fine. If all you are adding is multiple parts to a single PC then there shouldn't be a problem. The parts will be linked via array indices (you can rely on the ordering).
The first instance of part_id[] will correspond to the first instance of part_details[]. This should be distinguishable in your server-side language. In PHP for instance, part_details[2] will correspond to part_id[2] etc.

You can use another level of indexing:
<input type="text" name="pc" />
<!-- First part -->
<input type="text" name="parts[0][part_id]" />
<input type="text" name="parts[0][part_details]" />
<!-- Duplicate part -->
<input type="text" name="parts[1][part_id]" />
<input type="text" name="parts[1][part_details]" />
<!-- Another duplicate part -->
<input type="text" name="parts[2][part_id]" />
<input type="text" name="parts[2][part_details]" />
The fields for each part (id and details) can be easily generated using jQuery.

Is there a label in HTML

i'm coming from Java background, Is there a label in HTML, where I could using for example javascript update the value.
I mean by label here, something similar like text input, but not not possible to update it, and it looks non-updateable.

You said you wanted something similar to a text input, so... use one, then! Just disable it, like
<input type='text' disabled>
^It's MAGIC!
You don't want label literally in HTML, because it's in no way similar to a text input. Labels in HTML are used for things like putting text in front of radio buttons.
If you wanted something similar to a Java label, you would just use the p tag, unless it would be behind a text input or so, then you would use the label tag.

The obvious to create a label would be using <label>
<label for="coward">Förnamn</label> <!-- points to to input element with id coward -->
<input class="text-input" name="coward" type="text" id="coward" value="whatever" />
But I think you're looking for something to "store a value in a form" that shouldn't be editable. You could use a hidden text input for that.
<input type="hidden" name="hiddenField" value="whatever" />
You could use divs (and style it the way you want it), and then just fetch the html from that div.
Take a look at the other answers as well.
There's a lot of options. What do you actually want to do? It would be easier to give you an answer that suits your needs.

A label is a <label>...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

You have a couple of options.
There is actually a <label> element, which is typically used for labeling the items in a form.
You could also do a text input (<input>) and set it to disabled:
<input disabled>
Or you could just use a simple paragraph element <p> and style it how you want.
Here is a JSFiddle with some examples: http://jsfiddle.net/QXP75/
However, you'd want to use something semantic, so knowing what the purpose is would allow a more specific message. Also, with CSS, you can make just about any element look like anything.

Input from user without the <input> tag

i need to get an input from user, for instance his name, but the user won't be able to edit his name, like in a text box. This is what i'm using right now:
<input id="number_input" type="text" size="12" maxlength="19" />
In order to write or edit his name the user will use already existing buttons. Just like in a calculator. How can i achieve this in html??
Thanks.

I would probably consider using this: http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/
DEMO HERE

jquery selector not working in IE6 due to uppercase id

I have a hidden input field on a page
<div id="SomeDiv">
<input type="text" name="ID" id="ID" value="Something"/>
</div>
If i use $("#SomeDiv #ID").val() in IE9 i get the value "Something" but in IE6 i'm getting undefined. If i change the id and name to lower case IE6 returns correctly. I.e.
<div id="SomeDiv">
<input type="text" name="id" id="id" value="Something"/>
</div>
Then $("#SomeDiv #id").val(). Notice I've not changed the case on the div id, only the input.
Anybody else come across this and a possible work around? Client is using IE6 so switching browser is not an option and I keep coming across this.
Update :
I've changed the id value from just "ID" to "WizardID" and it works in IE6
<div id="SomeDiv">
<input type="text" name="WizardID" id="WizardID" value="Something"/>
</div>
$("#SomeDiv #WizardID").val()
I've also come across this issue with a field called "IsValid" IE6 cannot find the field at all but if i rename it "isValid" bam its found. I suspect its a bug with jquery but doubt it will be fixed as IE6 is long past it. Thanks for the help.

You should change the html if possible:
In Internet Explorer, if you’re trying to target an element using
getElementById, for some reason that browser will search the name
attribute of certain elements on the page, in addition to the id.
Using id="id" can also trigger a bunch of other IE issues.

The best thing to do is change all id and classes to lowercase per common standards. That way you don't apply any band-aid fixes.

Swap CSS style of a group of elements on click

I found a thread, Change an element's class with JavaScript, that is along the lines of what I'm going for, but I don't know how to implement it.
I have a page with 4 input buttons and two CSS styles: "Selected" and "notSelected". One button will be hard coded initially as "Selected". When the user clicks another button, I'd like to programatically iterate through all the buttons (the number of buttons on each page will be between 2 and 10), set the clicked button's class to "Selected", and make sure all the other buttons are set to "notSelected".
I've got the logic down, but I've never done anything with JavaScript before, so I haven't the slightest idea about how to do this. If someone knows of a tutorial/piece of code already out there that does this, please point me in the right direction.
Thanks a ton!

You can go the easy way and use a framework like jQuery that does the hard work for you

As you are new to JavaScript, this might be a bit much, but have you considered using jquery? Take a look at toggleClass(): http://api.jquery.com/toggleClass/

Hi just made a quick script, Hope that helps you. Let me know if you find any problem with the script.
I am using focus event and input box, you may change it as needed.
function doSelect( obj ){ var
mylist=document.getElementById("formDiv")
var inputItems=
mylist.getElementsByTagName("input");
for (i=0; i < inputItems.length;
i++){
document.getElementById(inputItems[i].id).className
= "Notselected"; } document.getElementById(obj.id).className
= "selected"; }
Have a form tag within the div tag id="formDIV"
Have few input tags of type text and onfocus="doSelect(this)"
<body> <div
id="formDiv"> <form
name="testform">
<input type="text"
name="tx1"
id="text1"
onfocus="doSelect(this)"/>
<input type="text"
name="tx2"
id="text2"
onfocus="doSelect(this)"/>
<input type="text"
name="tx3"
id="text3"
onfocus="doSelect(this)"/>
<input type="text"
name="tx4"
id="text4"
onfocus="doSelect(this)"/>
<input type="text"
name="tx5"
id="text5"
onfocus="doSelect(this)"/>
</form> </div>
</body>
this should
help.