Disable button and send POST request - javascript

I've got a form that works slowly and I want to disable its submit button after clicking. I've done something like this: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_pushbutton_disabled2 . But now my button can not send POST request. What do?
The code:
<form id="command" action="/smsc/userRole/sms/sendMassSMS" method="POST">
<a href="/smsc/userRole/sms/mass" class="btn btn-danger btn-sm">Нет,
отмена</a>  
<input type="submit" class="btn btn-success btn-sm"
value="Да, отправляем" onclick="myFunction()" id="send">
</form>
<script>
function myFunction() {
document.getElementById("send").disabled = true;
}
</script>

Replace your myFunction() code with below
function myFunction() {
document.getElementById("send").disabled = true;
document.getElementById("command").submit();
}

Related

Required attribute not working using javascript submit

I make some form different action within different button
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add');?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print');?>')">Print</button>
Javascript
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
}
Then, my required attribute not working. Did I do something wrong? Let me know if there is other solution.
Thanks,
I can't give you a good explanation but you need the submit buttons inside the form.
So if you would have a button like:
<input type="submit" value="Submit">,
it will trigger the required attribute.
#Remn If you would still stay on your structure with submit inside a function you could trigger yourself the validation like:
if ($("form")[0].checkValidity())
{
$("form").submit()
}
and then do something with inputs that are invalid by passing through each required element ( input is set in code ):
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
In the below case the invalid inputs will be focused one by one.
The whole code is:
$( function () {
$("body").on("click", "#trigger", function() {
if ($("form")[0].checkValidity())
{
$("form").submit()
}
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
});
});
Where #trigger is an id I set on the button to submit, you can make your own functions to achieve your goal I just used on().
I hope it helps!
Please try bellow code. i hope solve your problem.
<html>
<head>
<title>Submit</title>
<script type="text/javascript" language="javascript">
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
//alert(document.getElementById('form').action);
}
</script>
</head>
<body>
<form id="form" method="get" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required="required">
<button type="submit" class="btn btn-primary" onclick="return submitForm('<?php echo base_url('order/add');?>');" id="submit">Submit</button>
<button type="submit" class="btn btn-warning" onclick="return submitForm('<?php echo base_url('order/print');?>');" id="print">Print</button>
</form>
</body>
</html>
I have test your code by adding Javascript part in Script tag it is working fine. And i tested it on Chrome Windows 10.
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add'); ?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print'); ?>')">Print</button>
<script>
function submitForm(action) {
document.getElementById('form').action = action;
document.getElementById('form').submit();
}
</script>
Using javascript's form.submit() function will cause input validation to be bypassed (according to the HTML specification in point 4 of the form submission algorithm). The only way to trigger HTML input validation is to use a click event on a submit button inside the form, either by the user actually clicking, or in javascript with something like form.querySelector('input[type="submit"]').click().

Javascript: Confirm alert message works if i press ESC button

I'm working with confirmation messages to deleting elements of my form, but when I press ESC button on my keyboard, it works like I pressing "Accept" button on the popup message, is there any function that not permits that? or I'm using it wrongly?
<button class="btn btn-danger btn-remove-e" onclick="return confirm('Are you sure to delete?')" data-tooltip="Delete element"><b>X</b>
</button>
This should works
<button type='button' class="btn btn-danger btn-remove-e" onclick="if (confirm('Are you sure to delete?')) { document.getElementById('myform').submit(); }" data-tooltip="Delete element"><b>X</b></button>
Just prevent submitting the form by attaching a onsubmit Event handler; this works also with links:
<!-- with a form -->
<form method="get" action="." onsubmit="return confirm('Are you sure to delete?')">
<button class="btn btn-danger btn-remove-e" data-tooltip="Delete element"><b>X</b></button>
</form>
<!-- with a link -->
Delete
You can do it with event argument, and if the confirm is false (which is also while pressing ESC button), call preventDefault method on the event argument:
<script>
function ask(e) {
if(!confirm('Are you sure to delete?')) {
e.preventDefault();
return false;
}
}
</script>
<form method="get" action="#" onsubmit="alert('submit')">
<button class="btn btn-danger btn-remove-e" data-tooltip="Delete element"
onclick="ask(event)">
<b>X</b>
</button>
</form>

Form doesn’t submit

