Just a quick Javascript question

[ATLien]

javascript:ajaxload('livesearch.php', 'rightcolumn');

ok, I use the line above to execute a javascript function. On the same page alittle earlier I have a search box with an id of query. How could I make it so when people type in the search box "v7n" it would change the above code to

javascript:ajaxload('livesearch.php?q=v7n', 'rightcolumn');

dynamically.

What this is a live search, that I am writing, and I want people to have a search box then a search button and when they click search, dynamically the page will change with out reloading.

[LazyJim]

Do you want it to change as soon as thy finish typing v7n in the box? Or when they click the button?

The code you specified, is that in the button onclick attribute?

[ATLien]

I would like it to happen when they type, right now that is the onclick of the button.

[LazyJim]

Can't the ajaxload function check the search box to see if it has 'v7n' ?
Or (more likely) an intermediate function called by the button, that decides what url to pass to the ajaxload function?

Anyway, you can make a function to check the contents of the search box every time a letter is typed by attaching it to the onkeyup event. Not sure how cross-browser that event is, the onchange event could be used but some browsers don't fire that event until after the user 'clicks out' of the text-box (until the text-box loses focus). If you wait till after they have finished typing then you can use the onblur event, this one is made for when the text-box loses focus, and I think is the best time to check for the 'v7n' and most reliably cross-browser.

so search box attribute onblur="checkme(this)"

and a function to test the text etc

function checkme(element) {
	if (!element || !element.tagName || !element.tagName=='INPUT') return; // stop if not what we expected.
	var txt = ''+element.value;
	var button = document.getElementById('***insert your button id here***');
	if ( txt.search('v7n') ) button.onclick = "ajaxload('livesearch.php?q=v7n', 'rightcolumn');";
	else  button.onclick = "ajaxload('livesearch.php?', 'rightcolumn');";
}

Note the button code is changed whether the v7n is found or not (incase they take the v7n away again!).

Also note the code is not tested at all, there may be mistakes!

[LazyJim]

There's also a text-input event: http://www.w3.org/TR/DOM-Level-3-Eve...vent-textInput

But I've never heard of it before so might not actually work any/many current browsers yet???