I tried to hide elements in my html form by defining a javascript function at the beginning of my page and calling it through a button's onclick attribute. It seems like the browser (firefox 4.x) tries initially to hide the given element when I click the button, but then quickly reloads it. Without the script, obviously, no attempt is made by the browser to hide the element. Here is the pertinent code:
function showHide() {
document.getElementById('search').style.display = 'none';
}
<button onclick="showHide()">Advanced</button>
Does firefox default to what it finds in the css file instead of using the javascript modifications?
Edit #1:
First off, I am trying to get an text edit field to disappear. When I click on the "Advanced" button, it does disappear for a fraction of a second and then reappears. I tried returning false at the end of showHide(), but that did nothing, and I tried onclick="return showHide();" but that didn't work as well. I checked the css file, and there are no display: settings that could conflict with this. I'll see if I can't get this up on my server in a few minutes and post the link.
Edit #2: Thanks for the help. Changing the type attribute of the button fixed the issue by preventing the button from defaulting to "submit," as suggested below. This kept the form from being reloaded, which was causing the element to reappear every time it tried to go away. Not something a beginner like me would have known.
The html <button> element supports a type attribute. If omitted, it defaults to type="submit". This causes the button to work exactly like an <input type="submit" />.
So... if your button is located inside a form, then clicking the button causes the click handler to run (calling showHide()), but then it submits the form. It is the form submission that is causing the page reload.
To fix this, simply add the proper type to your button:
<button type="button" onclick="showHide()">Advanced</button>
There has to be something else going on in your page because the basic code works fine in Firefox and other browsers. You can try the demo for yourself here: http://jsfiddle.net/jfriend00/LpC36/.
I'd suggest you describe what else might be going on the page? Other code? CSS? Other objects and interactions? Form submission? Try showing us the HTML.
For example, if the button is a submit button, it could be submitting a form and reloading the page.
I suspect it has to do with scope. Try this out:
<button onclick="document.getElementById('search').style.display = 'none';">Advanced</button>
if it works you didn't declare your showHide() function in the right place. For example i can break #jfriend00 's example like this:
http://jsfiddle.net/NYZrX/1/
this is one of this reasons it is bad practice to mix javascript in html code, it all needs to be in the global scope...
Related
I've created a button in this context:
And I have a javascript function expecting the click to make a request to the server:
But something weird happens when I hit the button, the page reloads it all and don't take the action expected. Thank you all in advance, im gettin crazy with this.
When I put an alert to check if the button is triggered I get an error:
There is a chance that you get this behavior because of the form tag. Try to remove the form tag and try again.
Maybe this can also help you:
Stop form refreshing page on submit
Try insert: type="button" inside the button tag. Otherwise it will be a submit button (when inside a form tag).
I'm updating an existing application that has several different button types on some pages that submit forms. I need each button to be able to execute some javascript right before submitting a form. I put my js code in the onsubmit event of the form, but not all buttons execute it. I created a sample that shows 3 different buttons that all submit the form. Buttons 1 and 3 will display the alert I entered into the form's onsubmit event. Button 2 does not. I know I could put the alert code in the onclick for button 2 before the submit() call, but I really need a way that is consistent with all buttons. I need all buttons to execute the alert in my sample and I want to update code in one place and have it work for all buttons that are submitting this form. Is this possible? Let me know if I need to provide more information.
Code:
<html>
<body>
<form name="form1" action="x.html" method="get" onsubmit="alert('onsubmit javascript executed');">
<br><br>
<input type="submit" value="1. html input type submit">
<br><br>
<input type="button" value="2. html input type button with onclick" onclick="document.form1.submit();">
<br><br>
<button style="width:180px;margin-right:5px;height:30px" onclick="document.form1.submit();">
3. html button with onclick
</button>
</form>
</body>
</html>
Update: 1/15/2014
Thanks for the ideas, but unfortunately, it is not addressing the issue of creating one solution that works for all buttons that may cause a submit event. I spent all day yesterday trying different options based on the responses of both Jordan and Benjamin but still have not had luck. So I thought I would take a step back and explain why I am trying to do what I am asking about.
I have a classic ASP application. On the pages that require input from the user, I am getting many users that are timing out and when they click a button that submits the page they lose their information. So I am adding a javascript timer to the page to first warn the user they are about to time out and then let them know that they have timed out so that they can copy and paste their work somewhere else to save it. A key point is that the way this app was designed is that most pages submit to a hidden iframe so that the page doesn’t have to be reloaded. If the user times out they don’t know it because it happens in the hidden iframe and they think the app just locked up.
My solution to this problem was to create a javascript timer on the page. It creates a variable with the start time that the page loaded and counts down each second displaying a javascript message at set times. I set it up and it works great, with one exception. If the user submits a page (to the hidden iframe), their session timeout gets reset, but my javascript variable that tracks time does not. This would lead to them getting a timeout message when they have not really timed out. My first thought was that this would be an easy fix because after the page loads I can write a javascript function that finds every form onsubmit event and prepend a line of code to update my timer variable. However, based on my original question, this is an issue because the form onsubmit event is not being called if the button is not a submit button even though it calls the submit() function of the form. Ideally, I wanted to provide code that could be added to each form page that would not require any other updates to that page.
Unless someone has a better idea, I think I’m going to have to update some existing code on each page. For any <input type=submit> or <button type=submit>, the update to the form’s onsubmit is fine and that is handled automatically by the javascript code I add to the page that finds all the forms and updates the onsubmit event. But for each <input type=button> and <button type=button> I will have to manually check their onclick event and each function that it might call to see if it calls the submit() function. If it does, then I have to do like Jordan pointed out and make it call a function where I can enter my code before calling the submit().
Any ideas to address my issue or to suggest a different method are appreciated. Thanks again.
Maybe you could instead submit the form from an event handler on the non-standard buttons, and have your code execute beforehand:
HTML
<button onclick="formSubmitHandler()">Submit</button>
JS
function formSubmitHandler() {
// your code
document.form1.submit();
}
I have a feeling this is easy but, I've been working on it for some hours with little success.
I'm using iframe version of LightFace modal windows:
http://davidwalsh.name/facebook-lightbox
I'm trying to find a good way to make a form submit when they press a submit button that I add to the panel. The best I found so far is:
light = new LightFace.IFrame({ height:440, width:550, url: 'http://samplePage.html',
title: 'Sample' }).addButton('Submit', function() {
window.frames[window.frames.length-1].formName.submit();},'blue')
.addButton('Close', function() {light.close(); },true).open();
I'm not very confident with this code but I think for the submit it gets to the iframe I'm looking for by just assuming it's the second to last one. This works on a webpage. Unfortunately I'm building this for a facebook app that loads within a Facebook iframe itself. When loading in the facebook page the code doesn't do anything.
Does anyone have a better way of putting a submit button onto this?
There shouldn't be much trouble with putting an iframe inside an iframe, however:
window.frames[window.frames.length-1].formName.submit();
...could very well cause trouble. You are kind of tracking down your form, while I would try to target the form element directly, i.e. assign it an id:
<form id="myForm"><!--- some form stuff --></form>
and use the dollar sign to get to it:
$('myForm').submit();
I'm debugging a weird problem with two simlar search forms - when user types some search criteria in a text box and hits enter, one form returns results and another just reloads. And it happens only in IE - FF treats both forms as expected. I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
How do I find what form element caused submit event?
Thanks,
Andrey
Sounds like the single textbox form bug in IE.
To get around it, you can use Javascript to handle the enter key press, or just insert a blank hidden textbox. Lame, I know.
I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
Yes. Browsers may, largely at their whim, treat enter as clicking on a submit-button, just submitting a form, or nothing. Put general form submission stuff in form.onsubmit, rather than an onclick on the first submit button.
You could sprinkle your form elements with onclick events to set a hidden form variable with a different value per element, then sniff the results either with a DOM inspector or through something like Fiddler.
There may be a way to simply have a form onsubmit() event that you can extract the triggering element from the event object, but I'd have to dive into the docs to see if this is possible... if I get chance I'll do some looking.
I think I may help you much If you provide your two forms code. However, check to see for the following submit button code:
<input type="submit" value="Submit">
When you use this, then when you press Enter among the corresponding form, the form will be submitted. If you wish to check something before submitting you can use JavaScript Function like the following:
<input type="button" onclick="javascript_function_name();" value="Submit">
Thanks. If this can not help you, please express the situation more briefly.
I have build a quite complex widget which contains "some kind of
form". It has a form tag, but I'm loading a lot of stuff in there via
Ajax etc. Cannot explain it in detail, and the code is too long to
paste in here.
Now, in a "live('click', function()" I use for one of the form fields,
I'm writing a couple of values into hidden fields of another form.
That works fine, as I can see them in the generated code. But if I
leave the page and then hit the back button, the values are gone.
If I write some values into those fields outside the live click
function though, they are still there when I leave the page and come
back using the back button.
But I need to write the values into the hidden fields out of the live
click function (I'm inserting values from fields of my form into
them).
I don't know what causes this and wasn't able to find a workaround yet
(even though I tried a lot).
Any ideas?
Thanks!
Have a look at the jquery history plugin (http://plugins.jquery.com/project/history)
Usually what happens is that browser remembers what you have entered into a form (even if you don't submit it) so that when you hit back button, it populates all the visible fields for you.
It seems it's not the case with hidden fields. There's a workaround though.
Every time one of your hidden fields is changed, you can add #part to your url (eg. www.mysite.com/users#userId,groupId,...).
When the page is loaded again (via back button for example), it will contain the #part. Parse it as a string to determine how to populate hidden fields and populate them.
Review the history plugin for jQuery to see how to read the #part.http://plugins.jquery.com/files/jquery.history.js_0.txt
Use CSS to hide the input instead of the input type.
<input type="text" id="foo" name="foo" style="display: none;" />
instead of
<input type="hidden" id="foo" name="foo" />
I tripped over the same issue and this seems to resolve it.