I'm going to append multiple values from an input, curious on how I can dry the append code. Possibly into a function, thanks!
var $inputFirst = $('input:first').val();
var $inputSecond = $('input:second').val();
$('ul').append('<li>' + $inputFirst + '</li>');
$('ul').append('<li>' + $inputSecond+ '</li>');
This should work for you
$(':input').each(function(i){
$('ul').append('<li>'+$(':input').eq(i).val()+'</li>')
})
Assuming you have same number of input and li. You can iterate through the li and append the corresponding input value it.
inputs = $('input');
$('ul li').each(function(){
$this).append(inputs.eq($this).index()));
});
Note As a additional note you are using tag that will effect the whole page. It might include the element you do not want to be part of this. So use class or some other attributes to access both li and input elements.
inputs = $('.class-of-input');
$('.class-of-ul li').each(function(){
$this).append(inputs.eq($this).index()));
});
hey i have created example for you on jsfiddle:-
$(document).ready(function() {
$("#createLI").click(function() {
var lis = "";
$(".forLI").each(function() {
var vl = $(this).val();
lis += "<li>" + vl + "</li>"
});
$("ul").append($(lis));
});
});
working example link:http://jsfiddle.net/BtkCf/166/
we are using class to filter the input so it will select all the inputs while creating LI tags.
in above example you can have any number of input boxes.
just provide a class 'forLI' to input boxes it will append there text values to ul as li.
we can not select value like this $('input:second').val(); you can use $('input:eq(1)').val();
thanks
Related
So I downloaded TinyNav.js which helps me with my websites menu and can't figure out how to get the element ID from the "a" tag. I have modified TinyNav.js in one spot here.
The code is right here:
https://github.com/viljamis/TinyNav.js/blob/master/tinynav.js
I need help with line 61.
window.location.href = $(this).val();
I changed this line to
window.location.onClick = (A javascript function call which expects a string)
The string in this case is what I need help on. I need to get the SELECTED items ID, and I can't seem to find a way to do that. The
$(this).val();
returns to me the href of the selected item I clicked on in my menu but again, I want just the selected element's ID. How do I get this value?
The <option> elements are created dynamically in the tinyNav script on line 40:
options += '<option value="' + $(this).attr('href') + '">';
They only have a value attribute, no IDs.
I'm assuming that your ID values are inside you <a> tags, such as:
About
You can grab the IDs and put them into your options like this:
options += '<option value="' + $(this).attr('href') + '" id="' + $(this).attr('id') + '">';
Then you can get the ID inside the change function.
Change this (lines 60-62):
$select.change(function () {
window.location.href = $(this).val();
});
To this:
$select.change(function () {
console.log($(this).find(":selected").attr('id'));
window.location.href = $(this).val();
});
The value of $(this) is the select element that is being changed. Then you can use .find(":selected") to get the selected option element, and finally .attr('id') to get the ID attribute.
Here is a jsfiddle: https://jsfiddle.net/t72wdcwc/41/
window.location.onClick is incorrect. Javscript is case-sensitive and uses onclick, with no camelCase. You can do the following:
window.location.onclick = function() {
yourFunction($(this).attr("id"));
}
function yourFunction(id) {
alert("You clicked " + id);
}
Is there a way to get the value of an :input in jQuery that holds for all :input?
I am asking this because I have a page with select and checkbox, it is for the following code:
for (var i = 0; i < arguments.length; i++) {
var localArgument = arguments[i].trim();
data[localArgument] = $(html).find(":input[name='" + localArgument + "']").val();
$(html).on("change", ":input[name='" + localArgument + "']", function(event) {
console.log(localArgument + ": " + $(this).val());
data[localArgument] = $(this).val();
reloadTable(table, html, data);
});
}
Where arguments is an array that holds names for elements.
I know I need to do it for checkbox with .prop("checked"), however I would much rather use a general function which I know does not need to be updated in the future.
just use $('input') selector to select all input elements
If you want to get the value of each input element you can do something like
$('input').each(function() {
// use $(this).val() to get the value
})
You can safely use val() for all inputs, checkboxes, radio buttons, and selects. This is a demo: http://jsfiddle.net/FxjQB/3
I have this sample http://jsfiddle.net/7aDak/927/ . I need to iterate through each table's each row's dropdown and textarea and build a string based on that . I must not use id's . How would I do it ? Thanks in advance .
Your code was almost set.. just needed minor fix.. See below,
DEMO: http://jsfiddle.net/7aDak/931/
$("#btnSave").click(function() {
$(".templateTable").each(function() {
//v-- Used $(this).find('tr') to get all tr from the selected table
$(this).find("tr").each(function() {
$this = $(this)
var email = $this.find("textarea").val();
var frequency = $this.find("select").val();
alert(email + '--' + frequency);
});
});
});
or As suggested by Rune
$("#btnSave").click(function() {
$(".templateTable tr").each(function() {
$this = $(this)
var email = $this.find("textarea").val();
var frequency = $this.find("select").val();
alert(email + '--' + frequency);
});
});
this "tr.item" is not a real selector.
You need to split them into two separate chained selections:
$(this).find("tr.item")
here's the answer:
http://jsfiddle.net/7aDak/935/
change in html: you need to add a class 'select' to all your select elements.
Rest is in js code.
I'm working on an ASP.Net webpage which will use the jQuery Dropdown Checklist (http://code.google.com/p/dropdown-check-list/). I'm fairly inexperienced with JavaScript and completely new to jQuery.
Could anyone help me with a JavaScript function that de-selects items from a jQuery DropdownChecklist? It would need to accept a string, then de-select the item that matches that string.
Thanks in advance.
Try changing the original <select> element so that the item you want to deselect is no longer selected and then refresh the jQuery dropdown-checklist using the "refresh" command. Something like this (where selectID is the ID of the original <select> element and targetString is the content of the <option> you want to deselect):
function deselect(selectID, targetString){
$("#" + selectID + " option").each(function(){
if($(this).text() === targetString) $(this).attr("selected", "");
});
$("#" + selectID).dropdownchecklist("refresh");
}
Following code deselects item and removes it from display.
document.clearSel = function(list,txt){
var ele=document.getElementById(list);
for(i=0; i < ele.options.length; i++ ) {
if (ele.options[i].selected && (ele.options[i].text == txt) &&
(ele.options[i].value != "")) {
var val=ele.options[i].value;
$("div#ddcl-" + list +"-ddw input[value='"+val+"']").each(function(){
$(this).attr("checked",false);
var spSel="span#ddcl-" + list +" span.ui-dropdownchecklist-text";
var spTxt=$(spSel).text();
$(spSel).text(spTxt.replace(txt+",",'').replace(txt,''));
});
}
}
}
document.clearSel("s8","Low");
I got "div#ddcl--ddw input[value='']" and "span#ddcl- span.ui-dropdownchecklist-text" selectors after examining demo page for drop down check list
PS:- I've trie $("#" + list).dropdownchecklist("refresh"); but I am not able to refresh the text;
In this fiddle you see a table with a select-field where you should select a name.
Below there are 5 input-fields where one could type in some text and 3 input-fields which are set to readonly.
I wanted to ask whether there is a way to add table cells dynamically when clicking on the button. The result should like this fiddle. The id should be incremented by i+.
I tried cloning the code, but could't figure out how to do increment the id of the cloned input-field. The only input-fields I do not want to clone are the readonly input-fields.
Do you have an example code or a link you would recommend? A hint to start would be helpful as well.
I've been searching the net already, but wasn't able to find something.
Here is the code you ask (i added an id to the button to target it easy)
$('#add').click(function(){
$(this)
.closest('table')
.find('tr td:first-child:not(:has([readonly]))')
.each(function(){
var $this = $(this);
$this
.clone()
.each(function(){
var $inp = $(':input',this);
var id = $inp.attr('id');
var idwithoutnum = id.replace(/([0-9]+)$/,'');
var maxId = $(':input[id^='+idwithoutnum+']:last').attr('id');
var idnum = parseInt(/([0-9]+)$/.exec(maxId)) + 1;
var newid = id.replace(/([0-9]+)$/,idnum);
$inp.attr('id', newid);
alert(newid); // remove this line
})
.insertAfter($this
.closest('tr')
.find('td:last')
);
});
});
example at http://jsfiddle.net/fMZDd/7/
I would choose not to use tables for dom manipulation. Either way, here is how you could do it.
to add a table cell
var td = document.createElement("td")
var idVals = prevId.match(/^([a-z_]*)([0-9]+)$/)
td.innerHTML = "<input type='text' id='"+ idVals[1] + (parseInt(idVals[2]) + 1) +">";
tr.appendChild(td)
Hope this helps.