I have a function "myfunction" applied on a submit button. The function shows a dialog box when the page is submitted and asks user if he is sure to submit the page?
The code of HTML button is:
<h:commandButton id="submit" value="Brewery 1" onclick="myfunction()" styleClass="button1">
<f:actionListener binding="#{loginweb.setNewUsernameAndCreateUser('Brewery1')}"/>
</h:commandButton>
**function myfunction(e)**
{
if(!confirm('Are you sure to proceed with this role?')) {
e.preventDefault();
}
else {
return false;
}
}
But when I press cancel (on appeared dialog box) the page is still submitted. What I am doing wrong? Thanks
It doesn't look like you're passing the click event to myfunction. Try onclick="myfunction(event)".
Related
I am trying to click through this website's login section using Casper. The website uses Angular to validate form responses. When I fill in the "Enter Username" input and click "Login" button, the screenshot that I get shows the "Login" button transform to "Checking" text and remains like that.
Here is my code:
casper.then(function() {
//enter the username
this.evaluate(fillUserName,username);
console.log("username entered")
this.then(function() {
//without this wait function, no click action occurs
this.wait(2000, function() {
console.log("clicking on the login")
this.click('#submit-username')
});
});
});
Like I mentioned in the code, without the wait() no click action even occurs.
Here is the code from the "Login" button that I am trying to click:
<button ng-click="CheckUser(false)" type="submit" class="btn
btn-success" ng-class="{'btn-success':
(Login.ErrorMessage.length == 0), 'btn-danger':
(Login.ErrorMessage.length > 0)}" id="submit-username" data-
loading-text="Checking..." data-vis-is-button-
disabled="EnabledState">Log In</button>
How can I click on the button?
I have a form which does a 'post' to java code, on submit.
The requirement is as follows - On submit an alert box should come with 'ok' button where the user will read the info. and then click 'ok'.
This is just a info dialog, and nothing else.
But the alert box should stay there until he clicks 'ok' button.
I have given jquery submit and also tried form submit . The form is getting refreshed and alert box is going out of screen onsuccessful submit , as the entire form is getting posted and refreshes the screen.
You should use the confirmation box, and prevent the default action if it isn't confirmed. See my comments in the code.
$(function() {
$('form').on('submit', function(e) {
if( !window.confirm('Do you want to send this form') ) { /* ask for confirmation */
e.preventDefault(); /* if not confirmed, stop the default action, else send it */
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" />
<input type="submit" value="Send" />
</form>
I am looking for a button that will submit and then close an overlay window.
The code for my button is:
<button class="purchase btn btn-warning">Select</button>
What am I missing to get the button to close after the selection has been made?
Not clear about your question. It's from assumption. Maybe it can help.
function closeSelf(){
// do something
if(condition satisfied){
alert("conditions satisfied, submiting the form.");
document.forms['certform'].submit();
window.close();
}else{
alert("conditions not satisfied, returning to form");
} }
<input type="button" class="purchase btn btn-warning" value="Select" onclick="closeSelf();"/>
I have an web page that has a submit button. My submit button looks like the following:
<button type="submit" class="btn btn-primary wait-on-click">
<span>Submit</span>
</button>
When a user clicks the submit button, I want to disable the button and let the user know that something is happening. To do that, I have the following JavaScript:
$('.wait-on-click').click(function(e) {
e.preventDefault();
$(this).prop('disabled', true);
$('span', this).text('Please wait...');
});
The button disables. The text is updated. However, the submit does not actually get submitted to the server. If I comment out the body of my JavaScript function, it works fine. I do not understand how to fix this.
Thank you!
I believe your problem is with this line
e.preventDefault();
This is preventing the default behavior of the submit button, i.e., submitting! Therefore, remove it.
Update
After testing, I have found the problem.
I believe your problem is with this line
$(this).prop('disabled', true);
For some reason, this is preventing the form from submitting. Therefore, put it in the submit handler.
$('.wait-on-click').click(function(e) {
$('span', this).text('Please wait...');
});
$('form').on('submit', function() {
$('.wait-on-click').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
<input name="n" />
<button type="submit" class="btn btn-primary wait-on-click">
<span>Submit</span>
</button>
</form>
Suppose a form has multiple submit buttons:
...
<button type="submit" value="deletefoo">Delete Foo</button>
<button type="submit" value="deletebar">Delete Bar</button>
<button type="submit" value="Edit">Edit</button>
...
I am intercepting the clicks for only the 2 delete buttons and disabling the form submit to trigger a custom modal dialog which has OK and CANCEL buttons on it to confirm user choice. If user presses OK, I want to submit the form. If cancel, then dialog dismissed and nothing happens.
I have the first part wired up to trigger the dialog but I am at a loss on how to get the OK button in the dialog to trigger the form submit contingent on which original submit button was pressed (e.g. if Delete button pressed, I want to confirm with user they want to delete, then if so, submit the form as normal.
I've searched around and look at jQuery docs but haven't found the answer yet so I must be missing something really straightforward.
Update: I don't want to use JS confirm function. In my original question above I'm looking to use a custom modal dialog for various reasons.
Check out the JS confirm function and put it as an onclick event.
You have a nice example here.
Why not have them be regular buttons and then onclick set a variable to determine the action type and then when the form submits include this hidden variable and check that to find what you're supposed to do
First, you'd have to intercept both (all) the buttons, you could do this easily by fetching any of the submit buttons within a specific form, then you can ask your question and given you still have the current event handler, you can figure out what button was pressed and do the callback you'd like. For example:
<form id="myform">
<button type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
</form>
--
$(function() {
$("form#myform button[type='submit']").click(function(ev) {
ev.preventDefault();
if (confirm("you sure")) {
var action = $(ev.currentTarget).val();
console.log(action);
}
});
});
JSLint is here: http://jsfiddle.net/r48Cb/
Basically, console.log(action) will output either "delete" or "Edit" based on the original click. How you handle that value is up to you. A switch statement, a simple if block could work, but it's up to you, I don't know the scope of your app.
The window.confirm function returns a true if the user selects okay and a false if the user cancels. Using this logic you could do something like this:
<button id="delete" type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
var question;
$("#delete").click(function(){question=window.confirm("Are you sure?");)
if (question){
//Submit the form here
}
else{
alert("Not deleted!");
}
I think you are making it too complex, you can do something as simple as:
<form >
<input name="foo" value="foo">
<button name="sub0" value="sub0" onclick="
return window.confirm('sure?');
">submit 0</button>
<button name="sub1" value="sub1" onclick="
return window.confirm('sure?');
">submit 1</button>
</form>
If the user clicks OK on the confirm dialog, the form submits from whichever button was pressed. If not, it doesn't.
My 2c:
... (edited: removed the value parameter. buttons don't need that)
<button onclick='deleteFoo(); ' >Delete Foo</button>
<button onclick='deleteBar(); ' >Delete Bar</button>
<button onclick='allowEdit(); ' >Edit</button>
...
function deleteFoo() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-foo');
$('#form-id').submit();
else-just-return
}
function deleteBar() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-bar');
$('#form-id').submit();
else-just-return
}
function allowEdit() {
whatever
}