Hello Stackoverflow!
I am experimenting with getting a chrome extensions cript to click a page button to trigger an AJAX request, however it would seem that physically clicking said button is not the same as using the following:
document.getElementsByTagName('input')[10].click();
the results of the getElements line is this:
<input type="submit" value="Continue ...">
Using document.forms sort of works, but unfortunately reloads the page, which is not what happens when the Ajaxrequest is fired by the click event.
document.forms[1].submit();
Calling the form returns the following:
<form
action="/battle.php" method="post" name="2913" id="2913" onsubmit="get('/battle.php', '', this);
disableSubmitButton(this);
return false;">…</form>
Doesn't seem obvious to a beginner programmer like me, why using the .click(); in F12 console (chrome) would be any different from the physical click. Also i have verified (sorf of) that the button on the screen is in fact the one i'm calling with the getElementsByTagName('input').
The page reloads because the type of the button is "submit". You could attach an event handler to the "click" button that can submit the form without reloading the page. Your code will look something like this:
Using JQuery:
$('#submitButton').on('click', function(e){
e.preventDefault(); // stops default submit
$('#2913').submit(); // or the ID of your form
});
And your HTML will be :
<input type="button" value="Continue ..." id="submitButton">
Related
I have a form with information about some people. Information is coming from a database, and next to each row is a button. When I press the button, modal should open and show only the information about that person. So if I have 5 people, there are also 5 buttons and each buttons should open a modal with information about that person.
My code is almost working. I don't know how to show a modal after pressing the button, because when I press the button the page reloads and the modal will start to show but it won't fully show becuase th page reload will prevent it. My code is working and the modal is showing the correct information, but the problem is that my page reloads after pressing the button,so it doesn't show my modal.
As far as I know I need to implement Ajax to my code but I am not sure how.
Here is my code:
https://github.com/luka3ska/Form
You should try:
<button name="test" type="button" onclick="onClick()">Click</button>
default value of type is submit. And this triggers a refresh.
So the type must be "button"
I think you have a problem about the event, you must stop the default behavior of the button.
You can do that with event.preventDefault().
In Javascript :
document.getElementById("buttonId").addEventListener("click", function(event){
event.preventDefault()
// Ajax request here ...
});
In JQuery :
$("buttonId").click(function(event){
event.preventDefault();
// Ajax request here ...
});
To extend on #Dumhuzy 's anwser and help you understand what's going on. Whenever you have a <button> within <form> that button will submit the form regardless of if it has the attribute type="submit" or not. Submitting a form will cause the page to reload.
<form action="">
<button>Will reload the page</button>
<button id="prevent">Will prevent reload</button>
</form>
To prevent the form from submitting you must prevent the default action with javascript.
document.getElementById("prevent").addEventListener("click", function(event){
event.preventDefault()
});
I have a simple mytable.view.xml with a table and a button. This table is just one among others in a form and all the tables are handled through different view.xml.
<mvc:view>
<l:VerticalLayout>
//Code for table headers and table
</l:VerticalLayout>
<Button id="myButton" text="test" visible="true" press="onMyButtonClicked"/>
</mvc:view>
Controller:
onMyButtonClicked: function(){
window.location.href = "http://example.com/;
}
onMyButtonClicked is getting invoked when I click on button, but that is being overridden by form submit. Since there is no logic to handle this submit, the page is just reloading instead of navigating to http://example.com/. In developer tools of browser I noticed that the navigate to example.com is being triggered and is cancelled.
One thing I tried and worked was inspecting this button on browser and adding a onclick="return false;" in the button tag. But from sap.m.button I cannot do this.
Tried event.PreventDefault(). This didn't work either.
Is there any other way to stop this button from behaving like a submit button?
A button won't trigger anything if the press event is not bound. For your case why not just remove the press event binding to a callback? Am I missing something? UI5 buttons don't behave like HTML button of type "submit" inside a form.
This question is inspired by this post.
In a nutshell: Why window.location.href is not redirecting to a new page (example.com) when executing the code below?
<form>
<input type="submit" id="submit" value="Submit">
</form>
<script>
document.getElementById('submit').addEventListener('click', function (e) {
window.location.href = "http://www.example.com";
});
</script>
I've always believed, that setting window.location.href immediately loads a new page, but in this case it doesn't. Submitting the form just reloads the page instead, and setting a new location seems to be totally ignored. Why? How? What I'm missing here?
Please notice, that I'm aware of several ways how to prevent form submitting in this case, rather I'd like to know, why setting location.href is ignored, what is the mechanism behind the behavior? I've tried to search explanation from the standard, but haven't found anything so far.
Additional information
This seems to happen in all major browsers (Chrome, Firefox, IE11, Edge ...), but not when the code is run in a Stack snippet (because it's sandboxed, and won't send forms anyway). A console.log put in the function shows, that the click handler is executed before the actual submission is executed.
A jsFiddle reproducing the issue.
You can see easier here what is happening step by step if you will try tu change location drunning form submission
JSFIDDLE
If you will check your browser network tab than you can see that the submit request is cancelled (but still sent) by redirect request. I believe that same situation occurs when you trying to do it onclick or onsubmit the first request just cancelling the next one and prevent window.location.href redirection.
I belive the key thing here is not to view the problem as 'form submission vs page redirect', but as an event-listeners issue.
What you are doing is to attach an event listener to an html element. And it seems that the policy of DOM elements is to execute all the event listeners first, and then the event itself . In your case, the page is redirected to the url you provided, because you set window.location inside the listener, then the submit event itself takes place, so the same blank page is reloaded
The fact that "event flow process will complete after all listeners have been triggered" is stated here: http://www.w3.org/TR/DOM-Level-2-Events/events.html
So far I haven't figgured out a way to execute the listeners after the event , but if that can be done, that is all you need to make this example work
The main issue is that there is nothing preventing the submit button from actually submitting the form. You would need a return false somewhere for that to happen. I'm not fully certain whether the Submit button logic or the click handler is happening first, but regardless, the form post is taking precedence.
I was able to get the following to work:
<html>
<head>
<script type="text/javascript">
function redirect() {
window.location.href = "http://www.example.com";
return false;
}
</script>
</head>
<body>
<form method="GET" action="">
<input type="submit" id="submitbtn" value="Submit" onclick="return redirect()" />
</form>
</body>
</html>
This example does remove the programmatic addition of the click event, but if that's a hard requirement it should be possible to add that back in.
I have a small issue with my submission button in my form.
<input type="submit" name="submit" onclick="this.disabled=true;this.value='Uploading...';return true;" value="Upload" />
I disable the button and display some text to let the user know that their upload is being processed. Note that I also return true to inform Chrome that I still want to submit the form after execution.
However, despite returning true, Google Chrome will not submit this form unless I remove the onclick event entirely.
Do I have to put it all in a function in some embedded script elsewhere on the page and only call the function in the onclick event?
I have a web page I'm working on with jQuery. I'm getting erratic behavior from some elements on my page: Every time a button, any button, on the page is clicked, the page refreshes.
The page must somehow be running some code that reloads that page any time a button is clicked.
I'm completely stumped trying to figure out where the code is getting bound to the click handler, so I would like to know if it is possible to enumerate, at run-time, a list of handlers attached to a button.
Update: After reading the answers given below, I changed a line in my page:
<button id="btnSaveAndContinue" class="button" tabindex="290">Save and Continue</button>
to this:
<input type='button' id="btnSaveAndContinue" class="button" tabindex="290" value='Save and Continue' />
This is the default behaviour of a button. If you want to change it, do something like this:
$("button selector").click( function(event) {
event.preventDefault();
});
You have to stop the default behavior for the event with event.preventDefault() within your click handler.
See this