I have the following modal structure containing a form:
<div class="modal fade" id="by-email" role="dialog" >
<div class="modal-dialog">
<div class="modal-header">
<small class="waiting"></small>
</div>
<div class="modal-content">
<form action="/test" method="post" id="form-email">
<button type="button" class="btn btn-default btn-modal" data-dismiss="modal">Cacenl</button>
<input type="submit" class="btn btn-primary btn-modal btn-send" value="Send">
</form>
</div>
</div>
</div>
Also, I am using jQuery to show a "loading gif" once the user submit the form via submit button:
$('.btn-send').on('click', function(e){
/* with this line, I pretend to disable both buttons in order to
prevent the user click them while the form is submitted */
$('.btn-modal').attr('disabled', "disabled");
/* show the gift image */
$('.waiting').fadeIn('fast');
});
In most browsers it works cool. However in iPad the form is never submitted. According to my debug session this is happening in iPad:
Submit button clicked
Buttons disabled
Loading image showed
Strangely I can make it works in iPad if I remove the line $('.btn-modal').attr('disabled', "disabled");, but as consequence buttons are not disabled neither loading is displayed. So, how can I prevent this error in iPad? Thank you in advance
Let the form submit without changing elements that participate in/trigger the submission process. Disable buttons later:
$('.btn-send').on('click', function(e){
setTimeout(function() {
/* with this line, I pretend to disable both buttons in order to
prevent the user click them while the form is submitted */
$('.btn-modal').attr('disabled', "disabled");
/* show the gift image */
$('.waiting').fadeIn('fast');
}, 1);
});
The default action of submit button click is to submit the form. In jQuery, you can use event.preventDefault() or return false; from event handler to prevent the default action from happening.
The default action for the event will not be triggered
http://api.jquery.com/event.preventdefault/
Your code should look like this
$('.btn-send').on('click', function(e){
e.preventDefault();
$('.waiting').fadeIn('fast');
});
You could submit the form via ajax. On success, you can disable the button. An example would be:
$('.btn-send').on('click', function(e){
$.ajax({
url: /test,
type:'POST',
data: { 'foo': foo},
success: function(data) {
$('.btn-modal').attr('disabled', "disabled");
/* show the gift image */
$('.waiting').fadeIn('fast');
}
)};
});
You'll probably need to edit this a little but this is the gist.
Related
I am presenting terms and conditions modal to the user before registration but I am having an issue submitting the form. I think it might be because the submit button is outside of the form?
HTML
<form method="POST" id="registerUser" autocomplete="signupForm-noFill" action={{url("/register")}}>
...
<button type="submit" id="registerButton" role="button" class="btn btn-hp-modal btn-signup">Sign up</button>
</form>
Modal (outside the form above)
....
<button type="submit" id="acceptTerms" class="btn btn-hp-modal underline btn-signup-modal">I Accept</button>
JavaScript
$('#registerButton').click(function() {
$("#legalModal").modal("show");
return false;
});
$(document).ready(function () {
$("#acceptTerms").click(function () {
$("#registerUser").submit();
});
});
What happens when I try to submit the form is refreshing the page and adding a ? to the end of the url: /signup?. If I try submitting it without the modal then it works fine.
Your button is type submit, so it will send data of the form, as the parent form tag tells him, and won't considere your click function since it change the page.
You need to prevent the natural behaviour of a submit button.
The way to do this is preventDefault:
$("#acceptTerms").click(function (event) {
event.preventDefault(); //prevent from natural behaviour
$("#registerUser").submit();
});
I have beginner question about submit behavior. Every time I press submit my loginModal keep coming back up, is this expected behavior? Its like the ready() function is fired again. I would like my initiate App() function to be executed after submit
Here is bits of my code:
//Show loginModal on page ready
$(document).ready(function(){
$('#loginModal').modal('show');
});
//loginModal submit
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>`enter code here`
</div>
//When submit button is clicked
$('#loginModal').submit(function() {}
initiateApp()
});
You need to prevent the default behviour of the submit button i.e. to refresh the page. Use event.preventDefault()
$('#loginModal').submit(function(event) {
event.preventDefault();
initiateApp()
}
);
Since you chose to use an input type of Submit, once you click the button it will trigger an auto post-back to my knowledge and refresh the page. Try using:
<button>
OR
<input type='button'>
This will stop the page from refreshing. Give it a shot!
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 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>
I have a form with different multiple submit buttons that perform separate actions.
One of these buttons is part of a bootstrap modal that adds a quantity field. When I press this button I would like it to add the value of the quantity field as a url parameter. For example a user enters 25 in the quantity text field and clicks submit, they should POST the form data to the page www.example.com/folder/?quantity=25.
Unfortunately I am a complete novice to javascript and jquery, so I tried to modify an answer to someone else's question on how to change a form's action to work on my button.
Right now my modal and submit button are working, but the button's formaction is not being changed. I have also tried changing the form's action using the script below and removing the action from the button, but with no success.
Any assistance would be much appreciated. Additionally, I do not care about not supporting older browsers. If just firefox and chrome support it, that is good enough for me.
<div class="modal fade bs-order-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<input type='text' name='quantity' id="quatity">
<li><button name='btn-add' id='btn-add' type="submit" form="id-details" formaction="/inventory/order/" class="btn btn-info">Add to Order List</button></li>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/docs.min.js"></script>
<script>
$(function() {
$('#btn-add').submit(function(){
var quantity = $('#quantity').val();
$(this).attr('formaction', "/inventory/order/?quantity=" + quatity);
});
});
</script>
Issue is the button doesn't have a submit event - the form does. What you want to do is modify the click event of the button instead. Also for safety I prefer to use $(document).ready() when attaching the event:
$(document).ready(
function () {
$('#btn-add').on('click', function () {
var quantity = $('#quatity').val(); // Your ID on the "quantity" input is missing an "n"
$(this).attr('formaction', "/inventory/order/?quantity=?quantity=" + quantity);
});
});
Finally, you may want to add some basic validation to make sure the value in the textbox isn't empty or alphanumeric.