Forum Moderators: open
I need to take mulitple form fields(lets say 2 to start with) and marge them into one hidden form field on submission of the form.
Lets say I have:
<select class="wizardSelect" name="stock" id="stock">
<option value="availability:everything">--All Items--</option>
<option value="availability:instock">In Stock Only</option>
</select>
as form field 1
and:
<select class="wizardSelect" name="category" id="category">
<option value="cat:all">--Any Category--</option>
<option value="cat:printers">Printers</option>
</select>
as form field 2.
I need stock and category to merge into one field on submission such as:
<input type="hidden" name="af" id="af" />
so the value would be:
"stock:instock cat:all"
This would then appear in the bar (as the form uses a get method) as:
othervariables&af=stock:instock cat:all&morevariables
I've tried a few suggestions from the web but none seemed to work, any help much appreciated.
- the handler should go in an onSubmit event of the form itself in case the the user presses enter instead of using the button.
- return false from the function so that the form only submits once, via javascript
- A "good way to work" (not necessarily a rule) is to make sure the first item is always a non-selected value. It makes error checking and checking for user input errors easier. For example, "oh, I didn't know I did that" is a non issue.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- previous on ONE LINE -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="Text/javascript">
function add_to_hidden(form) {
var comp=msg='';
var ind=0;
if (document.getElementById('stock')) {
ind = document.getElementById('stock').selectedIndex;
if (ind==0) { msg = 'Please select a stock option.\n'; }
else {
comp = document.getElementById('stock').options[ind].value;
}
}
if (document.getElementById('category')) {
ind = document.getElementById('category').selectedIndex;
if (ind==0) { msg += 'Please select a category option.'; }
else {
if (comp != '') { comp += ' '; }
comp += document.getElementById('category').options[ind].value;
}
}
if (document.getElementById('af')) {
document.getElementById('af').value=comp;
}
else { msg = 'Oops, no hidden field'; }
if (msg == '') {
// uncommment this, comment the alert to submit
// form.submit();
alert(document.getElementById('af').value);
}
else { alert(msg); }
return false;
}
</script>
</head>
<body>
<form action="somescript.php" onSubmit="return add_to_hidden(this);">
<p><label for="stock">Stock:</label>
<select class="wizardSelect" name="stock" id="stock">
<option value="">Please Select</option>
<option value="availability:everything">--All Items--</option>
<option value="availability:instock">In Stock Only</option>
</select>
<label for="category">Category:</label>
<select class="wizardSelect" name="category" id="category">
<option value="">Please Select</option>
<option value="cat:all">--Any Category--</option>
<option value="cat:printers">Printers</option>
</select></p>
<input type="hidden" name="af" id="af" />
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
I do understand your point about making a none selectable value on each form field. The problem is we will have about 5 or 6 options and a user doesn't have to select all of them.
I will comment out some, but hopefully by looking at your script I'll be able to create alerts on the ones we want to have selected.
At the moment I'm trying to work out how to have the text box in the form use your script to not submit and pop an alert if it is blank.
Review the "if" sections. Remove the ones you don't want.
Select lists are easy if you have a blank value as index zero. For text boxes, textareas, you check the value attribute:
if (document.getElementById('some-text-box')) {
if (document.getElementById('some-text-box').value=='') {
msg += 'The some value text box is required\n';
}
}
It basically works like a switch on the value of "msg" which contains the error message. It starts blank,
msg='';
So for each one you want to check, you check the field, if it's blank, you concatenate msg with the specific error.
if (field one is blank) {
msg += 'field one is blank\n';
}
if (field two is blank) {
msg += 'field two is blank\n';
}
When it gets to the end, if msg is blank, submit, if not, alert.
if (msg=='') { form.submit(); }
else { alert(msg); }
Then you return false so that click on submit, or press enter, doesn't submit the form anyway. Javascript will submit it if validated, but if JS is disabled, it will still work. You just need to do the same checks server-side.
return false;
