Activating onChange JS on an edit.

[hcdarkmage]

Alright, so I got my onChange script to do what it is supposed in the dropdown, but how can I get it to work when they need to EDIT the options?

 

<tr>
<td valign=top width=28%><? echo $lang['contactform']['fieldtype'] ?></td>
<td>
	<select name="fieldtype" id="fieldtype" onChange="toggledisplaymode(this.options[this.selectedIndex].value)">
		<option value="textbox" <? echo $fieldtype=="textbox"?"selected":"" ?>><? echo $lang['contactform']['textbox'] ?></option>
		<option value="drop" <? echo $fieldtype=="drop"?"selected":"" ?>><? echo $lang['contactform']['dropdownselection'] ?></option>
		<option value="checkbox" <? echo $fieldtype=="checkbox"?"selected":"" ?>><? echo $lang['contactform']['checkbox'] ?></option>
		<option value="radio" <? echo $fieldtype=="radio"?"selected":"" ?>><? echo $lang['contactform']['radiobutton'] ?></option>
		<option value="textarea" <? echo $fieldtype=="textarea"?"selected":"" ?>><? echo $lang['contactform']['textarea'] ?></option>
	</select>
</td>
</tr>
<tr>
<td valign=top><? echo $lang['contactform']['fieldwidth'] ?></td>
<td><input type=textbox name=fieldwidth style="width:60px" value="<? echo $fieldwidth?$fieldwidth:"200" ?>"> px</td>
</tr>
<tr id="tbdataHeight" style="display:none">
<td valign=top><? echo $lang['contactform']['fieldheight'] ?></td>
<td><input type=textbox name=fieldheight style="width:60px" value="<? echo $fieldheight?$fieldheight:"50" ?>"> px</td>
</tr>
<tr id=tbrowOption style="display:none">
<td valign=top><? echo $lang['contactform']['fieldoptions'] ?></td>
<td>
	<table border=0 cellpadding=0 cellspacing=0 width=98%>
		<tr>
			<td><input name=optionvalue style="width:160px"> <input type=button value="<? echo $lang['contactform']['add'] ?>" onclick="addOption(document.thisform.optionvalue.value); document.thisform.optionvalue.focus();"> <input type=button value="<? echo $lang['contactform']['del'] ?>" onclick="deleteOption()"></td>
		</tr>
		<tr>
			<td><select size=5 name=options style="width:230px" onchange="populateItem(this.options[selectedIndex].index)"></select></td>
		</tr>
	</table>
</td>
</tr>

 

So when they make the selection to edit, it will automatically select the field, so the onChange event is basically canceled. I STILL need to show the hidden fields (as it is) so they can edit their contact, but I can't use the onChange. Any ideas on how I can call the function when they do an edit?e

 

Oh, the function code is:

function toggledisplaymode(selectType){

var tbrowOption = document.getElementById('tbrowOption');
var tbdataHeight = document.getElementById('tbdataHeight');

if (selectType=="drop" || selectType=="checkbox" || selectType=="radio"){
	tbrowOption.style.display = "table-row";
	tbdataHeight.style.display = "none";
}else if(selectType=="textarea"){
	tbrowOption.style.display = "none";
	tbdataHeight.style.display = "table-row";
}else{
	tbrowOption.style.display = "none";
	tbdataHeight.style.display = "none";
}
}

[jl5501]

I would suggest onblur on the edit box

[hcdarkmage]

I would suggest onblur on the edit box

 

Ok. I put the onBlur in a couple of areas, hoping to get the right place.

 

First place I put it was on the link that sends it into edit mode . . . no results. There was no value set at that time for it.

 

Second place was in the

if ($pageaction=="edit" && $field_id != "")

section, because it should define the $fieldtype variable for the JS function to use . . . still no results.

 

Am I just putting it in the wrong place, or is my JavaScript-Fu that bad?

[jl5501]

you said you had a text field where the editing was done. That is the field which needs the onblur attached to it, to detect when the editing is done

[hcdarkmage]

you said you had a text field where the editing was done. That is the field which needs the onblur attached to it, to detect when the editing is done

 

Being safe, and not wanting to offend, nowhere in my post did I say the editing was done in a text field.

 

Here is the Edit script:

echo "<td class=\"gridRow\" align=center>
<a href=\"index.php?component=contactform&page=wce.field.php&pageaction=edit&field_id=$myrow[0]&sortby=$sortby&sortseq=$sortseq&start=$start\"><img src=common/image/ico_edit.gif border=0 title=\"".$lang['contactform']['editthisrecord']."\"></a>  ";

 

It basically restarts the page and pre-fills in the form areas, but it won't show the hidden areas because the selection in the drop down box is already made. Since that uses an onChange to show those hidden areas, they will not be shown when in edit mode.

 

I had put the onBlur in the only text field there was and it didn't work there. Any other suggestions?

[jl5501]

Ok my understanding is that you wanted the equivalent to onchange, but for your textarea, and the best way to do that is to use the onblur event.

 

If I have misunderstood your requirements, then I apologise, and will look at your original post again.

[hcdarkmage]

Okay, let's try to word this differently, mostly because I am at a loss. the original script (onChange script) toggles a couple of DIVs to display so that extra information can be put in. This onChange event is in a drop down list.

 

Now, when you go to EDIT that particular page, you can't see the extra options because there is no onChange event going on. My question is what should I do to call that function so that the extra information is shown? I have tried many things, but none of them worked and I am stumped.

 

I even tried something like this:

if (($pageaction=="edit" || $pageaction=="update") && $field_id !=""){
for($i=0; $i<count($options); $i++){ echo "<script type=\"javascript\">addOption(\"$options[$i]\")</script>"; }
echo "<script type=\"javascript\">toggledisplaymode(\"$fieldtype\")</script>";
}

right after the drop down list, since that is where the onChange takes effect, but it didn't work. Any other ideas?

 

[hcdarkmage]

Found a neat little JS function that helps with onloads:

 

<script type="javascript">
    function addLoadEvent(func) {
        var oldonload = widow.onload;
        if (typeof window.onload != 'function'){
            window.onload = func;
        }else{
            window.onload = function(){
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
</script>

 

This code is put below the functions you want to call onload, then you do something like:

 

if (($pageaction =="edit || $pageaction=="update") && $field_id != ""){
    echo "addLoadEvent(toggledisplaymode(\"$fieldtype\"));
}

 

This pretty much makes it so that when you edit the information, it at least shows the DIVs that where hidden (see code from previous posts to see what I'm talking about).

 

Now if I can just figure out how to put the variables that need to be edited in the proper place 

 

And if you are wondering I found the explanation for this here: http://www.webreference.com/programming/javascript/onloads/