#1
  1. No Profile Picture
    Senior Meddler
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Location
    NY NY USA
    Posts
    142
    Rep Power
    14

    Form submission: keyboard vs javascript differences?


    Hey folks,

    This one's been bugging me for several days now. I've got a page with two search forms. Both consist of a single text field plus a few hidden fields with search parameters for a Notes database search. Both have small image buttons that users can click to submit their searches. Both call near identical verification functions that simply check to make sure a search term has been entered before actually submitting the search. It's all pretty straightforward stuff.

    Both forms work absolutely fine if you type in a search term and hit the enter key on your keyboard.

    The first form inserts the "button" graphic as an image tag with the actual "hot" area image mapped, which submits the form via a javascript: href.

    The second form, no matter what I do, refuses to submit the form properly when the button is clicked and there is a valid search term (invalid search terms are processed appropriately -- popping up an alert message and returning false for the form submission). I've tried:

    [list=a][*]the same technique as the first form,[*]wrapping the entire img tag in an anchor and putting the submit js in it,[*]for both the above, putting in a dummy URL and using an onclick event handler,[*]changing the <img> tag to an <input type="image"> tag...[/list=a]

    none of which will get the form to work. Finally, removing the <img> from the second form and inserting, instead, an <input type="submit"> then clicking on the submit button will submit the form just fine.

    grrrrrrrrrrrrrrr...

    Anyway, what I'm looking for here is whether someone knows what the difference between submitting a form via an HTML/browser-based "method" (the submit input or the enter key, resp.) versus a JavaScript-based method (handling any of the onclick events as described above). The references I have are useless on this -- all say the the submit() method is identical to clicking on an <input type="submit"> button.

    (Sorry, can't post code that would be useful -- the Notes db is behind a firewall. Again, all the validation script does is check to see if there is something in the text field, returning false if no and true if yes.)

    Thanks,
    Bob
    --
    Bob Boyle
    boyleb@rappdigital.com
    www.rappdigital.com
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Location
    Dublin
    Posts
    413
    Rep Power
    14
    the code would be useful!!

    as far as I know the only diiference when using normal submission is that the value of the submitting element (if named or an image) is included with the query string.. this way you can also have several different submit buttons / images and handle each different (as only one will show up in the submitted data)
  4. #3
  5. No Profile Picture
    Senior Meddler
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Location
    NY NY USA
    Posts
    142
    Rep Power
    14
    ... I was going to post this earlier, but I got sidetracked by work. I hate when that happens ...

    It seems whenever I have a puzzler that I struggle with for several days, five minutes after I post it here I come up with a solution. You think I'd have learned by now to forego the several days worth of struggle and just post things immediately...

    There is another thing that differs between the enter key/submit input submission versus the image-onclick javascript submission -- clicking an image to submit a form also passes the click coordinates as the last two parameters in the submission string.

    I wound up changing the form's action to a mailto to view what was getting passed to the server, which is how I was reminded about the click parameters. Otherwise, the form is being submitted (I got the email from both submission methods just fine). For instance, the submission string for the enter key is:
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__Click=0&Q=rob&Query=%5BFullname%5D+contains+rob*
    while the string from the click is
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__Click=0&Q=rob&Query=%5BFullname%5D+contains+rob*&x=86&y=11

    I have my suspicions that either (a) Notes isn't stripping the info after what looks to be a search wildcard (*) and returning an error because of that, or (b) this funky __Click hidden field (which I just noticed since epl wanted to see some code and these strings are about all I can post here) is screwing up the works, not detecting a click if it needs to (__Click=1??).


    Either way, it looks like this might be a problem with Notes and how Domino/Notes handles search strings (...which means I can dump this on the back-end developer on this project! ) OR it just has to do with the code the developer has written to process this info (same thing!).
    --
    Bob Boyle
    boyleb@rappdigital.com
    www.rappdigital.com
  6. #4
  7. No Profile Picture
    Senior Meddler
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Location
    NY NY USA
    Posts
    142
    Rep Power
    14

    ... even more form submission weirdness ....


    For those interested:

    A colleague of mine has used a rather clever trick in the past to avoid click-submission problems like the one I've been having. He inserts a form with only hidden fields that parallel those from the user-enabled form. Submitting the user-enabled form writes (and reformats, if needed) form input values to their corresponding fields in the hidden form, then the hidden form is submitted.

    I created a little test version of this with the "hidden" fields of the second form visible -- so I could check them for errors -- then threw the submit() command inside a setTimeout so I could have some time to check the modified data in the "hidden" fields before it was submitted. The hidden form's action is also set in the function.

    The code for this is below, and an explanation of the weirdness afterwards. There are actually two function in the document -- the first does some simple validation, the second deals with the hidden form.
    Code:
    <html>
    <head>
    <title>test form</title>
    <script language="JavaScript" type="text/javascript">
    function passTheBuck(searchTerm) {
       if ((searchTerm=="") || (searchTerm=="Employee Search")) {
    	// not valid
    		alert("To search the employee directory, please enter a first and/or last name.");
    		return false;
    	} else {
    	// valid, now submit via function
    		submitHiddenForm(searchTerm);
    	}
    }
    function submitHiddenForm (searchValue) {
    	document.form2.Q.value = searchValue;
    	if (document.form2.Q.value.indexOf(" contains") > -1) {
    		document.form2.Query.value=document.form2.Q.value;
    	} else {
    		document.form2.Query.value="[Fullname] contains " + document.form2.Q.value + "*";
    	}
    	document.form2.action = 'mailto:you@yours.com';
    	setTimeout('document.form2.submit()', 2000);
    	//document.form2.submit();
    }
    </script>
    </head>
    <body>
    <table border="0" cellpadding="0" cellspacing="0" width="400">
    <tr>
    <td><form method="post" action="javascript:void(0)" name="form1" onsubmit="passTheBuck(form1.text1.value)">put something in the field</td>
    <td><input type="Text" name="text1" size="20"></td>
    </tr>
    <tr>
    <td>now click one of the submit methods</td>
    <td><input type="Image" src="/images/get_number_buttn.gif" width="49" height="35" border="0" alt="" onclick="this.form.submit()"><input type="Submit"></form></td>
    </tr>
    </table>
    <hr>
    <table border="0" cellpadding="0" cellspacing="0" width="400">
    <tr>
    <td><form method="post" name="form2">&nbsp;<INPUT TYPE=hidden NAME="__Click" VALUE="0"></td>
    <td><input type="Text" name="Q" size="20"><br><input type="text" name="Query" size="40"></form></td>
    </tr>
    </table>
    </body>
    </html>
    Since you don't have the graphic I used as a submit button, you'll just see the image's box ... but you can still click on it to submit the form.

    Also, if you copy and paste this code into a document to test it for yourself, look out for where "javascript", all lower case, is used. This new forum software "corrects" it to "java script" for you (hopefully there is a way to turn that off!).

    The lines in red are what to play with here. The first red line, you should put your own email address in there so you receive the forms that get submitted.

    As for the other two red lines...
    As I said, I put in the setTimeout so I could visually check the data before submission. In the "normal" page where I needed this code, I removed the setTimeout ... and the form did not submit. By any method -- enter key, submit button, image. Putting in a setTimeout as low as 1 (one millisecond) is enough ... without the setTimeout, it doesn't work.

    Now, I have my own speculations on why the setTimeout is "needed", but I'd like to hear what others think.


    Bob
    --
    Bob Boyle
    boyleb@rappdigital.com
    www.rappdigital.com
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Location
    Dublin
    Posts
    413
    Rep Power
    14
    I reckon thsat the delay is needed because both forms are being submitted - rather than just the second one.
    Try the following
    Code:
    <form method="post" action="javascript:void(0)" name="form1" onsubmit="passTheBuck(form1.text1.value);return false;">
    Also: submits fine for me on IE5 without the timeout...
  10. #6
  11. No Profile Picture
    Senior Meddler
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Location
    NY NY USA
    Posts
    142
    Rep Power
    14
    that return false certainly does seem to do the trick ... and now the the usability testing is done on my project site, I can actually try it out with the proper action instead of a mailto:


    Thanks, epl!
    Bob
    --
    Bob Boyle
    boyleb@rappdigital.com
    www.rappdigital.com

IMN logo majestic logo threadwatch logo seochat tools logo