Sorry but I'm quite a noob if it comes to Javascript with HTML.
I'm trying to make a button that will change the value of it when a multiple checkboxes are checked.
Example:
If one checkbox is checked = Button: Delete 1 row
If two checkboxes are checked = Button: Delete 2 rows
etc.
And I want this to happen automaticly when I check all checkboxes. The only problem is that it won't change anything.
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('input[type="checkbox"]').click( function() {
$("input[type=submit]").val("Delete "+$('input:checkbox:checked').length+" rows");
});
</script>
HTML:
<input type="submit" name="submit" class="btn btn-success" value="Verwijder" />
The server-side of this(PHP) does work(deleting the rows).
Thank you for helping and your time!
First you must put your code inside this block:
$(document).ready(function(){
// your code
});
We use this because:
The document.ready handler is triggered when the DOM has been loaded
by the browser and ready to be manipulated.
Second:
<input type="submit" name="submit" class="btn js-button btn-success" value="Verwijder" />
$(".js-button").val("Value that you need");
Try this.
Fiddle Demo
HTML
<input type="submit" name="submit" class="btn btn-success" value="Verwijder" />
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
JS Code
$('input[type="checkbox"]').on('change', function(){
var rows = $('input[type="checkbox"]:checked').length,
value = rows < 1 ? 'Verwijder' : 'Delete '+rows+(rows<2 ? ' row':' rows');
$('.btn').attr('value', value);
});
Related
I am trying to get respective values of dynamically generated inputs. In other words, I have an X number of dynamically generated inputs; each of these inputs is bound to a button. With that being said, I would like the user to get alerted the dynamically generated input that is bound to the clicked button. What I have done so far does not sort this out and whatever button is clicked, only the first input's value is generated.
I have the following code - a dynamic input and a button:
<input type="hidden" id="job_id" name="jobIdName" value="{{ job_id }}"> // please note this input is dynamically generated....
<button name="get_id_name" class="get_id_class" id="get_id_id" >Show Id</button>
As for Jquery, I have done the following:
$('#get_id_id').each(function(index) {
$(this).click(function() {
var job_ids = $("[name='jobIdName']");
console.log('Job Ids -------------- : ' + job_ids);
});
});
The above code keeps generating only the first generated input value? Any ideas or suggestions?
I have seen some posts that might seem similar to this one but they are very old; also I am looking for a more modern implementation.
Add your "input tag" into div:
var counter = 0;
$(document).ready(function(){
$("#get_id_id").click(function() {
var divChildren = $(".job_ids").children();
if(counter < divChildren.length){
if(counter == '0'){
console.log($(divChildren).eq(0).val());
}else{
console.log($(divChildren).eq(counter).val());
}
counter++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="job_ids">
<input type="hidden" name="jobIdName" value="Test01">
<input type="hidden" name="jobIdName" value="Test02">
<input type="hidden" name="jobIdName" value="Test03">
<input type="hidden" name="jobIdName" value="Test04">
<input type="hidden" name="jobIdName" value="Test05">
</div>
<button name="get_id_name" class="get_id_class" id="get_id_id" >Show Id</button>
I have been trying to call in a php variable into a jquery submit onclick event in such a way that when a reply is submitted, the id of the comment is captured to be processed by an ajax code.
$(document).ready(function() {
$("#submit").click(function(e) {
var rname = $("#rname").val();
var remail = $("#remail").val();
var rmessage = $("#rmessage").val();
var cid = $("#cid").val();
var post_id = $("#post_id").val();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" name="submit" id="submit'.$commnt_id.'" value="Reply This Comment" class="primary-btn text-uppercase" />
There are so many options to achieve this:
Solution 1 (by using data attribute):
<input type="submit" name="submit" data-commentID="<?=$commnt_id?>" value="Reply This Comment" class="primary-btn text-uppercase myBtnClass"/>
jQuery:
$(document).ready(function(){
$(".myBtnClass").click(function(){
var commentId = $(this).attr('data-commentID');
});
});
Solution 2 (by using onclick event):
<input type="submit" name="submit" onclick="mymethodCall(<?=$commnt_id?>)" value="Reply This Comment" class="primary-btn text-uppercase"/>
JavaScript:
function mymethodCall(commentId){
console.log(commentId);
}
In solution 1, using class name myBtnClass will help you, if you have multiple records.
Running Example:
$(document).ready(function(){
$(".myBtnClass").click(function(){
var commentId = $(this).attr('data-commentID');
alert(commentId);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" name="submit" data-commentID="1" value="Reply This Comment" class="primary-btn text-uppercase myBtnClass"/>
Running Example 2:
function mymethodCall(commentId){
console.log(commentId);
}
<input type="submit" name="submit" onclick="mymethodCall(1)" value="Reply This Comment" class="primary-btn text-uppercase"/>
May can rewrite to
<input type="submit" name="submit" data-comment-id="'.$commnt_id.'"
and in js:
$('[name="submit"]').click(function(e){
console.log($(this).data('comment-id'));
Use this.id
$(document).ready(function(){
$("input[type='submit']").click(function(e){
console.log(this.id);
});
});
Also, when you use $("#submit") you're selecting the elements where the id is equal to submit instead of the elements that have the type equal to submit.
Working JSFiddle: https://jsfiddle.net/nrmwx315/
I'm making reminder app here is the interface
Now when i click the "All Checked" button all the check boxes removes. I'm using remove() function for that but after removing these check boxes the space remains there, and when I'm putting the new value it's coming after that space. I was trying trim function but its not working
MY HTML
<div class="has-success topSpaceFromRoof">
<div class="checkbox">
</div>
</div>
<button class="btn btn-default btn-block slight" id="allFinished">
ALL Checked
</button>
MY JAVASCRIPT
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').trim();
});
MY JAVASCRIPT FOR INPUT VALUES
$('<label><span>' +
'<input type="checkbox" id="checkboxSuccess" value="option1">' +
input.val().toUpperCase() +
'</span></label><br/>').appendTo('.checkbox');
event.preventDefault();
Looks Like This
Try this,
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').html('');
});
Another option you can use by using some CSS like,
.checkbox label{
display:inline-block;
margin:2px 0;
}
And no need to add <br/> after your dynamically added label's.
And some jquery code like,
$('#allFinished').click(function(){
$('.checkbox label').remove();
});
Try
$('#allFinished').click(function(){
$('.checkbox').find('*').remove();
// $('.checkbox').empty();
});
Please try this :
Use .empty(); method
$('#allFinished').click(function(){
$('span').empty();
});
Reference
Demo
This is what you need to code
DEMO
HTML
<input type=text />
<input type=button value=Submit />
<div class="has-success topSpaceFromRoof">
<div class="checkbox">
</div>
</div>
<button class="btn btn-default btn-block slight" id="allFinished">
ALL Checked
</button>
CODE
$(document).ready(function(){
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').empty();
});
$(":button[value=Submit]").click(function(){
var input=$(":text");
$('<label><span>' + '<input type="checkbox" id="checkboxSuccess" value="option1">' + input.val().toUpperCase() + '</span></label><br/>').appendTo('.checkbox');
});
});
Think about your markup first. Try to come up with a structure which allows you identify a whole block of your checkboxes with its label, the input itself and whatever element you want to associate with this checkbox.
Something like this:
<div class="checkbox-wrapper">
<label>
Blablub
<input type="checkbox" value="1" />
</label>
</div>
Now in your click event you could loop through all your checkboxes (elements with your identifiying class checkbox-wrapper) and remove the whole element if its checkbox is checked:
$(document).ready(function(){
$('#allFinished').on("click", function(){
$(".checkbox-wrapper").each(function(){
if($(this).find("input[type=checkbox]").prop("checked")){
$(this).remove();
}
});
});
});
Working Demo: https://jsfiddle.net/n1o3t3nz/1/
I have a text field with a counter next to it. But beneath that is the submit form, and I want it to be inactive (grayed out, unable to submit) unless they have typed 100 characters.
I'm using a jsfiddle which I found on here and adapted to demonstrate what I'm doing:
http://jsfiddle.net/xqyWV/396/
Does not seem to be working exactly right. First of all, it's not grayed initially... but when I begin typing, it then recognizes that there aren't 100 characters and it does disable.
But, my code should re-enable the button if the length is not less than 100, i.e. when it reaches or exceeds 100 characters. However, it does not. What am I doing wrong?
$("#field").keyup(function() {
el = $(this);
$("#charNum").text(el.val().length);
if(el.val().length < 100) {
$('#submit').attr('disabled','true');
} else {
$('#submit').attr('disabled','false');
}
});
You want this in your JS:
$('#submit').removeAttr('disabled');
and this in your HTML:
<input type="submit" name="button" id="submit" value="do some stuff" disabled="disabled" style="float:left;width:160px;height:30px;"/>
Demo: http://jsfiddle.net/xqyWV/398/
To fix your html you just need to add a disabled attribute to your submit button.
<input type="submit" name="button" id="submit" value="do some stuff" style="float:left;width:160px;height:30px;" disabled="disabled" />
In you javascript the main issue is that you are setting the disabled attribute to the string "true" or "false". Change it to a Boolean true and false and you'll be all set.
$("#field").keyup(function(){
el = $(this);
$("#charNum").text(el.val().length);
if(el.val().length > 100){
$('#submit').attr('disabled', false);
} else {
$('#submit').attr('disabled', true);
}
});
JsFiddle: http://jsfiddle.net/xqyWV/400/
For completeness sake here is the same answer without jQuery:
HTML
<input type="submit" name="button" id="submit" value="do some stuff" disabled="disabled" style="float:left;width:160px;height:30px;"/>
JavaScript
document.getElementById('submit').removeAttribute('disabled');
Demo: http://jsbin.com/torug/1/edit
An easier way would just add an onclick:
<input type="submit" name="button" id="submit" value="do some stuff" style="float:left;width:160px;height:30px;"/>
and then in your <script> area, you can do:
document.getElementById('submit').setAttribute('onClick','functionname()');
By doing this you add an onClick so that the button can call a specific function.
By default the page will load it without an onClick. By adding the attribute you can the enable it.
Just add this in your HTML:
disabled="true"
... change it for this
<input type="submit" name="button" id="submit" disabled="true" value="do some stuff" style="float:left;width:160px;height:30px;" />
and add this in your JS:
$('#submit').removeAttr('disabled');
I have TextBox and a Button
first the button is in disabled position
When the user starts typing the text in textbox
the button should be enabled
How can i achieve this using JQuery or Java Script
Seems like you are a newbie to jQuery. I would say you start with jQuery Tutorials and then move on to jQuery Validate. If you prefer books to start with, you can pick up a copy of jQuery in Action.
you can try with this also
<input type='text' id='textbox'>
<input type="button" class="button-disabled" id="change" disabled="disabled" value="click">
$("#textbox").keyup(checkForm).focus(checkForm);
function checkForm()
{
if($("#textbox").val()=='')
{
$("#change").addClass("button-disabled").removeClass("button");
$("#change").attr("disabled","disabled");
}
else
{
$("#change").removeClass("button-disabled").addClass("button");
$("#change").removeAttr("disabled");
}
}
<input type='text' id='textbox'>
<input type="button" id="button'" value="click me">
$('#button').attr('disabled', 'disabled');
$('#textbox').change(function(){$('#button').removeAttr('disabled')} );
<input type="text" id="myText">
<input type="submit" id="myButton" disabled="disable"/>
jQuery(function(){
jQuery('#myText').bind('keypress',function(e){
if((jQuery(e.target).val()+"").length>0)
{
jQuery('#myButton').removeAttr('disabled');
}
else
{
jQuery('#myButton').attr('disabled','disable');
}
});
});
<input type='text' id='thetext' value=''>
<input type='button' disabled='disabled' id='thebutton' value='the button'>
$(document).ready(function(){
$('#thetext').change(function(){
$('#thebutton').removeAttr('disabled');
});
});
Read up on the jQuery API : http://api.jquery.com/
HTML:
<input type='text' id='textbox'>
<input type="button" id="mybutton" value="click me">
JS:
$(document).load(function() {
$('#mybutton').attr('disabled', 'disabled');
}
$('#textbox').change(function() {
$('#mybutton').removeAttr('disabled');
}
Update: regarding the use of jQuery w/ ASP.NET, keep in mind that ASP.NET outputs standard HTML once the page is rendered, so the above code would work similarly, except you need to figure out the ID's of the textboxes generated by ASP.net. See this link for further explanation on this:
http://www.search-this.com/2009/08/06/using-jquery-with-asp-net-controls/