homepage Welcome to WebmasterWorld Guest from 54.242.200.172
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
submit button functioning in IE but not in chrome FF, safari
neha11




msg:4117928
 6:50 am on Apr 19, 2010 (gmt 0)

Hi
I have been implementing email functionality for a new website which works in IE but not in any other browser. I am using a master page for where i have mentioned the contentplaceholder and a form tag which is taken by all ither pages now in one specific page :Home page i am using a overlay for email u must have come across it in many site when email icon is clicked a small overlay kind pop up comes. The code for overlay is in the same page as Home page to make it functional i am using another form tag:
<form action="#">
<div class="errorHolder">
<div class="errorPoint">Error messaging</div>
</div>
<div class="clearfix">
<table cellspacing="0" cellpadding="0">

<tr>
<td class="lTD">
<label for="YourName{Required}" class="errorInput" >Your Name</label>
<input type="text" name="YourName" id="YourName{Required}" />
</td>
</tr>
<tr>
<td class="lTD">
<label for="YourEmail{Required}">Your email address</label>
<input type="text" name="YourEmail" id="YourEmail{Required}" />
</td>
</tr>
<tr>
<td class="lTD">
<label for="FriendName{Required}">Your friend's name</label>
<input type="text" name="FriendName" id="FriendName{Required}"/>
</td>
</tr>
<tr>
<td class="lTD">
<label for="FriendEmail{Required}">Your friend's email address</label>
<input type="text" name="FriendEmail" id="FriendEmail{Required}" />
</td>
</tr>
<tr>
<td>
<div class="submitLine clearfix">
<input type="submit" class="btn" value="send" id="send[CustomShareThisSiteSubmit]" onclick="javascript:debugger;return false;"/>
<a href="#" class="cancelOver btn">Cancel</a>
</div>
</td>
</tr>

</table>
</div>

</form>
When teh page is generated there are two form tags in my page source which is working fine in IE but not in other browsers. for other browsers on click of the button no action is taking place its not even going to the debugger placed on the click event. WHat could be wrong with this code .Please help.

 

rocknbil




msg:4118182
 4:09 pm on Apr 19, 2010 (gmt 0)

not in other browsers.


If one of those other browsers is FireFox, see what the Error Console reports, and post the error here.

I suspect that the function "debugger" is not completing, let's break down what's happening from what I can see.

First understand the intent of "return false." When you return false from any object, it tells the browser not to perform the expected behavior; this can be true of a link or any action, including forms. Return false stops your form from submitting, and allows the function debugger to manage the actual submit, so when it's WORKING the form doesn't get submitted twice.

Before you just remove that bit, read on, it may break other things.

So when someone clicks submit, what is supposed to happen in your code in the function "debugger" does some stuff and if it passes, submits the form within the function "debugger," like

function debugger() {
// something here
document.forms[0].submit();
}

Where "forms[0]" is the first form in the document, which raises another possible problem, see below.

So for whatever reason, that function is failing in "other browsers," and the onclick handler moves on to return false, making the form not submit anything.

If removing return false; fixes your problem, you'll be on your merry way - however I suspect "debugger" is there for a reason, and other things will be lost.

Note that this event handler should go in the form element itself as an onsubmit handler. The reason is someone can enter into a text field and press the Enter key on their keyboard, never touching the submit button, and debug() is ignored in that case. Putting it into the form submit insures it passes to the function.

<form action="#" onsubmit="debugger;return false;">


The action of # is a dangerous thing to do, if Javascript is disabled, the form will submit "to itself," meaning, whatever page the form is on.

When teh page is generated there are two form tags in my page source


This in itself may pose a problem. referring to my sample,

function debugger() {
// something here
document.forms[0].submit();
}

But by having two forms, they would have to be referenced by their index in the document,

document.forms[0]
and
document.forms[1]

Generally what you would do is pass a reference to the current form object using the this keyword.

<form action="#" onsubmit="debugger(this);return false;">

Then debugger could accept the reference as the variable "form" in this example.

function debugger(form) {
// something here
form.submit();
}

I don't know that these will lead you to a solution, but these are what I see right off.

- Check the FireFox Error Console

- Try the page with just one form, see if it still fails

- If you get it working, see if you can move the event handler into the form action, then see if you can modify debugger() to accept a reference to the form object

kaled




msg:4118251
 5:47 pm on Apr 19, 2010 (gmt 0)

In addition to Bill's comments
onclick="javascript:debugger;return false;"

There are three problems with this alone...

1) The javascript: prefix is for use in urls not event handlers.
2) Functions without parameters should include brackets, i.e. use debugger
();
3) Returning false in response to an event will always inhibit further action.

Also, you should generally use the form onsubmit event rather than the submit button's onclick event.

Kaled.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved