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
Related
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");
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>
I want have have a "Loading. . ." whenever I click on the "Submit" button. In this case, how come it did not display the "Loading. . ." thingy? bootstrap 2.3.2
<input type="submit" data-loading-text="Loading..." disabled="disabled" style="" id="save" class="btn btn-primary " value="Submit" name="save">
Here's my JS:
$('#save').click(function() {
var btn = $(this);
btn.button('loading');
btn.button('reset');
});
I can't find any error in console either. What did I miss?
Try this:
$('#save').click(function() {
var btn = $(this);
btn.val(btn.data("loading-text")); setTimeout(function() {
btn.val('reset');
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" data-loading-text="Loading..." style="" id="save" class="btn btn-primary " value="Submit" name="save">
Here's an example, you need to btn.val('loading...'); because you change the value of your input. Here's a working demo.
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();
}
I am trying to make an interface element where there are three buttons.
Only one or none buttons can be selected. I.e. the buttons are faded out to start with, when the user clicks one it lights up, the other two remain faded.
If the user then clicks another button, any other buttons get faded out and the one the user clicked on highlights. This is not a problem.
The problem comes when I am trying to get a currently highlighted button to go back to a faded state if the user clicks on it, so you are left with no highlighted buttons.
This is where I have got to:
$('.gradeButtons button').click(function() {
if (!$(this).siblings().hasClass('quoteGrading'))
{
$('.gradeButtons button').addClass('quoteGrading')
}
if (!$(this).hasClass('quoteGrading'))
{
$(this).addClass('quoteGrading')
} else {
$(this).removeClass('quoteGrading')
}
})
My HTML:
<div class="control-group gradeButtons">
<button type="button" class="btn btn-danger quoteGrading">H</button>
<button type="button" class="btn btn-warning quoteGrading">W</button>
<button type="button" class="btn btn-info quoteGrading">C</button>
</div>
'quoteGrading' provides the faded out/inactive effect.
How can I make it work properly where only one or none buttons can be highlighted (not have 'quoteGrading' class applied)?
Live Demo
$(function() {
$('.gradeButtons button').on("click",function() {
$(this).siblings().removeClass('quoteGrading');
$(this).toggleClass('quoteGrading');
$("input.inp").hide();
$("#"+this.id+"input").toggle($(this).hasClass("quoteGrading"));
});
});
using
<div class="control-group gradeButtons">
<button type="button" id="H" class="btn btn-danger">H</button>
<button type="button" id="W" class="btn btn-warning">W</button>
<button type="button" id="C" class="btn btn-info">C</button><br />
<input type="text" class="inp" placeholder="H - message" id="Hinput" /><br/>
<input type="text" class="inp" placeholder="W - message" id="Winput" /><br/>
<input type="text" class="inp" placeholder="C - message" id="Cinput" /><br/>
</div>
and
.quoteGrading { color:red }
.inp { display:none }