I have this form to manage an article. In 'action', I select article and choose either approve, archive, or delete. from the select box. Then I click the accept button.
HTML:
<form action="#" method="POST">
<select class="form-control contentgroup input-sm" name="action" id="action">
<option value=""></option>
<option value="addtoarchive">Archive</option>
<option value="removefromarchive">approve</option>
<option value="delete">Delete</option>
</select>
<br>
<input type="checkbox" name="selectedposts[]" class="check" value="240" />Article 1
<br>
<input type="checkbox" name="selectedposts[]" class="check" value="241" />Article 2
<br>
<input type="checkbox" name="selectedposts[]" class="check" value="242" />Article 3
<br>
<input type="checkbox" name="selectedposts[]" class="check" value="243" />Article 4
<br>
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>
<div id="confirm" class="modal hide fade">
<div class="modal-body">Are you sure?</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
I've added a bootstrap confirm modal bootstrap like this :
$('button[name="remove_levels"]').on('click', function (e) {
var $form = $(this).closest('form');
e.preventDefault();
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.one('click', '#delete', function (e) {
$form.trigger('submit');
});
});
This worked for the accept button, but Only after I choose delete and select an article from the list, I need to show the confirm modal box.
How can I create this behaviour using jQuery and a bootstrap modal box?
JSFIDDLE DEMO
What you need to do is listen for the select change event.
You could try something like this
$('select[name="action"]').on('change', function (e) {
var $form = $(this).closest('form');
var checked = $( "input:checked" ).length;
e.preventDefault();
if($(this).val()==="delete" && checked) {
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.one('click', '#delete', function (e) {
$form.trigger('submit');
});
}
});
Here is a link to a jsfiddle
http://jsfiddle.net/dh0g6cge/
I think this is what your after by looking at the comments.
$('button[name="remove_levels"]').on('click', function (e) {
var $form = $(this).closest('form');
e.preventDefault();
if($("#action").val() == "delete" && $(".check").is(":checked")){
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.one('click', '#delete', function (e) {
$form.trigger('submit');
});
}else{
//Do Something else if a different "select" option is selected or
//a checkbox isnt checked
}
});
The if conditional statement checks to see if the value of the select box is "delete" and that one of the check boxes is checked if both conditions are met then you get the modal dialog and i added the else as i assume you want to do something else if both conditions are not met.
here is a JSFIDDLE showing it in action.
Hope this helps.
Related
I want to disable a dropdown list on page load and enable it on button click event using JQuery. I have tried the below code but its not working. What is happening is it is disabling the list on page load, then enabling the list on button click event for one second and then again disabling the list.
$(document).ready(function () {
debugger;
if (jQuery('#btnViewHistoricData').data('clicked')) {
$("#ddlBranch").prop("disabled", false);
} else {
$("#ddlBranch").prop("disabled", true);
}
});
<div class="text-center">
<button id="btnViewHistoricData" class="btn bg-dark">View Historic Data</button>
</div>
<div class="col-md-3">
<div class="form-group m-r-sm">
<label for='rf_name'>Branch</label>
<select id="ddlBranch" class="m-b-sm w-lg form-control" onchange="ViewHistoricData()">
<option value="ALL" selected="selected">ALL</option>
</select>
</div>
When you click the button you will do a form post, causing the document to reload and the dropdownlist to be set to disabled.
So make the button of type=button
<button id="btnViewHistoricData" class="btn bg-dark" type="button">View Historic Data</button>
Now when the button is clicked there will be no form post so the DropDownList can be enabled.
<script type="text/javascript">
$(document).ready(function () {
$("#ddlBranch").prop("disabled", "disabled");
$("#btnViewHistoricData").click(function () {
$("#ddlBranch").removeAttr("disabled");
});
});
</script>
Try this code.
$(document).ready(function () {
$("#btnViewHistoricData").click(function(){
$("#ddlBranch").removeAttr("disabled");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
<button id="btnViewHistoricData" class="btn bg-dark">View Historic Data</button>
</div>
<div class="col-md-3">
<div class="form-group m-r-sm">
<label for='rf_name'>Branch</label>
<select id="ddlBranch" class="m-b-sm w-lg form-control" onchange="ViewHistoricData()" disabled="disabled">
<option value="ALL" selected="selected">ALL</option>
</select>
</div>
$(document).ready(function () {
debugger;
if (jQuery('#btnViewHistoricData').on('clicked')) { // Use `on` instead
$("#ddlBranch").prop("disabled", false);
} else {
$("#ddlBranch").removeAttr("disabled");
}
});
I have a button and checkbox(terms of use) in my page.
The button should be disabled if the checkbox is not checked.
I want to reset the situation in every load. (first load or using back btn or etc) the reset state is: checkbox shouldn't be checked, and btn is disabled.
But the function is called just when I click the checkbox, and not at load time.
Update: Also I tested .trigger('change'), too. It did't work too
$(function() {
$('#termsOfUse').removeAttr('checked');
$('#termsOfUse').change();
$('#termsOfUse').change(function() {
if ($(this).is(":checked")) {
$('#createBtn').prop('disabled', false);
} else {
$('#createBtn').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<input id="termsOfUse" type="checkbox" />
<label for="termsOfUse" style="display: inline;">
<span>rules</span> I am agree with</label>
</div>
<div class="create">
<input id="createBtn" type="button" value="create" class="btn btn-default btn-success"
onclick="location.href = '#Url.Action("Create","NewOne ")'" />
</div>
You are calling the .change before you assign.
$(function() {
$('#termsOfUse').prop('checked',false);
$('#termsOfUse').change(function() {
$('#createBtn').prop('disabled', !this.checked);
}).change(); // execute at load
});
You can also put
<script>
$('#termsOfUse').prop('checked',false);
$('#termsOfUse').change(function() {
$('#createBtn').prop('disabled', !this.checked);
}).change(); // execute at load
</script>
</body>
at the end of your document
I want to make a form where if someone type the word ok in the input field, the button will be auto clicked. How can this be done?
<input type="text" id="text"><br><br>
<input id="autoclick" type="button" value="type ok">
Try this:
HTML:
<input type="text" id="text"><br><br>
<input type="button" id="button" value="type ok">
jQuery:
$('#text').on('keyup', function(){
if($(this).val() == 'ok'){
$('#button').trigger('click');
}
})
// this block is for test
$('#button').on('click', function() {
alert('clicked');
});
Working example: https://jsfiddle.net/fnoL4j7m/1
You need to apply keyup event on the input box.
Every time something is entered, it will check if the input is "ok".
If so, a click event is triggered on the button.
$("#text").on('keyup', function(){
if ($(this).val() == 'ok') {
$('input[type="button"]').trigger('click');
}
});
Refer to this: https://jsfiddle.net/dts2aa5o/10/
Try this code:
<input type="text" id="text"><br><br>
<a href="#" id="autoclick">
<input type="button" id="button" value="type ok">
</a>
Jquery:
$('#text').keyup(function(){
if($(this).val()=='ok')
{
$( '#button' ).trigger( "click" );
}
});
you can do something like this :
$('#text').on('keyup', function(){
if($(this).val() == 'ok'){
$('#button').click()
}
})
How can i change behaviour of button if form submit was successful?
<form method="post" enctype="multipart/form-data" style="margin: 0;" id="frmGenerate">
<div class="clearfix">
<div class="input-group">
<input type="text" placeholder="Customer Name:" name="CustomerName">
<input type="text" placeholder="Generated Url:" name="CustomerUrl" readonly="readonly" />
</div>
</div>
<div class="clearfix">
<div class="input-group">
<button type="submit" class="btn">Generate</button>
</div>
</div>
</form>
And here is my JS code:
$('#frmGenerate').submit(function(e) {
var clientName = $(this).find('input[name="CustomerName"]').val();
$.ajax(
{
url: '#Url.Action("GenerateToken","Admin")',
type: 'GET',
data: { customerName: clientName },
success: function(response) {
if (response.result) {
$('#frmGenerate').find('input[name="CustomerUrl"]').val(response.message).select();
$('#frmGenerate').find('button.btn').text('Close');
} else {
alert(response.message);
}
}
});
e.preventDefault();
});
This is modal windows, which i open to generate token. When it's generated successful then i set generated token in modal input and change text of button to close, but i don't know how to change button's behaviour.
Better approach would be not to change existing button, but hide it and show another.
HTML:
<div class="clearfix">
<div class="input-group">
<button type="submit" class="btn">Generate</button>
<button type="button" class="btn btn-close hide">Close</button>
</div>
</div>
JS:
$('#frmGenerate').find('.btn').hide();
$('#frmGenerate').find('.btn-close').show();
Depends on what type of button you are using. Button must be used like: <button></button> Not like <button/>
And then use:
$(".btn").html('Close');
you can change attribute of button
$('#frmGenerate').find('button.btn').attr('type', 'button');
and then:
$('#frmGenerate').find('button.btn').on('click', function(){ /*close function */});
I see you have changed the text of your button to 'Close' after the form has been submitted. So the remaining part is the jQuery that handles a click event on the button.
....
$('.btn').click(function(){
var buttonText = $(this).val();
if(buttonText === 'Close'){
//code when close button is clicked
}else if(buttonText === 'Generate'){
//code when Generate button is clicked...
}
});//end button.click function
And I would use input type='button' or button than input type='submit'. Why dont you submit form using ajax as well? much better.
Hope this helps...
i have a jquery for file selection
http://jsfiddle.net/parvathy/e8wr5/
please look the fiddle. when i am clicking on the text box, that jquery is worked .. but when clicking on the "browse" button that is not worked.i am using boot strap css for button and input text please help me..
<input type="text" name="fake_section" id="fake_section" class="form-control" style="float:left;">
<button type="button" id="fake_section" class="btn btn-primary" ">Browse</button>
$(document).ready(function () {
$('#fake_section').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});
$('#file').change(function (e) {
var filename = $(this).val();
var ext = filename.split('.').pop().toLowerCase();
if ($.inArray(ext, ['xls', 'xlsx']) == -1) {
alert('Only add Excel Files!');
}
else {
$('input[name="fake_section"]').val(filename);
}
});
});
Because you have 2 elements with the id fake_section, use class instead - when you use an id selector it selects the first element with the given id
<input type="text" name="fake_section" class="fake_section form-control" style="float:left;">
<button type="button" class="fake_section btn btn-primary" style="margin-left:10px;">Browse-</button>
then
$('.fake_section').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});
Demo: Fiddle
Be attention on the ids, your mistake were the same id in two controls. Some IDEs help you with a warning when you have many controls with the same Ids.
<input type="text" name="fake_section" id="fake_section2" class="form-control" style="float:left;">
<button type="button" id="fake_section1" class="btn btn-primary" ">Browse</button>
$(document).ready(function () {
$('#fake_section1').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});