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?
Related
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.
I have created a form using html5 form validation for my website. However, validation part works only if I dont add onclick=somefunction() in submit button. If I add onclick event, it skips the validation part and directly executes the onclick() event. Here is the code for submit button..How to ensure both validation part, as well as onclick event, executes?
<button type="submit" class="signupbtn" onclick="clickAlert()">Request for
Registration</button>
function clickAlert() {
alert("You will get a call to verify your Registration soon!");
}
This has nothing to do with the onclick event. It is caused by the alert.
You are pulling the focus away from the form which causes the browser generated error message to be removed at the instant it would normally be displayed.
Don't use alert(). Instead, modify the DOM of the page to display the message there.
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">
about click and submit
example below:
<form action="url" method="post">
<input type="text" id="input1"/>
<input type="submit" value="submit" onclick="testFun()"/>
</form>
if it is possible that function testFun run after the form's submit when we click the button to submit
if the answser is no.
why? how does the browser work when click the submit button?? the order is click function-> submit ? is right??
No you cannot execute a function after the form has been submitted - the order of which things are executed is as follows :
User clicks the submit button
The onclick function is executed
The browser submits the page to the url specified in the action of the form
You can prevent the browser submitting the page by returning false from the onclick handler :
function myfunc() {
// do some stuff
return false;
}
the submit button should then be modified like this :
<input type="submit" onclick="return myfunc()"/>
If you do wish to execute a function after the form has been submitted you need to submit the form using AJAX - this doesnt cause the browser to navigate away from the page and a JavaScript function can be executed after the form has been submitted
This is not possible because the form's action would redirect the browser to that URL.
1 option would be to run testFun() on your action url page, but this might not be possible depending on what the function does.
If you are to post more information about what you are actually trying to do here, then it might help.
No, but testFun might (in turn) call another, asynchronous, function that wouldn't run until the form had submitted (at which point it wouldn't run at all since the browser would have left the page).
No it is not possible, after submit you are out of the scope from the current page. But if you are using an iframe for your form submit and call the function on the parent page, then I thought it will work.
The anwswer is "It is not possible"
Why
Because once the browser triggers the submit event all user interaction with page is stopped. After the submit event is triggered the communication is between your browser and the webserver. This is how broswers are designed.
In your case Form submission happens because you have a form in your page and in that form you have an input of type=button. If you dont want to submit the page you can change the type of the input to button.
Check this fiddle http://jsfiddle.net/kiranvj/MBxNs/1/
I have a form where I've specified onSubmit="validate()", but I want to ignore the validation if the submit-button was clicked. Is there a good cross-browser way of detecting if the submit button was clicked and thus ignoring the validation?
Why don't you use a button instead of a submit, and set it's action on the click of the button? That way you can control if you want to validate, submit, or whatever else you like.
The submit event only fires if the form is submitted by the user; not if it is submitted via JS.
Therefore:
<input type="submit" onclick="this.form.submit(); return false;">
If JS is not available, this acts like a normal submit button … and the onsubmit still fails to fire as it also requires JS.
(Attaching events using JS instead of intrinsic event attributes is, as usual, preferred by excluded from this example for the sake of clarity)
you can try to use a <input type="button"... with an onClick that submits the form - a javascript .submit() doesn't fire the onSubmit-function of the form.
Did you try this?
<input type="submit" onclick="void(window.validate=function(){return true;})" value="Submit" />
Just return false, or preventDefault from your submit button handler