onchange error (javascript) help

Walle

Anyone know what problem is with this code. I get error "form is null or not an object" wen typing into field.

<script type="text/javascript"> 
var foo; 
function submitTheform(which) { 
which.form.submit(); 
} 

</script> 


<form> 
<input name="qty" type="text" onchange="submitTheform(this)" onkeyup="foo = setTimeout('submitTheform(this)',1000)" onkeydown="if(foo){clearTimeout(foo)}">
</form>

bradgrafelman

Worked fine for me in Chrome and FireFox on Windows... what O/S and browser were you using when you got that error?

Walle

<script type="text/javascript">
function submitform()
{
  document.myform.submit();
}
</script>


<form name="myform">
<input type='text'  name='query' onkeyup='submitform()'/>
</form>

This work without error but I want submit after minimum 2 character is typed and then remember what is typed on submitted. Possible?

Dont know anything about javascript. I’m trying to make search function with GET-method but this textfields gets empty everytime it submits.

johanafm

<script type="text/javascript">
var count = 0;			// need global scope to retain data between events

function submitform()
{
	if (++count > 2)
		document.myform.submit();
}
</script>

But in reality you'd probably want window.setTimeOut() after first, and then keep resetting that as long as current input doesn't match input from last time, or of course if there are less than 2 characters in the input field.

As for wanting to "remember what is typed on submitted", I'm not entirely certain what you mean by that. Do you mean that the user types something, the page is submitted, and one the next page displayed by the server you want to also show the user input from the previous page?
Certainly possible: echo $_GET['inputFieldName'];
But add appropriate sanitizing of user input.

Walle;10935860 wrote:
Dont know anything about javascript.

https://developer.mozilla.org/en/JavaScript is a good place to go. Especially the links for Core Javascript Reference and Gecko DOM Reference

Walle

WoW! That’s work nice. Thanks

Code looks now

<?php
$test = $_GET['query'];
echo"
<form name='myform'>
<input type='text' value='$test' name='query' onkeyup='submitform()'>
</form>
";
?>

Walle

I have little trouble with this code, after forms submits i can’t continuing write or edit and wonder how textfiled can be selected even after forms submits? After submits page reloads and must select inside textfiled again to continuing write or editing.

johanafm

<body onload="document.getElementById('query').focus();">
...
<input id="query" type='text' value='$test' name='query' onkeyup='submitform()'>

Walle

That works. Thanks. I have search on Google days and hours for some solution but whiteout any luck. So thank you very much.

There is one little problem still. When submit and page reloads, then cursor will be in beginning of words that was wrote. Can this made so it gets after last character instead? Somehow?

Walle

Anyone?

johanafm

In what browser(s) does that happen? Both FF and Safari puts cursor at the end.

This ensures you get to the last position. update onload attribute value to match.

	function setFocusMoveLast() {
		var d = document;
		var o = d.getElementById('query');
		o.focus();
		o.setSelectionRange(o.value.length, o.value.length);

}

Walle

It was in IE8. Never tested with FF but maybe it works nice with it.

I have this code know and it works (made by lots of copy and paste solution). But set caret ends when it when page reloads is not god idea really and want it set to "current position". Is it possible?

<body onload="document.getElementById('query').focus();func()">

<script language="javascript">
function func()
{
var t2 = document.getElementById("query");
t2.focus();
t2.value = t2.value;
}
</script>

<script type="text/javascript">
function submitform()
{
document.forms["myform"].submit();
}
</script>

<script type='text/javascript'>
function notEmpty(elem, helperMsg){
if(elem.value.length == 1){
elem.focus();
return false;
}
submitform();
return true;
}
</script>

<form id='myform'>
<input type='text' id='req1' value='<?php $test = $_GET['query']; echo $test; ?>' name='query' onkeyup="notEmpty(document.getElementById('req1'), 'Please Enter a Value')">
</form>

Never think on this before but user may want edit somewhere in text and right now it moves to end everytime page reloads.

Code is probably not best code and maybe it can made to one function also instead of having 3 function?

johanafm

You should probably look through your code again since you are doing lots of pointless things.
e.g. (there are more)

someVar = someVar;			// does nothing

// remove the function argument
function f(arg) {
	// code that never uses the argument arg
}

Indent your code

// works, but is not readable.
function f(a, b, c){return (a>b&&a>c?'a':(b>c?'b':(c?'c':0)));}

Use names for variables, classes, functions and constants that carries information. function func() makes little sense, since you can tell by syntax that it is a function. function doStuff is equally bad. function setFocusAndWhat would make sense, as soon as you switch out what for whatever is supposed to happen on the last line of code. And once you put that into words, perhaps you will know what code to write as well.

Other than that, why bother setting the caret position to where it used to be? The user submitted data, and there is of course a chance they'd want to edit something. But what is the probability they'd want to edit text in the same position they had the caret when submitting the form?

Anyhow, the solution would be to listen for the event which fires before the control loses focus. onchange is one such event, but it only fires if something changed. Check the reference I provided a link for. You'll find all events there.
What you do is
- save the caret position before losing focus
- make sure this is sent along with the other post data on form submit
- have your server send this data back when the page loads
- use it instead of the last character position when setting focus to your control.

Walle

You should probably look through your code again since you are doing lots of pointless things.
I know that code is veryy bad, but its just a copy and paste solution for testing. If i can get it work then i will try to clean up it.

Other than that, why bother setting the caret position to where it used to be?

actually what i want is similar to this http://translate.google.se/?hl=sv&tab=wT#

Only one simple textfield that can write and edit into and for every character that typed it submits with GET method. I want use this then to a search function and get data from database depends on what is typed into textfield. Something like this can’t be difficult to made? I don’t know how to do only. Any idea how it can be made?

Weedpacket

Walle wrote:
actually what i want is similar to this

They use JavaScript to communicate with the server, not a form submission (using a form submission would mean repeatedly reloading the page). Search these forums for "Ajax" (which is the common name for this process) or "XMLHttpRequest" (which is the (non-IE-specific) mechanism for implementing it).