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();

jQuery: get clicked button values

I need to get the values of a jQuery button when a form is submitted. The form and jQuery i'm using is below, but it's not working.
I need to get the value of data-url.
jQuery code
$("#addAgency").submit(function(event) {
var val = $("button[type=submit][clicked=true]").attr('data-url');
alert(val);
});
HTML Code
<form id="addAgency">
<button type="submit" data-url="test.php">
</form>
Thanks in advance.

try
$("#addAgency").submit(function(event) {
var val = $(this).find("button[type=submit]").data('url');
alert(val);
});

I have never heard of the [clicked=true] and I don't think that is right. The following will find the button from the children of the submitted form.
$("#addAgency").submit(function(event) {
var val = $(this).find('button[type=submit]').attr('data-url');
alert(val);
});

Try this.
$("#addAgency").submit(function(event) {
alert($(event.target).find('button').data('url'));
});
https://jsfiddle.net/t3y5x6ej/2/

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"));
});
}
});

Can Knockout.js change variable which is not in the viewModel

This is my sample code
HTML:
<input type="text" data-bind="value: a"/>
And in JavaScript I want something like.
var a = 5;
a = ko.observable(a);
But i want to keep a number. And when i change a the input to change and when I change the input a to change.

ViewModel->Scope is possible, but Scope->ViewModel is not possible:
var nonObservable = 5,
observable = ko.observable(nonObservable);
// ViewModel->Scope
observable.subscribe(function(newValue) {
nonObservable = newValue;
});
// Scope->ViewModel
observable("new value");
// This however, will not work
nonObservable = "not in any way connected";
The reason for this is that there is no way for knockout to detect what name you are binding it to (ko.observable just knows that it has been given the value 5, not that it has been given the name nonObservable) ... and even if it could detect this, you would probably not want to do this by default.

How to dynamically remove input field which is created dynamically using JavaScript

I created an input text dynamically using JS, but what if I want to remove the input field one by one dynamically using a button by calling "removeTextField()" from the JS?
Here is the JS:
<script type="text/javascript">
function addTextField(){
var element = document.createElement("input");
element.setAttribute("name", "i[]");
element.setAttribute("value", "");
element.setAttribute("class", "daters");
element.setAttribute("id", "timepicker_7");
var myvalue = document.getElementById("dispTime");
myvalue.appendChild(element);
}
</script>
...
<input type = "button" class="button2" value = "Add Time" onclick = "addTextField()"/>

The way you create the elements has a problem. You are giving the new element a hardcoded id and this means that when adding more than one, you will end with multiple elements with the same id ?(which is invalid and prone to errors when accessing the DOM)
Since you use jQuery, why not simplify your code when adding/removing elements by utilizing it?
I would use something like this
html
<input type="button" class="button2 addField" value="Add Time" />
<input type="button" class="button2 removeField" value="Remove Time" />
script
$(function(){
$('.addField').on('click', function(){
$('<input type="text">', {
name: 'i[]',
value: '',
'class': 'daters'
}).appendTo('#dispTime');
});
$('.removeField').on('click', function(){
$('#dispTime .daters').last().remove();
});
});
If you are not using jQuery then the way to remove an element
function removeTextField(){
var elements = document.getElementById('dispTime').getElementByClassName('i[]'),
last = elements[elements.length-1];
last.parentNode.removeChild(last);
}

function removeTextField() {
var timepicker = document.getElementByID("timepicker_7");
timepicker.parentElement.removeChild(timepicker);
}

you can use $.remove() for this..
refer: http://api.jquery.com/remove/
Suggestion: instead of creating elements like the one you did, create like this.
$('body').append("<input name='i[]' value='' class='daters' id='timepicker_7' />");
$('#timepicker_7').remove();
if you are creating elements on demand and want to use this element multiple times.
now you have a function which can be used as many times you want, anywhere on the page
function GetTextField() {
var field = "<input name='i[]' value='' class='daters' id='timepicker_7' />";
return field;
}
var field = GetTextField();
$('body').append(field);

$("#dispTime #timepicker_7").remove()

This is my idea(not tested):
Every time you add an input, just push it in a array, so you can remove it after:
<script type="text/javascript">
var inputStack = new Array();
function addTextField(){
var element = document.createElement("input");
element.setAttribute("name", "i[]");
element.setAttribute("value", "");
element.setAttribute("class", "daters");
element.setAttribute("id", "timepicker_7");
var myvalue = document.getElementById("dispTime");
myvalue.appendChild(element);
inputStack.push(element);
}
// Now if you want to remove, just do this
inputStack[0].remove(); // I think it'll work for example
</script>