Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    JS form- onSubmit- function

    I am trying to create a form that writes text to an HTML canvas when submitted. Eventually, the function that writes the text will be more complex. The problem is the text only appears briefly, because the function is only called once when the form is submitted. I want the function to be called continuously after the form is submitted. How do I do this? I have had very little experience with JS.

    A lame (failed) attempt...
    Code:
    <html>
    <head>
    
    </head>
    
    <body>
    
    
     <canvas id="canvas" width="790" height="605">	
    Sorry, your browser doesn't support HTML5
    </canvas>
    
    <form name="frm1" action=" " onsubmit="greeting()">
    <input type="text" name="fname" />
    </form>
    
    </body>
    
    <script type="text/javascript">
    
    
    function init() {
    	//use canvas "canvas" and assign to variable canvas
    	canvas=document.getElementById("canvas");
    	c=canvas.getContext("2d");
    }
    
    function greeting()
    {
    	c.fillText("var!!!", 100, 460);
    	var test = 1;
    }
    
    
    if (test == 1)
    {
    greeting();
    }
    
    init();
    
    </script>
    </html>
    Thanks

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    Huh???

    Once a form is truly submitted, then the browser LOADS A NEW PAGE from the server. What URL is loaded depends on the action= of the <form>. If the action is missing or blank, then the same page is loaded, but it *IS* loaded again. Thus WIPING OUT everything that has been done in the browser up to that point.

    So... Are you *SURE* you really WANT to submit the <form>?

    I should note that as your code is written, if the onsubmit is ever called, the page *WILL* be submitted, and thus wiped out.

    Another weird part here is this:
    Code:
    if (test == 1)
    {
        greeting();
    }
    Since the only way that test is set to 1 is to first call greeting, *that* particular call to greeting() will never occur.

    I think maybe you need to tell us what it is you are trying to do, because I don't think this code is going to do it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    What I am trying to do...
    1. Have a person enter a word into a form
    2. have them press enter
    3. have an object in a canvas move based on what word they typed in (the object is moved by running a javascript function)

    So, basically what you are saying is that submitting a form is not going to work because it erases all the data. So, how can I have a person enter information, and be able to examine this information without having them submit a form?

    Thanks!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    Various ways.

    (1) Capture the onchange event from the <input> field and use that.
    or
    (2) Use the onsubmit of the <form> but always do return false to suppress the actual submit.

    The smallest change to your code would be the latter.
    Code:
    <form name="frm1" action="" onsubmit="greeting(); return false;">
    But many people are used to hitting TAB after entering data into online <form>s, and that won't trigger the onsubmit. So perhaps doing this would be better:
    Code:
    <form name="neverUsed" action=" " onsubmit="return false;">
    <input type="text" name="alsoNeverUsed" onchange="greeting(this.value);"/>
    </form>
    And now you receive the changed value of the text field in your greeting function and do with it as you will:
    Code:
    function greeting( text )
    {
        ... now you can base your actions here on the variable text ...
        ... which is of course the changed value of the text field in the <form> ...
    }
    The onchange will be triggered by either TAB or ENTER, and the return false in the <form>'s onsubmit ensures that you won't leave the current page.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    javascript_code (12-21-2011)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •