how do i check values individually of appended inputs - javascript

how do i check values individually of appended inputs
example i want to get the value of only the second appended input thanks
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
$(".addinput").click(function(){
$('.samplediv').append('<input type="text" class="sampleinput">');
});
</script>
<div class="samplediv">
<input type="text" class="sampleinput">
</div>
<button class="addinput"></button>
</body>
</html>

Add a unique class for each input and use that class to get the value. For the second one, use something like:
$("input.num-2).val();
var num = 1;
$(".addinput").click(function(){
$('.samplediv').append('<input type="text" class="sampleinput num-' + num + '">');
num++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="samplediv">
</div>
<button class="addinput">Add input</button>

This is just one way (not the best way) to accomplish what you are asking for.
Here is a working example: https://jsfiddle.net/zzukok0j/
$(".addinput").click(function(){
$('.samplediv').append('<input type="text" class="sampleinput">');
var counter = 0;
$('.sampleinput').each(function(poop) {
if(counter===1) {
alert( $(this).val() );
} else {
counter++;
}
});
});

use jquery each function to select each field and do whatever you want...
$('input[type="text"]').each(function(){
//do something
});

The following piece of code will allow you to get the value of each of the appended inputs.
var $inputs = $('.samplediv input');
$inputs.each(function(index) {
value = this.val();
// now you can use value for whatever you need
console.log(value);
});
I hope this helps. Happy coding!

Related

Return Output in an HTML Element onkeyup

I'm working on html editor but this part is giving me a problem is there anyway to archive this? when i type in the text filed it will display an output in the div element.
<script type="javascript/text">
function ColorText(){
T = Rep(document.getElementById("text").value);
document.getElementById("wcode").innerHTML=T;
setTimeout("ColorText()",10);
}
</script>
HERE IS HTML PART
<input type="text" id="text" onkeypress="ColorText()"/>
<div type="text" id="wcode"></div>
A more elegant solution, without setTimeout:
function Rep(value){
//Do your thing...
return value;
}
var wcode = document.getElementById("wcode");
var text = document.getElementById("text");
text.addEventListener("input", function(){
wcode.innerHTML = Rep(this.value);
});
<input type="text" id="text"/>
<div id="wcode"></div>
Codesoft, your code may not be working for 2 things:
<script type="javascript/text">
change it for:
<script>
or
<script type="text/javascript">
And the other possible problem:
T = Rep(document.getElementById("text").value);
Maybe you hadn't defined the function Rep(). You have to define it and return a string value, or just don't use it, like this:
T = document.getElementById("text").value;
Besides of that, Marcos Casagrande gave you a better solution to your problem, please, take a look to that code.

How can I use id and value of text input?

Textbox:
<input class="qty_txt" input id="1234" type="text" placeholder="Current item QTY">
Javascript:
$(".qty_txt").on("change", function () {
var productID = elem.id;
var qty = elem.value;
alert(productID + qty);
});
How can I use the ID from the textbox, define it as 'productID' and define the value of the texbox as 'qty' to use in the rest of the function?
http://jsfiddle.net/VnYm7/4/
One of the easier things to do would be to pass in the current division as a parameter to the function using the jQuery $(this) selector. This way, the same function works for all the .qty-txt classes.
You can use the .attr() method of jQuery to get the ID of the div, and then call .val() to get the value. You could also use native JS' .value method here.
Important to note: the $(document).ready() wrapper around the jQuery code assures that that code will be called right when the page loads. If it weren't called, the browser wouldn't know to do things if the input box is changed.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!--jQuery Google CDN-->
<script type="text/javascript">
$(document).ready(function() {
$(".qty_txt").on("change", function ($(this)) {
var productID = $(this).attr("id");
var qty = $(this).val();
alert(productID + qty);
});
});
</script>
</head>
<body>
<input class="qty_txt" input id="1234" type="text" placeholder="Current item QTY">
</body>
</html>
var productID = $(this).attr('id');
var qty = $(this).val();
This video better illustrates the use of this and contexts in javascript
If you want to retrieve attributes from the event's target, you can use specify a parameter in the function () you pass to on(), like this:
$(".qty_txt").on("change", function (e) {
var productID = e.target.id;
var qty = e.target.value;
alert(productID + ":" + qty);
});
Take a look at this for details.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>
<body>
<input type="text" class="qty_txt" id="id1" />
<input type="text" class="qty_txt" id="id2" />
<input type="text" class="qty_txt" id="id3" />
<script>
$(".qty_txt").on("change", function () {
var productID = this.id, qty = this.value;
alert(productID + qty);
});
</script>
</body>
</html>
This is example with several input with different ids, you may bind the "change" function to all the ".qty_txt" elements! the productID and productValue you may get by the code above!

converting input type text to plain text

i'm working on a small html form with 1 textbox input, after the user enters any text and he presses a button on the end of the page i want the to change to a normal plain html text(so the whole page can be copy pasted into a word file including the written down text in the textbox).
as an example:
<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>
after the button is pressed i want the textbox to be converted to plain html text with no more textbox like this:
this is an example text after pressing the button!
click!
i have been searching around and have not found a working solution yet, hope someone can help me out
$('button').click(function(){
$('body *').replaceWith(function(){
return this.value || this.innerHTML;
});
});
http://jsfiddle.net/pYw9P/
This should do it I think.
function disable_all() {
var fs = $("#fileserver"), span = $( "<span>" + fs.val() + "</span>");
span.insertAfter(fs);
fs.remove(); // or fs.hide(); in case you want it later.
}
Try:
HTML:
<input type="text" id="fileserver">
<button id="but">click!</button>
JS:
$( "#but" ).click(function() {
var text=$( "#fileserver" ).val();
$( "body" ).html(text);
});
DEMO
This should be helpful to you -
There are several way to achieve your task :
Solutions 1 -
function disable_all()
{
$('#content').remove();
$('#fileserver, button').hide();
$('body').append("<div id='content'>" + $('#fileserver').val() + "</div>")
}
Working Fiddle
Solution 2 -
function disable_all()
{
$("body").html($("#fileserver").val());
}
Working Fiddle
you can do this hiding the textbox
<input type="text" id="fileserver">
<div id="result"></div>
<button id="btn" >click!</button>
and
$(document).ready(function(){
$("#result").hide();
$("#btn").click(function(){
$("#result").text($("#fileserver").val());
$("#fileserver").hide();
$("#result").show();
});
});
demo
The first "non-jQuery" answer...
your HTML:
<input type="text" id="fileserver">
<div style="display: none;" id="fileserver_text"></div>
<button id="btn">click!</button>
your Javascript:
document.getElementById('btn').onclick = disable_all;
function disable_all() {
var input = document.getElementById('fileserver');
var disp = document.getElementById('fileserver_text')
disp.innerHTML = input.value; // get the text from the input and set the div text
disp.style.display = 'block'; // show the div
input.style.display = 'none'; // hide the input
}
JSFiddle
If you are using jQUery, this will help you,
http://jsfiddle.net/DCak6/
function save(){
$('input,textarea').each(function(){
var $this = $(this);
$this.after('<span class="value">' + $this.val() + '</span>');
$this.remove();
})
}
You may be better off with taking the text from the text field, copying the value and putting it into another div
<div id="textToCopy"></div>
<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>
<script type="text/javascript">
function disable_all() {
$('#textToCopy').html($('#fileserver').val());
$('#fileserver').hide();
}
</script>

Get the values of input fields within child elements of a specific div

I have my form broken up into sections, and I'm trying to have a script check the number of fields empty in each section. Previously I had written an array with the id's of each section and had it cycle through that array, but i'd like to find a more universal solution that doesn't depend on predefined data.
at first I was trying .find() like so
function blankFields(section){
var totblank = 0;
var inputs = $('#' + section).find('input');
$.each(inputs, function(){
if(this.val() == '') { totblank++; );
}
when that didn't work i tried .serializeArray()
function blankFields(section){
var totblank = 0;
var inputs = $('#' + section + ' input').serializeArray();
$.each(inputs, function(i, field) {
if (field.value == '') { totblank++; }
});
and it gets followed up with
if(totblank > 0){
$("#"+section+"B").html(totblank+" Empty");
} else {
$("#"+section+"B").html("All full!");
}
}
section is the id of a div, the div has a table with form inputs.
This is my first time using these functions so I'm not really sure where I'm going wrong. Feels like I'm expecting the output to be something its not.
There are a few syntax errors in your code. Fixed:
function blankFields(section){
var totblank = 0;
var inputs = $('#' + section).find('input');
inputs.each(function(){
if($(this).val() == '') totblank++;
});
alert(totblank);
}
I think you can try to find all empty fields, and browse back the DOM to retrieve the parent section.
After, store results in associative array like "section" => count. If the section isn't in array, add an entry "newsection" => 1, else if section is in, increment section's count.
I think this part should give you an error
+= totblank
Or maybe I don't know JavaScript syntax well enough..
Anyway, try this instead
totblank++;
Overall, it's also good to make sure you're really dealing with Numbers. Common mistake is to get .val() and do some maths for example '1' + 1. Result is 11 and is something you probably didn't want
Wrote a little snippet that does the trick : http://jsfiddle.net/9jdmH/
$('#check').click(function() {
$('.section').each(function() {
checkSection($(this));
});
})
function checkSection(section) {
//assuming we're getting a jquery object. easily modifieable
section.find('input[type="text"]').each(function() {
if ($(this).val() == '') {
$('#log').prepend('<p>Found an empty input section ' + section.index() + '</p>');
}
})
}
This will work for a general markup type.
You'll need to make some changes depending on what kind of information you want. I haven't used IDs so I'm just using the .index() point out which ones are empty. As long as you get/make a jquery reference in the checkSection method you'll be fine.
My take on this:
http://jsfiddle.net/fqBrS/
function findNumberOfEmptyInputs(section) {
var inputs = $('#'+section+' input[type="text"]');
alert(inputs.filter(":empty").length);
}
findNumberOfEmptyInputs("section2");
The good thing is that you do not have to (explictly at least) use a loop.
Comments appreciated :)
code with sample. Should give pretty much the same output you have now.
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function checkBlank(f){
$(f).find(".section").each(function () {
var c = $(this).find("input[value='']").size()
$("#" + $(this).attr("id") + "B").text(c ? c + " Empty" : "All full");
})
return false
}
</script>
</head>
<body>
<form onsubmit="return checkBlank(this)">
<div class="section" id="section1">
<input type="text">
<input type="text">
</div>
<div class="section" id="section2">
<input type="text">
<input type="text">
</div>
<input type="submit" value="Click">
</form>
<div id="section1B"></div>
<div id="section2B"></div>
</body>
</html>

How to increment a JavaScript variable using a button press event

Can I create a javascript variable and increment that variable when I press a button (not submit the form).
Thanks!
Yes:
<script type="text/javascript">
var counter = 0;
</script>
and
<button onclick="counter++">Increment</button>
The purist way to do this would be to add event handlers to the button, instead of mixing behavior with the content (LSM, Layered Semantic Markup)
<input type="button" value="Increment" id="increment"/>
<script type="text/javascript">
var count = 0;
// JQuery way
$('#increment').click(function (e) {
e.preventDefault();
count++;
});
// YUI way
YAHOO.util.Event.on('increment', 'click', function (e) {
YAHOO.util.Event.preventDefault(e);
count++;
});
// Simple way
document.getElementById('increment').onclick = function (e) {
count++;
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
};
</script>
<script type="text/javascript">
var i=0;
function increase()
{
i++;
return false;
}</script><input type="button" onclick="increase();">
I needed to see the results of this script and was able to do so by incorporating the below:
var i=0;
function increase()
{
i++;
document.getElementById('boldstuff').innerHTML= +i;
}
<p>var = <b id="boldstuff">0</b></p>
<input type="button" onclick="increase();">
add the "script" tag above all and a closing script tag below the function end curly brace. Returning false caused firefox to hang when I tried it. All other solutions didn't show the result of the increment, in my experience.
Use type = "button" instead of "submit", then add an onClick handler for it.
For example:
<input type="button" value="Increment" onClick="myVar++;" />
Yes.
<head>
<script type='javascript'>
var x = 0;
</script>
</head>
<body>
<input type='button' onclick='x++;'/>
</body>
[Psuedo code, god I hope this is right.]
yes, supposing your variable is in the global namespace:
<button onclick="myVar += 1;alert('myVar now equals ' + myVar)">Increment!!</button>
I believe you need something similar to the following:
<script type="text/javascript">
var count;
function increment(){
count++;
}
</script>
...
and
<input type="button" onClick="increment()" value="Increment"/>
or
<input type="button" onClick="count++" value="Increment"/>
Had a similar problem. Needed to append as many text inputs as the user wanted, to a form. The functionality of it using jQuery was the answer to the question:
<div id='inputdiv'>
<button id='mybutton'>add an input</button>
</div>
<script>
var thecounter=0; //declare and initialize the counter outside of the function
$('#mybutton').on('click', function(){
thecounter++;
$('#inputdiv').append('<input id="input'+thecounter+'" type="text/>);
});
</script>
Adding the count to each new input id resulted in unique ids which lets you get all the values using the jQuery serialize() function.

Categories