button acting strange and reloads the page - javascript

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).

Related

Google Tag Manager Form - Thank You Page

I am trying to use google tag manager to have a tag that will fire every time the user submits the form and lands on the thank you page. In this scenario, I know an option is to use the Trigger: Page View, and then specify the thank you page URL in the conditional statement.
However, since this URL can be shared, I only want to track when the user submits the form and lands on the thank you page (not when the URL is accessed through other ways). What would be the best way to tackle this?
Why would people share the thank-you page? I can imagine sharing a form, but why would the url of the Thank you page get shared.
However, what you can do is track clicks on the button or link that submits the form.
I ll advise assuming you NEED to fire when the user gets to the ThankYou Page for X reason and CANT be done on the button submit click.
Add a custom HTML tag with a trigger on the click of the form submit button (you can use build in variables such as Click Classes) and add a 'flag' on the session storage or a cookie (choose the one you are more comfortable with).
Then generate a trigger that fires on the Thankyou page AND has the flag on.
Example:
Tag when user submit the form:
<script>
storage.setItem('flagSubmit', 1);
</script>
Custom JS variable that checks if user has flag:
function(){
return storage.getItem('flagSubmit');
}
If you need any more help just ask.
Hope it helps!
-- EDIT: add info
As you comment you cant detect if the flag is being saved properly so here is a code you can paste on the console that ll avoid you browser to exiting the page and allowing you to see if your click tag worked and registered on session storage you data.
window.addEventListener("beforeunload", function() { debugger; }, false)

How to execute javascript before submitting form from any button type consistently

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();
}

Pressing submit, nothing happens (jQuery AJAX Forms)

Example: dev.alphenweer.nl
When someone clicks on a link, the form gets loaded, they fill out the form, and press a button to submit it. But when someone presses the button, nothing happends. Why is that? What is wrong with my code?
For example, click on "REQUEST API AGAIN", and then just fill SOMETHING in. Nothing happens. Why?
You need to use
live. Which will result in
$('#api_reg_submit').live('click', function(){...
This happens because the button, which you set click event on, is not in DOM at start aka when its ready, but its added later. If you had the button outside and loaded only inputs it would work like you have it now. Hope it makes sense :)
There's no <form> surrounding the input elements, so they're just a random textbox and button sitting on a webpage. There's no element with an id of api_req_submit on the page either, so the click function you're trying to add has nowhere to go.

Javascript element hiding not working

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...

Selectively POST to new browser window

I've got a form that has three submit buttons for posting back data for different scenarios.
Each one POSTs to different actions on a controller, however for one of them I need to POST back to a new browser window.
Is this possible? I know I can add a target="_blank" to the form, but that will open a new window for all of the submit buttons...
UPDATE:
Currently, I've tried several methods to get this working and I've completely failed, my current non-working code looks like this:
$("input[type=submit]").click(function (e) {
var form = $("form.filter-execution-form");
if ($(this).hasClass("run-report"))
$("form.filter-execution-form").attr("target", "_blank");
else
$("form.filter-execution-form").removeAttr("target");
});
Does anyone have any ideas to get this working?
Thanks,
Kieron
See this post - use the same method to dynamically add the attribute for the submit button you want it for (ie add it to the onclick event of your submit button you want to add this support to)
How do I add target="_blank" to a link within a specified div?
There are probably a number of different ways to do this. The easiest I can imagine is when the submit button is pressed in the first window, you open a new window with a URL (on the same domain) that has the desired form in it (may have to watch out for pop-up blockers). Then, transfer the data that has been entered from your existing form to the form in the new window. Call a javascript function in the new page that tells it to submit the form.
In the form set target="postWindow" or any other name that is the same throughout, and it will always post to that popup (if it was not closed).
The best way I can think of doing this (and it might not be the best way of doing it) would be using JavaScript.
When you click the button, prevent it doing anything but run some javascript instead, open a new window on a blank page, with a hidden form in it, use javascript to transfer values from your form to the new pop-up form, submit the pop-up form & do something with original page to show an action was taken.

Categories

Resources