I’ve a form like this with my Javascript code:
var btnSubmit = document.getElementById("submit");
btnSubmit.addEventListener("click", sending);
function sending() {
btnSubmit.disabled = true;
btnSubmit.value = "Sending...";
btnSubmit.form.submit(); //<----- this doesn't do anything!!!
}
<form id="form_save" action="/ValidatePicsServlet" method="post">
<!-- more inputs -->
<button id="submit" type="button">Save changes</button>
</form>
As you can see, the last line doesn’t do anything, and the data is not submitted.
Where am I wrong?
EDIT: I'm so so sorry! I had a mistake copying the code. The eventListener actually called sending function, that was right. I'm embarrased...
This is because form.submit is override by the submit element you've created inside the form.
Just change the id of your button and it's work like a charm.
var btnSubmit = document.getElementById("submit-button");
btnSubmit.addEventListener("click", sending);
function sending() {
btnSubmit.disabled = true;
btnSubmit.value = "Sending...";
btnSubmit.form.submit();
}
<form id="form_save" action="/ValidatePicsServlet" method="post">
<!-- more inputs -->
<button id="submit-button" type="button">Save changes</button>
</form>
Try adding the 'submit' type to your form button.
<input type="submit" id="submit" value="Submit">

Checkbox is checked show button

I want to show a Next button once my checkbox is checked. Below is my jquery code for the checkbox. Once the checkbox is checked the Next button should shows up and the Submit button should hide. If the checkbox is not checked, only the Submit button will be shown. I have created the code accordingly but i dont know why the program is not running as it should.
<input type="checkbox" name="checkrecc" ><label>Check this</label>
<script type="text/javascript">
$(document).ready(function() {
var $submit = $("#indrecc").hide(),
$cbs = $('input[name="checkrecc"]').click(function() {
$submit.toggle( $cbs.is(":checked") );
});
});
</script>
<br>
<input type="nextstep" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">
<input type="submit" name="indsubmit" value="Submit" class="btn btn-info btn-block" style="margin-bottom: 5px;">
And the problem with your HTML is type="nextstep", there is no such input type. HTML assign default text type to it.
<input type="nextstep" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">
//^ type="button"
Change it to :
<input type="button" id="indrecc" value="Next" class="btn btn-info btn-block" style="margin-bottom:5px;">
You need to toggle submit button along with the next element.
This should work for you.
$(document).ready(function () {
var $submit = $("#indrecc").hide(),
$cbs = $('input[name="checkrecc"]').click(function () {
$submit.toggle($cbs.is(":checked"));
$('[name=indsubmit]').toggle(!$cbs.is(":checked"));
});
});
DEMO

Window.confirm and html form

I have this form
<form name="frm" action="users.jsp/manage-users?status=delete&index=1" method="POST">
<button value="delete" name="btn" onclick="if(window.confirm('Delete user?\nWARNING! THIS IS ACTION CANNOT BE UNDONE!'))
{document.frm.submit();}">
Delete
</button>
</form>
and when I press cancel, it still submits. What am I doing wrong?
You'll need to return false;
<form name="frm" action="users.jsp/manage-users?status=delete&index=1" method="POST">
<button value="delete" name="btn" onclick="if(window.confirm('Delete user?\nWARNING! THIS IS ACTION CANNOT BE UNDONE!'))
{document.frm.submit();}else{return false;}">
Delete
</button>
</form>
When you return false;, the form will not submit, so clicking Cancel will make the form not to submit, while clicking Ok will submit it
Demo: http://jsfiddle.net/qXJWL/
Try else { return false; }
<form name="frm" action="users.jsp/manage-users?status=delete&index=1" method="POST">
<button value="delete" name="btn" onclick="if(window.confirm('Delete user?\nWARNING! THIS IS ACTION CANNOT BE UNDONE!'))
{document.frm.submit();} else { return false; }">Delete</button>
</form>
For good practice, make the script seperate from html, use return false when press cancel and use return with formSubmit(), something like
JAVASCRIPT
function formSubmit(){
if(window.confirm('Delete user?\nWARNING! THIS IS ACTION CANNOT BE UNDONE!')){
document.frm.submit();
}else{
return false;
}
}
HTML
<form name="frm" action="users.jsp/manage-users?status=delete&index=1" method="POST">
<button value="delete" name="btn" onclick="return formSubmit()" id="myButton">
Delete
</button>
</form>
DEMO

Categories