Forum Moderators: open
I think I need to take the values of a multi-select and loop through them and make it a pipe delimited value.
below is failed attempt at the multi-select part of it.
if(the_field.type == 'select-multiple') {
//need to loop though values and construct a pipe deliminated value that can be passed
var val = "";
var element = document.getElementByName(fieldname)
for(i=0;i<element.length;i++)
{
if(element[i].selected)
{
val += element[i].val+"¦";
}
}
fieldvalue = val;
}
Here is the full code of the test page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form name="form1" method="post" action="/admin/" enctype="multipart/form-data">
<label for="hair_type[]">Hair type:</label><br>
<select name="hair_type[]" id="hair_type" class="selectMultiple" size="5" multiple="multiple">
<option value="Thick" selected="selected">Thick </option>
<option value=" Thin">Thin </option>
<option value="Straight">Straight </option>
<option value="Wavy">Wavy </option>
<option value="Curly">Curly</option>
</select>
<div id="message_hair_type[]" class="updatingframe">updating</div>
</form>
<script type="text/javascript">
<!--
for (var i = 0; i < document.forms.length; i++)
{
for (var j = 0; j < document.forms[i].elements.length; j++)
{
if (document.forms[i].elements[j].type == 'text') document.forms[i].elements[j].onchange = My_events;
if (document.forms[i].elements[j].type == 'radio') document.forms[i].elements[j].onchange = My_events;
if (document.forms[i].elements[j].type == 'textarea') document.forms[i].elements[j].onchange = My_events;
if (document.forms[i].elements[j].type == 'checkbox') document.forms[i].elements[j].onchange = My_events;
if (document.forms[i].elements[j].type == 'file') document.forms[i].elements[j].onchange = My_events;
if (document.forms[i].elements[j].type == 'password') document.forms[i].elements[j].onchange = My_events;
if (document.forms[i].elements[j].type == 'select') document.forms[i].elements[j].onchange = My_events;
if (document.forms[i].elements[j].type == 'select-one') document.forms[i].elements[j].onchange = My_events;
if (document.forms[i].elements[j].type == 'select-multiple') document.forms[i].elements[j].onchange = My_events;
}
}
function My_events(e)
{
var ie = navigator.appName == "Microsoft Internet Explorer";
var tag = ie ? window.event.srcElement : e.target;
update_dbase(tag);
}
function update_dbase(the_field)
{
document.getElementById('message_' + the_field.name).style.display = 'block';
var fieldname = the_field.name;
var fieldvalue = the_field.value;
if(the_field.type == 'select-multiple')
{
//need to loop though values and construct a pipe deliminated value that can be passed
var val = "";
var element = document.getElementByName(fieldname)
for(i=0;i<element.length;i++)
{
if(element[i].selected)
{
val += element[i].val+"¦";
}
}
fieldvalue = val;
}
xmlhttp = new XMLHttpRequest();
if(the_field.type == 'file')
xmlhttp.open("GET", '/include/globals/customforms/ajax_file_updater.php?field_name=' + escape(fieldname) + '&field_value=' + escape(fieldvalue) , true);
else
xmlhttp.open("GET", '/include/globals/customforms/ajax_updater2.php?field_name=' + escape(fieldname) + '&field_value=' + escape(fieldvalue) , true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4) document.getElementById('message_' + fieldname).innerHTML = xmlhttp.responseText;
}
xmlhttp.send(null)
}
-->
</script>
</body>
</html>
I do need to mention that I am a php programmer and am just mucking my way through this code. I apologize in advance for any obvious "id10t" errors.
I will also need to repeat the code for multi-selects into checkbox arrays. If there are any changes that need to be done for that, I would appreciate it.
val += element[i].val+"¦";
Just passing, so haven't been through all your code... but shouldn't this be:
val += element[i].value + "¦"; ?
Thanks for the message. While you were correct in that the syntax was wrong, it still did not work. What it did, however, was to get me thinking about how I am calling elements and if it was correct.
After analyzing and modifying the code, I came up with a working solution.
Below is the working changes. I hope this helps someone else.
if(the_field.type == 'select-multiple')
{
//need to loop though values and construct a pipe deliminated value that can be passed
var val = "";
for(var i=0;i<the_field.options.length;i++)
{
if(the_field.options[i].selected)
{
val += "¦" + the_field.options[i].value;
}
}
fieldvalue = val;
}
I need help from a real JavaScripter, not a muddler such as myself. This script works great in IE7, Firefox and Safari, but not IE6. any ideas?
ie6 compatibility issue.
Is there a particular part of the code which does not work with IE6? Your 'working changes' above works OK in itself with IE6.
Just to note in your original code (although I realise you may not being using this anymore)...
var element = document.getElementByName(fieldname)
var element = document.getElementsByName(fieldname)
