So I have this fix HTML structure that I cannot influence. The structure is provided by a tool, where you add selection/input/etc fields via drag and drop.
E.g. a regular textfield gets this HTML code:
<div id="d_001" class="field text ">
<label for="f_001" id="l_001">Shortdescription</label>
<input id="f_001" name="id1" value="" />
</div>
And a textarea would get this code:
<div id="d_002" class="field area ">
<label for="f_002" id="l_002">Description</label>
<textarea id="f_002" name="id2" cols="45" rows="5" ></textarea>
</div>
I also have a selection list, that based on the selected item shows/hides further information fields. Let's say for example the selection list contains different clothes. When you select "pants", two input fields "length" and "width" are made visible. When you select "bra", two input fields "cup size" and "underbust" are made visible.
So here's the thing:
When selecting "pants", it would currently submit the following information to the system:
Short Descritption: Pants
Description: I would like to by black skinny jeans
Length: 32
Width: 32
Cup Size:
Underbust:
From googling a little I found out that disabling the non-selected fields should do the trick. Yet it doesn't. It clearly disables the fields, as they're grey and not editable, but they still get transmitted when sending the form.
Based on the HTML snippets above I tried disabling via
document.getElementsByTagName('input').disabled = true;
--> which disables all "input" input fields, but still submits the label with no content. Even though I am not sure if it doesn't submit the content or if it still submits the empty content.
(yes, this would leave out selection lists, textareas, etc. but this is the secondary issue, solvable by doing the same for all tag types)
Hence I thought maybe I need to disable all elements within the div item, meaning I'd need to also "disable" the labels via
documents.getElementsByTagName('label').disabled = true;
I am not too surprised it doesn't work. But as I can't disable div items as a whole I really don't know what I am missing. Is there anything else that forces the fields to be submitted? I am very grateful for any hints that push me in the right direction.
Edit:
As per request I want to add the exact loop that disables the mentioned input fields:
// list with links to make the items clickable
<ul id="myUL">
<li><a id="li1" title="pants" href="javascript:void(0)" onclick="returncontent(this);showpants();">Pants</a></li>
<li><a id="li2" title="bra" href="javascript:void(0)" onclick="returncontent(this);showbra();">Bra></li>
<li><a id="li3" title="tshirt" href="javascript:void(0)" onclick="returncontent(this);showtshirt();">T-Shirt</a></li>
<li><a id="li4" title="socks" href="javascript:void(0)" onclick="returncontent(this);showsocks();">Socks</a></li>
</ul>
// a var array containing the available class attributes
var elemente = ["pants","bra","tshirt","socks"];
// defining the functions triggered by the list
function showpants(){
howtocode(0);
}
function showbra(){
howtocode(1);
}
function showtshirt(){
howtocode(2);
wosOSD();
}
function showsocks(){
howtocode(3);
// have the function do different things depending on the selected list item
function howtocode(value){
var arrayLength = elemente.length;
for (var i = 0; i < arrayLength; i++) {
var classEle = document.getElementsByClassName(elemente[i]);
if (elemente[i] === elemente[value]){
changeStyle(elemente[i],classEle,"block");
setRequired(elemente[i],classEle);
}
else{
changeStyle(elemente[i],classEle,"block");
disableFields(elemente[i],classEle);
emptyFields(elemente[i],classEle);
}
}
}
function disableFields(ele, classEle){
for (var n = 0; n < classEle.length; n++) {
var inputfields3 = classEle[n].getElementsByTagName('input');
var textfield3 = classEle[n].getElementsByTagName('textarea');
for (var o = 0; o < inputfields3.length; o++){
inputfields3[o].disabled = true;
}
for (var p = 0; p < textfield3.length; p++){
textfield3[p].disabled = true;
}
}
}
and the other functions do the following:
- changeStyle() [sets the div item to "block" or "none"
- setRequired() [is self explainatory I hope]
- emptyFields() [resets all input fields if the selected item gets changed]
I am aware that it currently doesn't work. I am working on providing a fiddle.
Edit 2:
So I found the following code somewhere in the system JS/jQuery files. Could this have something to do with it? So far I haven't understood yet what it does.
var data = elements.inject({ }, function(result, element) {
if (!element.disabled && element.name) {
key = element.name; value = $(element).getValue();
if (value != null && (element.type != 'submit' || (!submitted &&
submit !== false && (!submit || key == submit) && (submitted = true)))) {
if (key in result) {
// a key is already present; construct an array of values
if (!Object.isArray(result[key])) result[key] = [result[key]];
result[key].push(value);
}
else result[key] = value;
}
}
return result;
});
