We Keep Coding

How to pass js variable into hidden form field?

I want to pass js variable into hidden form field value. I set value using php echo code but it is not working.
js variable :-
<script type="text/javascript"> var demo = 1; </script>
html :-
<input type="hidden" name="demo_val" value="<?php echo <script>demo</script>" id="demo_val"/>
and in js file call hidden field value :-
$('#demo_val').val();
but it is not working...
How to do it..?

Remove this <?php echo <script>demo</script> from hidden field and leave it blank.
Write followed code
var demo =1;
$('#demo_val').val(demo);
in your script.
You can get value by
var field_vemo = $('#demo_val').val();

Put
document.getElementById("demo_val").value = demo;
in your javascript section

you should pass the variable since javascript yo input hidden, not it´s good idea pass the variable with , you can use jQuery :
var demo = "hola";
$('#demo_val').val(demo);
Now input with name demo_val should have the value "hola"
If you like get the value you can
var valueDemo = $('#demo_val').val();

try this
<input type="hidden" name="demo_val" value="" id="demo_val"/>
<script type="text/javascript">
var demo = 1;
$(document).ready(function() {
$('#demo_val').val(demo);
});
</script>

How to pass a Javascript ID value into a form Placeholder?

I have used a function to capture the Query String value of "name" - i.e. imagine a party invite site;
https://cometomyparty.com?name=phil
The function used is;
script type="text/javascript">
function getQuerystring(){
var q=document.location.toString();
q=q.split("?");
q=q[1].split("&");
var str=""
for(i=0;i<q.length;i++){
tmp=q[i].split("=")
str+=" "+tmp[1]+"<br />"
}
document.getElementById("name").innerHTML=str
}
onload=function(){
getQuerystring()
}
</script>
Then I can call the value of 'name' using id="name" where I want to use this on my page, i.e. in the heading, I could say, Phil, looking forward to having you at the party...
That's working well. The problem I have is, I have a Form I'm using as well, and within that, it has a Placeholder field, like so;
<div class="form-section">
<input type="text" name="name" class="validate-required" placeholder="Names">
How can I insert my 'id' value of 'name' into my placeholder here? The end result would be, the invite mechanic would work on the same URL, across multiple invitees, but the URL would just change. The RSVP form would reflect what is in the URL as the placeholder, yet the user could still update it if it was incorrect.
Any advice appreciated.

This find placeholder and change using jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#name').attr("placeholder", "your place holder here");
});
</script>
if it's a $var also don't need quotes would be like
$('#name').attr("placeholder", $str);
Or using javascript
<script type="text/javascript">
function getQuerystring(){
var q=document.location.toString();
q=q.split("?");
q=q[1].split("&");
var str=""
for(i=0;i<q.length;i++){
tmp=q[i].split("=");
str+=" "+tmp[1]+"<br />";
}
document.getElementById("name").innerHTML=str;
document.getElementById("name").placeholder=str;
}
onload=function(){
getQuerystring();
};
</script>
document.getElementById("name").placeholder="value here" if it's a var so don't need quotes
Also you need to insert an id to your html input field
<div class="form-section">
<input type="text" id="name" name="name" class="validate-required" placeholder="Names">

I need to change javascript code for cookies. I am saving the input text but i need to save the div text not the input one

I have code which changes the input to div and the second cookies code which save input text and show it but it show it in the input and I have to change it to div by pressing enter every time. How to save it in the div stadium to cookies? I know I just need to change the code below but how?
EDIT: Some JS imports were missing
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" type="text" class="name" placeholder="What's your name?"/>
<div id="text"></div>
Javascript (in HTML file):
<script>
$(document).ready(function(){
var name = Cookies.get('_username');
if (name) {
$('#name').val(name);
}
$('#name').keydown(function(){
var inputName = $('#name').val();
Cookies.set('_username', inputName);
})
});
$(document).ready(function(){
$('#name').keydown(function(e){
if(e.which==13){
$('#name').hide();
$('#text').html($('#name').val());
}
})
});
</script>
Thank you for your help.

If I understood correctly this is what you want. The input is shown the first time you load the page, then when the user refresh the page, it is no longer shown as the cookie has already been set.
<script>
$(document).ready(function(){
$('#text').hide();
var name = Cookies.get('_username');
if (name) {
$('#text').html(name);
$('#name').val(name);
$('#name').hide();
$('#text').show();
}
$('#name').keydown(function(){
var inputName = $('#name').val();
Cookies.set('_username', inputName);
})
});
$(document).ready(function(){
$('#name').keydown(function(e){
$('#text').html($('#name').val());
if(e.which==13){
$('#name').hide();
$('#text').show();
}
});
$('#text').dblclick(function(){
$('#name').show();
$('#text').hide();
});
});
</script>

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!

How can I get the value of an input field in javascript without submitting a form?

I'm fairly new to javascript and have a question about how to get a value of an input field without submitting a form. I have the following small piece of code, which I'm using in combination with a realtime-validation script to validate the fields.
<form name="FormName" method="post" />
<input type="text" id="nameValidation" value="HelloWorld" />
<script type="text/javascript">
var NameValue = document.forms["FormName"]["nameValidation"].value;
</script>
</form>
I want the var NameValue to be the value of what you type into the input field so I can use it in the message which appears after the validation. When I change the value of the input field without submitting the form, the var NameValue is stil set to "HelloWorld". After doing some research I found out I could solve it using jQuery and it's function serialize(). Is there a way to do this without jQuery?

Without jQuery :
var value = document.getElementById('nameValidation').value;
The syntax you had would be usable to get an input by its name, not its id.
If what you want is to use this value when it changes, you can do that :
var nameValidationInput = document.getElementById('nameValidation');
function useValue() {
var NameValue = nameValidationInput.value;
// use it
alert(NameValue); // just to show the new value
}
nameValidationInput.onchange = useValue;
nameValidationInput.onblur = useValue;

Your code works. It assign value of your input field to var NameValue. What you explained and what JQuery serialize does are two different things.
Everything you need is to assign your code to right event:
<form name="FormName" method="post" />
<input type="text" id="nameValidation" value="HelloWorld" onchange="myFunction()"/>
</form>
<script type="text/javascript">
function myFunction(){
var NameValue = document.forms["FormName"]["nameValidation"].value;
alert(NameValue);
}
</script>
​see the JSFiddle.

use the onchange or onblur event to call this code:
var NameValue = document.forms["FormName"]["nameValidation"].value;
This way it will get activated when the cursor leaves the textbox
<input type="text" id="nameValidation" value="HelloWorld" onblur="changeVal();" />
<script type="text/javascript">
function changeVal() {
var NameValue = document.forms["FormName"]["nameValidation"].value;
alert(NameValue);
}
</script>

In your example, the variable only gets the value assigned to it at that moment in time. It does not update when the textbox updates. You need to trigger a function [onchange or onblur or keypress] and reset the variable to the new value.
<form name="FormName" method="post" />
<input type="text" id="nameValidation" value="HelloWorld" />
<script type="text/javascript">
var myTextbox = document.getElementById("nameValidation");
var nameValue = myTextbox.value;
myTextbox.onchange = function() {
nameValue = myTextbox.value;
};
</script>
</form>

You can let your client-side code respond to a change in the value of the textbox, like so:
$(document).ready(function(){
$("#nameValidation").on('change', function() {
var value = $("#nameValidation").value;
//do your work here
}
})