Develop Reference

How to set what user types in textarea as a javascript variable?

Hi so I have a HTML textarea. I want what the user types in it to be displayed on the screen and also stored in a variable. I have the displaying part but I can't figure out how to store it as a a variable.
The html
<textarea id="input" maxlength="50" name="Text" placeholder="Max. 50 characters"></textarea>
The javascript
$('#input').keyup(function() {
$('#text').html($(this).val());
var yourText = this.val();
});

Firstly, you should use change or input instead of keyup. Not everyone uses a keyboard!
Second, only jQuery objects have a val() method. Using this you are referring to the <textarea> element which does not:
$('#input').on("input", function() {
var yourText = $(this).val(); // Only jQuery objects have a .val()
$('#text').html(yourText); // Pass your variable in here
});
jsFiddle Demo

$('#input').keyup(function() {
$('#text').html($(this).val());
var yourText = this.val();
});
Should be
$('#input').keyup(function() {
$('#input').html($(this).val());
var yourText = $(this).val();
});
You gave #text as an id, but the id name of the input is #input

You forget the javascript closure $ on this. Use the code below
<textarea id="input" maxlength="50" name="Text" placeholder="Max. 50 characters"></textarea>
<div id="text1"></div>
<script>
$('#input').keyup(function() {
$('#text').html($(this).val());
var yourText = $(this).val();
$("#text1").html(yourText);
});
</script>
JSFIDDLE:http://jsfiddle.net/7tfs93o2/
Hope this helps you

You are doing var yourText = this.val(); but since you are using JQuery there, .val() is a JQuery method, this should also be wrapped with the JQuery layer like this:
var yourText = $(this).val();

Get a submitted form value using jQuery, have more than 1 form with the same class name

