• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Javascript submit problem

 
Ranch Hand
Posts: 154
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,
I'm currently working on an HTML page where (simplified) I have
An Input Text field which has an onchange event handler which calls a function that submits the form when the field is exited.
A Calculate button which has an onclick event handler which calls another function that also performs a submission.
The submission parameters set up are different for each action.
My problem is that if data is changed in the text field THEN the calculate button is pressed the server should perform the functions for the text change AND the Calculate press.
So I need a way of knowing in the onchange function that the button has ALSO been pressed. The trouble is that I can't use onclick,onfocus or whatever on the button to set a flag because the text onchange function is called first.
My current solution is to set a flag to 'Y' using the onMouseOver event on the button and check this in the onchange function. However this seems a bit clunky and because I have to set the flag to 'N' for an onMouseOut event there is a chance that (if the client PC is v slow) the user will move the mouse after clicking the button and the flag will be reset before the onchange function is invoked.
Phew, hope this sort of makes sense!!
Has anyone got any better ideas.
TIA Graham
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
you can put it before the onchange command
onchange="flag=Y;functionName();"
or you can chnage the action of the form.
document.formName.acton="blah";
Eric
 
Graham VMead
Ranch Hand
Posts: 154
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Eric,
Thanks for the reply, I probably haven't expalined it very well but the sequence of events is that
1) User enters data in field.
2) User clicks on button
3) onChange occurs because of 1) and function on text field is called.
4) The function associated with the onchange of the text field performs a submit.
The onchange function is invoked if I just tab out of the field or press the button. What I need to do is work out a way of knowing in the onchange function whether the button has been pressed.
So that
a) User enters data in field then tabs out - is distinguished from
b) User enters data then presses button.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
either way, that on change method is going to fire.
What is the difference between the two submits? I do not understnad this, so I do not know what needs to be done.
Eric
 
Graham VMead
Ranch Hand
Posts: 154
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Again Eric,
The onchange being fired in both cases is the exact problem
I've got two requirements
1)If the user enters data in the text field and then tabs to another field then a submit should be sent to the server and calculation A is performed. This is done via a javascript submit invoked on the onchange.
2) If the user enters data in the text field BUT then presses the submit button Calculation A (for the text field) should be performed, then Calculation B to output some other results.
My problem is as you say that the same function on the onchange is called for both options.
I can't attach a function to the button as it is not executed.
Therefore for option 2) I need some way for the function on the onchange to determine that the button has been pressed so that it can set up form data to inform the server.
Graham
 
Graham VMead
Ranch Hand
Posts: 154
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Forgot to mention that the Calculation are performed on the Server.
 
Graham VMead
Ranch Hand
Posts: 154
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sorted it by disabling the onchange event on the text field from a function called from onmouseover on the submit button.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Only thing is does that work if they tab to it??
 
Graham VMead
Ranch Hand
Posts: 154
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Good thinking!. You can tab out of the text field to the button but then you have to click on the button, so this is two submissions so that is ok.
Tabbing to the button does mean that the onchange isn't disabled so I've added an onFocus event just to be totally sure.
Here's a simplified version of the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function disable()
{
document.dbinfo.myText.onchange=null;
}
function enable()
{
document.dbinfo.myText.onchange=myFunction2;
}
function myFunction()
{
<!-- this sets request up parameters and performs a submission in reality -->
alert("I have been pressed");
}
function myFunction2()
{
<!-- this sets up different request parameters and performs a submission in reality -->
alert("I have changed");
}
</SCRIPT>
<STRONG>Test Javascript</STRONG>
<FORM NAME="dbinfo" METHOD="post">
<INPUT TYPE="text" NAME="myText" onchange="myFunction2()">
<INPUT TYPE="button" NAME="myButton" VALUE="Press" onFocus="disable()" onMouseOvr="disable()" onMouseOutt="enable()" onBlur="enable()" oncliick="myFunction()">
<INPUT TYPE="text" NAME="sommat">
</FORM>
</BODY>
</HTML>
 
reply
    Bookmark Topic Watch Topic
  • New Topic