I am writing a script to make a page auto submit twice. The script should first press the first submit button, then have a small delay and press the second. Both are on the same document.
What I am doing is: get the document, then use document.GetElementByID('id_button').click(), and have timeOut for a delay to the second click. Thing is, the first button works fine, but the second won't work. I don't know why. Is my approach correct?
Have the action on the form reflect the state.
/Page.HTML
/Page.HTML? washere=true
/Page.HTML? washereagain=true
That can be identified by your script
What I am doing is: get the document, then use document.GetElementByID('id_button').click(),
Not all browsers support the click method for submit buttons, so your strategy will fail for a good number of browsers in use.
You can submit the form by calling its submit method. If you want to auto-submit it a certain number of times (which seems a pointless exercise, but that's your choice), set a cookie each time you submit the form and check it when the page loads to see how many times it's been submitted.
Related
I am facing an issue in my Struts2 application. Basically, on textfields, I have validations such as missing value, wrong value etc. There is then a button below these fields which submits the form when all validations are successful.
Suppose, I blur out of a textfield with a wrong value, the validation fires an error below this textfield. Now, when I supply a correct value and directly click on the upper half of the button, the validation clears and the page also submits along with it simultaneously. However, when I click on the lower half of the button, the validation just clears but the page does not submit at all. This behaviour is consistent across the application.
Now, the QA team has raised a defect for this as it could hamper user experience.
Could anyone suggest a possible fix for this other than calling the submit button click event on the mousedown event? We tried that but its causing side effects.
I cannot show the exact code as there are many collaborating CSS classes for this scenario which could cause confusion. If anyone could try to give a brief solution, it would be extremely helpful!
You need to perform the same function regardless of what part of the composite is invoked. If you click a submit button it should submit, if you click reset button it should reset. If you click cancel it should return to the previous page. Different functions of the same control mislead the user experience because it doesn't perform expected behavior of the button.
I have a form to let people submit news articles to my site (a company intranet). Sometimes the form submission takes a few seconds to resolve due to some actions I have in place on the relevant model save method. I wanted to replace the text on the form page with a message saying "Sending your article. This may take a few seconds, please do not refresh the page." as soon as someone hits submit. I've seen these on a number of websites when buying things online.
My first attempt at doing this was to add an onClick event to the form button. Submitting then successfully replaced the text but did not submit the form. I had a look at this answer on binding two events to one submit button but it doesn't seem to address my need as it looks PHP-specific. I'm certain javascript is the right tool for the job but I can't think of how to do this other that binding to clicking the submit button. Does anyone know the correct way to do this?
JavaScript is indeed the right way to do so. If you are using jQuery you can go ahead and use something like:
$('form#your-form-id').submit(function(){
$(this).hide().after('Loading, please wait...');
});
Where #your-form-id would be the id of the form. This function is hiding the form content and showing that text, you could do anything instead actually.
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();
}
Inside a form I have a button. What is the difference between when I submit the form via JavaScript like this
<button onclick="document.forms[0].submit();">
and when I submit it like this
<button type="submit"></button>?
The first one works for me with most browsers except webkit-based. The latter works fine as well. No difference in functionality is apparent to me. Is there one?
The first example:
<button onclick="document.forms[0].submit();">
...will do two things:
Its onclick will submit the first form in the document (i.e., the one specified by the 0 index in forms[0]).
It will submit the form it is in (if it is in a form) because a button with no type attribute specified will be a submit button by default.
This two-step double-submit behaviour can be seen in this quick-and-dirty demo: http://jsfiddle.net/fMwuX/ (and is likely to lead to weird behaviour that might be a bit confusing to debug). If the button isn't actually in a form then this won't be a problem.
The second example:
<button type="submit"></button>
Will simply submit the form it is in (if it is in one).
In my opinion the second option is definitely preferable for several reasons, including but not limited to:
It will work even if the user has JS disabled.
It doesn't hard-code a form index with forms[0].
It is shorter and clearer.
It won't clash with other form submit validation.
The javascript example will submit the first form in your HTML document while the second example will submit the form which wraps that button.
documents.forms[0].submit will trigger the submission of the first form in your HTML page. Indeed, documents.forms contains all the forms of your document. You can access them with their name attribute or their index.
Then, the input of type submit in a form will trigger the submission of his parent form.
As you've discovered, the first one makes the page not work in some circumstances, and is - for this, and other reasons - generally considered bad practice. Use the second.
I have an OnBase e-Form that I'm building. There are three buttons on the form that all submit. OnBase does different things based on the name of the button used to submit the form. If the button has a name of OBBtn_CrossReference it opens another window with a cross referenced document. I need to programmatically 'click' that button.
I've read several posts about how to use JavaScript to submit a form, but none seem to accomplish my goal. I just need to POST and to have it appear to come from a button named OBBtn_CrossReference.
I don't need to submit any data. The way the page is currently set up, the entire page is already a form and since I don't want to break the functionality of the other form buttons it seems I must leave it that way.
UPDATE:
The suggestion below was tested as a call from the onload event in the body tag and since the button posts the page reloads and the call is made over and over again spawning unlimited child windows. I would appreciate a suggestion on how to get the button to only be clicked the first time the page is loaded and not on postback.
There's a click() method on links, buttons, checkboxes. For example , I submitted this comment by running document.getElementById('submit-button').click() from chrome's command line.
I know I am a little late to this post, but you can try and leverage a cookie to get this done:
if (document.cookie.indexOf('xref=true', 0) < 0) {
// Set the xRef cookie, so we do not fire it again for this form.
document.cookie = 'xref=true';
//alert(document.cookie);
document.getElementById("OBBtn_CrossReference").click();
}
else {
document.cookie = "xref=false";
//alert(document.cookie);
}
I tested this on the Thick and Thin clients in 10.0 and it worked fine.
The postings on this site are my own and don't necessarily represent my company's positions, strategies or opinions.