I've tried to search for an answer here but there are no answers that match what I need. I have more than 1 form with class name .sbt-form:
<form class='sbt-form'>
<input name='kord' val=1/>
</form>
<form class='sbt-form'>
<input name='kord' val=2/>
</form>
<form class='sbt-form'>
<input name='kord' val=3/>
</form>
When one form is submitted (let's say the third one) I want just to get the value of input element with name = 'kord'
How do i do this using jQuery?

You can attach a submit handler to the forms and search within them for the element you want to find. Try this:
$('.sbt-form').submit(function(e) {
e.preventDefault(); // stop the form submission to the server. Comment this if not needed.
var inputValue = $(this).find('input[name=kord]').val();
});

Try this :
$("mySubmitButton").click(function () {
$(this).closest(".sbt-form").find("input[name='kord']").val();
});

try
$('.sbt-form').click(function() {
$(this).find("input[name='kord']").val();
});

OR you can get whole form's value with serialize() function on submitting the form:
JS Code:
$(".sbt-form").submit(function(e){
e.preventDefault();
console.log($(this).serialize());
});

Show submit when checkbox is checked loop

I've got a page in wordpress that displays around 20 poll questions (using WP-polls).
I'm using a snippet to display the submit button for each poll once an answer has been checked. Thing is, with this snippet I have to copy paste it about 20 times, because of that I some kind of loop.
This is the current code I'm using
$(document).ready(function() {
var $submit = $("#btn-7").hide(),
$cbs = $('input[name="poll_7"]').click(function() {
$submit.toggle( $cbs.is(":checked") );
});
});
$(document).ready(function() {
var $submit = $("#btn-6").hide(),
$cbs = $('input[name="poll_6"]').click(function() {
$submit.toggle( $cbs.is(":checked") );
});
});
$(document).ready(function() {
var $submit = $("#btn-5").hide(),
$cbs = $('input[name="poll_5"]').click(function() {
$submit.toggle( $cbs.is(":checked") );
});
});
As you can see what changes is the "btn_number" ID and "poll_number". This goes on for another 20 snippets. How can I make this dynamic?

jQuery allows you to use wildcards, for example:
var $submit = $("#btn-*").hide(),
$cbs = $('input[name="poll_*"]').click(function() {
$submit.toggle( $cbs.is(":checked") );
});
Edit: I see the wildcard selectors isn't supported by jquery anymore (as above example) you might want to look at: http://james.padolsey.com/javascript/regex-selector-for-jquery/ which gives you the ability to use regex to define the selectors for all btn's and code for it once

You can use the starts with selector on the ID and name attributes, to dynamically access the number. The change event is more appropriate than the click event for checkboxes.
Demo
$('[id^="btn-"]').hide();
$('input[name^="poll_"]').change(function(){
var number = this.name.replace('poll_', '');
$('#btn-' + number).toggle( $(this).is(":checked") );
});
It would be better to use data-* attributes to link the buttons and checkboxes, or nest them in an element that has the ID. Parsing the number out of the ID attribute isn't the cleanest way.

You don't have to repeat the same code for 20 times just for getting different button ids. you can make it dynamic. checkout this simple example
$("#submit").click(
function()
{
for(i=1;i<=5;i++)
{
msg = $("#btn-"+i).val()
alert(msg)
}
}
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="button" id="btn-1" value="button1">
<input type="button" id="btn-2" value="button2">
<input type="button" id="btn-3" value="button3">
<input type="button" id="btn-4" value="button4">
<input type="button" id="btn-5" value="button5">
<p>
<input type="button" value="submit" id="submit">

$(document).ready(function(){
for(var i=1;i<=20;i++){
var submit = $("#btn-"+i).hide(),
cbs = $('input[name="poll_'+i+'"]').click(function(){
submit.toggle($this.is(":checked"));
});
}
});

How can I get the actual value into an hidden field

I'm using the Iconselect and I wanted to ask how I can transmit the actual and/or selected value into an hidden field - I can't find a solution :(
<input type="hidden" id="recommandation" name="recommandation" value="" />
...
<script>
var iconSelect;
window.onload = function(){
iconSelect = new IconSelect("my-icon-select",
{'selectedIconWidth':24,
'selectedIconHeight':24,
'selectedBoxPadding':1,
'iconsWidth':20,
'iconsHeight':20,
'boxIconSpace':1,
'vectoralIconNumber':4,
'horizontalIconNumber':4});
var icons = [];
icons.push({'iconFilePath':'/images/sampledata/eval-1.jpg', 'iconValue':'1'});
icons.push({'iconFilePath':'/images/sampledata/eval-2.jpg', 'iconValue':'2'});
icons.push({'iconFilePath':'/images/sampledata/eval-3.jpg', 'iconValue':'3'});
iconSelect.refresh(icons);
};
</script>
Thanks a lot

$("id-of-selector").on('blur', function(){
$('#recommandation').val = this.val;
});
or
var element = document.getElementById('id-of-selector')
element.addEventListener('blur', function(e){
document.getElementById('recommandation').value = element.value;
});

In taking a quick look at IconSelect, it appears you could do something like:
$('#my-icon-select').on('changed', function(){
$('#recommandation').val(iconSelect.getSelectedValue());
});

I don't know about iconselect never used it but manipulating the value with jquery it does not matter if it is hidden look at this:
http://api.jquery.com/val/

Create array from TextArea using jquery

I have the following code
<!----SUBMIT BUTTON---->
<input type="button" value="Submit" onClick="getData();">
.....
<div id="rev"></div>
After click on the submit button, I can be able to display my required data from my database within the text area with id='rev' in the format below:
20
30
I want to push these content of the text area into an array using jquery
<script type="text/javascript">
var arr=new Array();
function createArr()
{
var txt=$('#rev').val();
$.each(txt.split('\n'),function(i,value){
if(value!=""){
arr.push(value);
}
});
}
createArr();
document.write(arr[0]);
</script>
It seems does not work, the output on my webpage suppose to display the first element of my array which is 20. Any one can show me what did I do wrong with my code ?
It works when I changed this
<div id="rev"></div>
into
<textarea id="rev"></textarea>.
I dont know why div can not be used here ?

Wrap your entire function using window.onload function.Try this:
<script type="text/javascript">
window.onload = function(){
function createArr()
{
var arr=new Array();
var txt=$('#rev').html(); // use html() instead of val()
$.each(txt.split('\n'),function(i,value){
if(value!=""){
arr.push(value);
}
});
}
createArr();
console.log(arr[0]);
}
</script>
Demo

I think it is beause you output only the first one:
document.write(arr[0]);
Maybe you need this?
$.each(arr, function(i, val) {
document.write(val);
}