How to disable submit button of form on page loads? - javascript

I want to disable submit button when page loads and after finishing the loading of page it becomes active can anyone help me how to do that
<form>
Firstname:
<input type="text">
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Disable the button in HTML and give it an ID - this is assuming you do not need to support browsers with JavaScript disabled.
<form>
Firstname:
<input type="text">
<button id="subbut" type="submit" class="btn btn-primary" disabled>Submit</button>
</form>
Then you can do
jQuery:
$(function() {
$("#subbut").attr("disabled",false); // or removeAttr("disabled")
});
Plain JS
window.addEventListener("load", function() {
document.getElementById("subbut").disabled=false; // or removeAttribute("disabled")
})

Try this once
<form>
Firstname:
<input type="text">
<button type="submit" class="btn btn-primary" disabled>Submit</button>
</form>
<script>
$(document).ready(function(){
$('button').attr('disabled',false);
});
</script>

<form>
Firstname:
<input type="text">
<button type="submit" class="btn btn-primary" disabled="disabled">Submit</button>
</form>
and then in jQuery
<script type="text/javascript">
$(function() {
$('button').attr('disabled',false);
});
</script>

Add disabled="disabled" attribute to your button and this script:
<button type="submit" class="btn btn-primary" disabled="disabled">Submit</button>
<script type="text/javascript">
$(document).ready(function() {
$('button').removeAttr('disabled');
});
</script>
After the page is loaded the ready event will be fired and the disabled button becomes available.

Set your button as disabled
<button id="myButton" type="button" disabled>Click Me!</button>
and on document ready, enable it using below code:
$( document ).ready(function() {
$('#myButton').prop('disabled', false);
});

Step 1:
Inside init method in c#, you can disable the button by applying css dynamically.
controlname.attributes.add("disabled","disable");
Step 2:
Inside pageload, at the end of method, you can enable the button again by applying css dynamically.
controlname.attributes.add("disabled","enable");

Related

How to change the value of submit button after click using JavaScript or jQuery?

I have dynamic page that fetch the data from database when clicked on submit button. I want to change the value of submit button when its clicked.
Show Data------> Refresh
<button type="submit" name="submit" value="submit" class="btn btn-success" id="showdata">Show Data</button>
when i clicked on this button once then it will its will hide and show
<button type="submit" name="submit" value="submit" class="btn btn-success" id="showdata">Refresh</button>
Try this JSfiddle
$(document).ready(function() {
$("button").click(function() {
$(this).text( ($(this).text() == 'Show Data' ? 'Refresh' : 'Show Data') )
})
})
This is what you can do:
$("#showdata").click(function() {
$(this).text("Refresh");
});
Here is the JSFiddle demo
onclick event you can change the html text
<button type="submit" name="submit" value="submit" class="btn btn-success" id="showdata" onclick="changeHtml(this)">Show Data</button>
<script>
function changeHtml(id) {
id.innerHTML = "Refresh!";
}
</script>
OR
Via jquery
<button type="submit" name="submit" value="submit" class="btn btn-success" id="showdata">Show Data</button>
<script>
$( "#showdata" ).click(function() {
$("#showdata").html('Refresh');
});
</script>
Don't call that value because it has value already , just say text or innerHTML .
<script type="text/javascript">
document.getElementById("showdata").onclick = function () {
this.innerHTML = "Refresh";
}
</script>

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().

jQuery button click not submitting button value

I'm having some trouble getting the following code to work. I have a form that has several buttons on it. The first button has a class of ButtonAdditionalDelete. When it is clicked, it should then inspect the object for a data tag and then set the value of the tag to a hidden variable. Finally, it should then click the button with the id of saveAnswerButton.
However, when the form is submitted back to the server, the action variable from the button is not present. Any ideas?
<form action="/Area/Controller/Action/id?otherField=value" method="post">
#Html.HiddenFor(model => Model.SelectedSequenceNumber)
<button class="ButtonAdditionalDelete" data-sequence-number="1">Delete</button>
<button name="action" value="AnswerEdit" id="saveButton">Save</button>
<button name="action" value="AnswerEditAndAdd">Save and Add New</button>
<button name="action" value="AnswerEditAndReturn">Save and Return</button>
</form>
<script type="text/javascript">
$(".ButtonAdditionalDelete").on("click", function () {
var sequenceNumber = $(this).data("sequenceNumber");
$("#SelectedSequenceNumber").val(sequenceNumber);
$("#saveButton").click();
});
</script>
Shouldn't
$("#saveButton").click();
supposed to be
$("#saveAnswerButton").click();
that's a security measure. the name and value of a button will only be sent if it's a human click.
you'll have to keep a hidden input called action, then change it's value just before simulating the form submit:
<form method="post">
<input id="hiddenAction" name="action" type="hidden" value="">
<button class="ButtonAdditionalDelete" data-sequence-number="1">Delete</button>
<button name="action" value="AnswerEdit" id="saveAnswerButton">Save</button>
<button name="action" value="AnswerEditAndAdd">Save and Add New</button>
<button name="action" value="AnswerEditAndReturn">Save and Return</button>
</form>
<script type="text/javascript">
$(".ButtonAdditionalDelete").on("click", function () {
var sequenceNumber = $(this).data("sequenceNumber");
$("#SelectedSequenceNumber").val(sequenceNumber);
$("#hiddenAction").val($("#saveAnswerButton").val());
$("#saveAnswerButton").click();
});
</script>
Well, you are using sequenceNumber but your attribute is called sequence-number.

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

Make button inactive only when clicked on other button

I've the following situation:
I have a "next" step button:
<a href="/NL/checkout/selectshippingaddress?addressId=" class="customNextStep">
<input type="button" class="button-1 shipping-adress-next-step-button" value="Next" name="nextstep">
</a>
This buttons should be inactive in first place. It should only be clickable when a user clicks on a other button:
<input type="button" onclick="" class="button-1 select-shipping-address-button" data-itemid="197" value="Send to this address">
I hope someone can help me out with this issue.
You can use attr() and removeAttr() of jQuery
$("input[name='nextstep']").attr('disabled','disabled');
$('.button-1').on('click',function(e){
e.preventDefault();
$("input[name='nextstep']").removeAttr('disabled');
});
Fiddle example
use the following in your code:
<input type="button" id="bt1" value="button 1" />
<input type="button" id="bt2" value="button 2" disabled="disabled" />
now apply any logic you want, like
$(function(){
$("#bt1").click(function(){
$(this).attr("disabled", "disabled");
$("#bt2").removeAttr("disabled");
});
Make use of disabled attribute of button. Like,
<input type="button" onclick="document.getElementById('next_button').disabled=false;" class="button-1 select-shipping-address-button" data-itemid="197" value="Send to this address">
<input type="button" class="button-1 shipping-adress-next-step-button" value="Next" name="nextstep" disabled='true' id='next_button'>
working fiddle here
Use following :
jQuery('input[name=nextstep]').attr('disabled','disabled')
$('.select-shipping-address-button').on('click',function(e){
jQuery('input[name=nextstep]').removeAttr('disabled')
})
Here is the working demo
You can use disabled attribute to switch on and off a button.
//on document.ready, disable your second button
$(selector).prop("disabled", true);
// on the click on first button enable it again
$(selector_first_button).click(function() {
$(selector).prop("disabled", false);
});

Categories