JS Dynamic Links

[roseplant]

Hi
I have a form with several rows and each has a text box labeled 'Status'. The user should be able to change the value of Status, then click Save and a GET query will be run in an iframe without interrupting the browser window. To do this I am using a onkeydown event so the Save button's (which is an a href link) href address is changed to what is in the box. But I can't get the box's value to change!
I have spent several hours at this now and I'm a bit exasperated. Could someone please take a look and tell me what I am doing wrong?

The crucial bit is bold.



<form name='form4'>
<input type=text size=8 name='4'
value='' onkeydown="document.links['href4'].href == 'this.value'"
onchange="javascript:toggleLayer('saveenq4')">

<style type="text/css">
div#saveenq4{
margin: 0px 20px 0px 20px;
display: none;
}
</style>


<div id="saveenq4">

<a id="href4" target='RSIFrame'>Save</a>
</div>

<script type="text/javascript">
function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}

function handleResponse(a) {
alert('enquiry ' + a)
}

function changeLink () {
sel = document.addresses.list.selectedIndex;
document.links[pos].href = document.addresses.list[sel].value;

}
</script>

<iframe id="RSIFrame"
name="RSIFrame"
style="width:110px; height:110px; border: 0px"
src="blank.html"></iframe>

[crh3675]

WTF is document.addresses? I assume that is your form. Are you sure the link has the same index as your selectedIndex? Try:


function changeLink () {
var f = document.forms['addresses'];
var list=f['list'];
var index=list.selectedIndex;
document.getElementsByTagName('a')[index].setAttribute('href',list.options[index].value);

}

[gil davis]

<input type=text size=8 name='4'
value='' onkeydown="document.links['href4'].href == 'this.value'"
onchange="javascript:toggleLayer('saveenq4')">
Here is a suggested change for syntax errors:
<input type=text size=8 name='4'
value='' onkeydown="document.links['href4'].href = this.value"
onchange="toggleLayer('saveenq4')">However, it will likely not work any better. IMHO, the problem lies in using the onkeydown event. It may be better to use onkeypress or onkeyup, because I don't think the textbox value is updated onkeydown.

You shouldn't have to continually update the href - let the user finish typing, unless you plan on blocking certain keys. Maybe onblur would work, and you should check for a valid entry as well.

[roseplant]

That works great, thanks a lot! I used onkeypress in the end.