We Keep Coding

How to disable submit button of form on page loads?

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");

Getting a confirmation popup box with checkbox/submit setup

I have a link/popup working with a confirmation box. But now need to migrate it to a checkbox and submit button. I need some assistance with getting the JQuery to work with the form. Any ideas?
https://jsfiddle.net/829mf5qx/2/
<!-- Used with JQuery function below -->
Confirm order?
<!-- Need to edit the Jquery below to work with this code block -->
<div style="margin-top:20px;">
<form name="orderReceived" action="" method="post" onsubmit="return confirm_update();">
<input type='checkbox' name='files' id='1' value='1' /> Confirm order?
<br>
<input type="submit" value="Submit" name="submit">
</form>
</div>
$(document).ready(function() {
$('a[data-confirm]').click(function(ev) {
var href = $(this).attr('href');
if (!$('#dataConfirmModal').length) {
$('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
}
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmOK').attr('href', href);
$('#dataConfirmModal').modal({show:true});
return false;
});
});

Here is your solution: jsfiddle
$(function(){
$('#submit').click(function(){
if($("#checkbox").is(':checked')){
if(confirm('Are you sure you want to confirm the order?')){
$('#submitHelper').click();
}
}
});
});

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>

Disable button and send POST request

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();
}

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