enter image description here
this is the image, in this, i have a button when I click the button it should show me the updated value of textbox into the alert box. I have coded something like this.
$(document).on('click', '#Button1', function () {
var newStr = document.getElementsByName('input');
var str = '';
for (var i = 0; i < newStr.length; i++)
{
str = str + newStr.item(i).value;
}
alert(str);
});
But things are not working properly. Need help thanxx.
$(document).on('click', '#table1 tr', function () {
var tableData = $(this).children("td").map(function () {
return $(this).text();
}).get();
$(tableData).each(function (index, value) {
$('#txt' + index).val(value);
});
});
this is sending table data to the textbox. I just want to get all the value of textbox into one variable and want to check that value for further process.
you haven't gave your html. but using this you can access all your input type.
$("#formID :input").each(function(){
var input = $(this);
});
or IF u want to access only input type = text
use
$("#formID input[type=text]")
Hope this will help you out
Related
In this example ill have a filter function but it will only search value in the table if i type inside the input text field, so i what i need help on is that i want that this function filters data when the input is changed by code not by a user inserting text inside the input.
<script>
$(document).ready(function(){
$("#txtSearch").on("change", function() {
var value = $(this).val().toLowerCase();
$("#tblSearch tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
This second script will change the value of the txtSearch input to explain how i want the filter option to be working. By a changed input but not when a user type on it.
function selectedRow(){
var index,
table = document.getElementById('taCiclo');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
document.getElementById("id_ciclo").value = this.cells[0].innerHTML;
//i've tried the trigger or eventDispatcher is this part too, but is not working at all.
document.getElementById("id_ciclo").value ;
if(typeof index !== "undefined"){
table.rows[index].classList.toggle("selected");
}
console.log(typeof index);
index = this.rowIndex;
this.classList.toggle("selected");
console.log(typeof index);
};
}
}
selectedRow();
this is how i soved it, thanks for yout help!
var el = document.getElementById("id_ciclo");
el.value=this.cells[0].innerHTML;
el.dispatchEvent(new Event('change'));
You can see the site I am working on here: zelda.wptoolkit.us
Basically, I have a form with checkboxes that lists a bunch of 'ingredients' which are actually WordPress post tags. Users will click the ingredients they want and then it will auto update the 'recipe' posts based on whether the recipes (posts) include these ingredient options (tags).
My question is, how do I store an array of 'checked' boxes, then use this array of post tag slugs to add a class to their corresponding link found in the recipe result card?
Here is a mock up of what I am trying to accomplish:
https://cloudup.com/cNfVNMzePpl
Try this out. I think that's what you're after. Can't really test it but it should work
$(".wpas-checkbox").change(function() {
if(this.checked) {
var val = $(this).val().toLowerCase();
var activeClass = 'active';
$('.myCard a').each(function() {
if(val == $(this).text().toLowerCase()) {
$(this).addClass(activeClass');
}
});
}
});
Problem is that checkbox val not equal a link text for example
value="any-flower" in checkbox but in link text is "Any Flower".
So must select label text of any checkbox:
var label_text = $('---checkboxSelector---').next().html();
and push to your checkedAttr variable
Then in complete function of ajax :
$('.myCard a').each(function() {
var a_text = $(this).text();
for (var i = 0; i < checkedAttr.length; i++) {
if(checkedAttr[i] == a_text ) {
$(this).addClass('activeClass');
}
}
});
Found it! Had to modify Saeeds code, but he is a gentleman and a scholar who I am indebted to now!
<script>
(function($) {
var checkedAttr = [];
$("input.wpas-checkbox[name='tax_post_tag[]']:checked").each(function(){
checkedAttr.push($(this).val().replace(/-/g, " "));
});
console.log(checkedAttr);
$('.myCard a').each(function() {
var a_text = $(this).text().toLowerCase();
for (var i = 0; i < checkedAttr.length; i++) {
if(checkedAttr[i] == a_text ) {
$(this).addClass('activeClass');
}
}
console.log('a_text: ', a_text);
});
})( jQuery );
</script>
I ve got numérous checkboxes in my page, each time I click a checkbox, I get the id im interested in and I fill a hidden form. My script is working but if I unclick the checkbox, it should delete the id from the hidden field (right now it appends again the id in the hidden field). How can I writte such a script ? Here's my code so far:
$(document).ready(function() {
var string = "";
$('.checkbox').on('change', function() {
var subscription_id = $(this).parent().attr('id');
if(string == "") {
string = subscription_id;
} else {
string = string + ", " + subscription_id;
}
$('#select_players').val(string);
$('#subscription_ids_export').val(string);
})
})
You can simplify this by retrieving only the subscription_id values from checkboxes which are checked instead of adding/removing values each time.
Try this:
$('.checkbox').on('change', function() {
var subscriptionIds = $('.checkbox:checked').map(function() {
return $(this).parent().prop('id');
}).get().join(',');
$('#select_players').val(subscriptionIds);
$('#subscription_ids_export').val(subscriptionIds);
})
Example fiddle
<script type="text/javascript">
$(document).ready(function() {
$(".buttons").click(function(){
var cntrl = $(this).html();
$("#txt-area").text(cntrl+",");
//alert (cntrl);
});
});
</script>
When I click to my character on my html page character's value sets to textarea, but when I click to another character previous char disappears. I know about something about arrays in JS but how can I handle this.
How can I add values to textarea properly without disappearing?
Try
$(document).ready(function () {
$(".buttons").click(function () {
var cntrl = $(this).html();
$("#txt-area").val(function (_, val) {
return val + cntrl + ","
});
//alert (cntrl);
});
});
Demo: Fiddle
or
$("#txt-area").text($("#txt-area").val() + cntrl+",");
$("#txt-area").append(cntrl + ",");
Demo: Fiddle - I prefer using val() because I consider it as a input element
Arun's answer above works, but it will add a comma to the end. If you want to avoid that, place the comma before the new value, and then have the code check to see if this is the first time something is being added, and not place a comma that time.
$(document).ready(function () {
var oldvalue;
var newvalue;
$(".buttons").click(function () {
oldvalue = $("#txt-area").val(); //GET THE VALUE OF TEXTBOX WHEN USER CLICKS
if (oldvalue) {newvalue = ', '+$(this).html();} // IF THE TEXTBOX ISN'T BLANK, PLACE A COMMA BEFORE THE NEW VALUE
else {newvalue = $(this).html();} //IF THE TEXTBOX IS BLANK, DON'T ADD A COMMA
$("#txt-area").val(oldvalue + newvalue); //PLACE THE ORIGINAL AND NEW VALUES INTO THE TEXTBOX.
});
});
Try,
$(document).ready(function() {
$(".buttons").click(function(){
var cntrl = $(this).html();
var xTxtArea = $("#txt-area");
xTxtArea.text(xTxtArea.text() + cntrl + ",");
});
});
I'm trying to write my own function to wrap each string separated by a comma in a tag, I have this working, but on the 'close' click id like to remove the corresponding string from the input, is this possible at all?
jQuery
$('body').on('click', '.tag span', function(){
$(this).parent().hide();
});
$('input').keyup(function(e) {
$('.result').html('');
var valueArr = $(this).val().split(',');
for(var i=0; i<valueArr.length; i++){$('.result').append('<div class="tag">'+valueArr[i]+'<span> X</span></div>')};
});
http://jsfiddle.net/Liamatvenn/7huQ4/1/
Try this:
$('body').on('click', '.tag span', function(){
$(this).parent().hide();
$(this).closest('.result').prev('input').val(""); //get the input respective to the clicked close button.
});
.closest() will get you to the parent .result and target only its previous input which generated the tag using .prev().
Demo
Much simpler, use index of the clicked tag item and remove that respective item from the array based on the same index as they are inserted in that order itself.
$('body').on('click', '.tag span', function () {
var $parent = $(this).closest('.tag');
var index = $parent.index(); //Get the index of the `tag`
$(this).closest('.result').prev('input').val(function (_, value) { //use val function argument
var values = value.split(','); //split the value
values.splice(index, 1); //remove the item from array
return values.join(','); //join them back
});
$parent.remove(); //then remove your tag
});
Demo
You could always modify your click handler to do something like:
$('body').on('click', '.tag span', function(){
var $this, $input, val, arr;
$this = $(this);
$input = $('input');
arr = $input.val().split(',');
val = $this.parent().text().replace(' X','');
arr.splice(arr.indexOf(val), 1);
$input.val(arr.join(','));
$this.parent().hide();
});
You can see it working at http://jsfiddle.net/eF5ev/
You can just store your elements in an array and remove the ones that get clicked by their index:
var $tag = $('<div class="tag"><span class="text"></span><span class="close">×</span></div>');
var tags = [];
$('.result').on('click', '.tag .close', function() {
var $parent = $(this).parent();
tags.splice($parent.index(), 1);
$parent.remove();
$('input').val(tags.join(', '));
});
$('input').keyup(function() {
tags = []
$('.result').empty();
$(this.value.split(/\s*,\s*/)).each(function(index, value) {
var tag = $tag.clone();
tag.find('.text').text(value);
tag.appendTo('.result');
tags.push(value);
});
});
Demo: http://jsfiddle.net/7huQ4/9/
You can input data on close button click. jquery text() method to get text inside tag.
remove that text from input data. then remove leading and trailing commas with regular expression.
Try this one.
$('input').keyup(function(e) {
var input = $(this); /* Store input object for replaced value insertion */
$('.result').html('');
var valueArr = $(this).val().split(',');
for (var i = 0; i < valueArr.length; i++) {
$('.result').append('<div class="tag">' + valueArr[i] + '<span> X</span></div>');
}
$('span').click(function() {
/* Removal of unwanted string like ' X' (close button) */
var data = $(this).parent().text();
data = data.replace($(this).text(), ""); /* Basic javascript replace() function*/
/* Delete unwanted commas, Store modified string to input field */
input.val(input.val().replace(data, '')
.replace(/^[,\s]+|[,\s]+$/g, '')
.replace(/,[,\s]*,/g, ','));
});
});
demo : http://jsfiddle.net/7uqEg/