Develop Reference

How do you save multiple key value pairs to one cookie with JavaScript/jQuery?

I have a form with multiple checkboxes in it and when I click them, I want to add/remove the key-value pairs (name of the input + true/false) in one single cookie.
When I click on the checkboxes only the first pair gets shown in console.log.
This is what I ended up with so far:
HTML:
<form class="form">
<input class="input" name="expert_id_1" type="checkbox" />
<input class="input" name="expert_id_2" type="checkbox" />
<input class="input" name="expert_id_3" type="checkbox" />
<input class="input" name="expert_id_4" type="checkbox" />
</form>
JS:
function setCookie() {
var customObject = {};
var inputName = $('.input').attr('name');
customObject[inputName] = $('.input').prop('checked');
var jsonString = JSON.stringify(customObject);
document.cookie = 'cookieObject=' + jsonString;
console.log(jsonString);
}
function getCookie() {
var nameValueArray = document.cookie.split('=');
var customObject = JSON.parse(nameValueArray[1]);
$('.input').prop('checked') = customObject[inputName];
}
$('.input').each(function() {
$(this).on('click', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
} else {
$(this).attr('value', 'false');
}
setCookie();
});
});

Your cookie is being overrided and it might only store the first checkbox info. Also to set the prop value, you have to pass it as a second parameter.
This should update the cookie when clicked and also be able to set the values from the cookie.
function updateCookie($input) {
var cookieObject = getCookieObject();
var inputName = $input.attr('name');
cookieObject[inputName] = $input.attr('value');
var jsonString = JSON.stringify(cookieObject);
document.cookie = 'cookieObject=' + jsonString;
console.log(jsonString);
}
function setFromCookie(){
var cookieObject = getCookieObject();
for(var inputName in cookieObject)
if(cookieObject.hasOwnProperty(inputName))
$(`.input[name="${inputName}"]`).prop('checked', cookieObject[inputName]);
}
function getCookieObject() {
var nameValueArray = document.cookie.split('=');
var cookieObject = {};
if(nameValueArray.length >= 2)
cookieObject = JSON.parse(nameValueArray[1]);
return cookieObject;
}
$('.input').each(function() {
var $this = $(this);
$this.on('click', function() {
$this.attr('value', String($this.is(':checked')))
updateCookie($this);
});
});
Although I would recomend you to use a URLSearchParams object to encode and decode the parameters, since you are relying on the fact that "=" is not inside the JSON string.

jQuery not getting changed input value

Ive got a button with id 'filter' and also two input fields:
<input type="text" name="Status" value="{{ $Status }}">
<input type="text" name="CusJobNum" value="{{ $CusJobNum }}">
Then I have this jQuery script
$(document).on('click', '#filter', function(){
var url = 'JobsByDate/?';
$('input').each(function(){
var a = $(this).attr('name');
var b = $(this).attr('value');
if(!(b == ''))
url = url + '&'+a+'='+b;
});
window.location = url;
});
The code is only getting the default value for the input even if i make a change to the field. Does anyone know why?

Use val() to get the value, as of now you are reading its attribute. the method .attr() is used to get attribute value
var b = $(this).val();
OR, Go native
var b = this.value;

You are using attr() method to get the value which always return the attribute value in the markup. You should use val() method to get the current value of the element.
var b = $(this).val();

Use val() to get value of input.
$(document).on('click', '#filter', function(){
var url = 'JobsByDate/?';
$('input').each(function(){
var a = $(this).attr('name');
var b = $(this).val();
if(!(b == ''))
url = url + '&'+a+'='+b;
});
window.location = url;
});

jquery not able to change input type value

i am trying to put onload default data on below field using jquery. But its value is not getting set on this field. I am using daterangepicker.js also. tried using .text() alsno but it is also not workning
<div class="large-4 columns crawl_date_outer_box">
<span>CRAWL DATE</span> <input type="text" id="dateRange"
class="date" placeholder="Choose a range"
onClick="dateFilterSelected()">
</div>
my jquery code :
function onloadDate(){
var d1 = new Date();
d1.setDate(d1.getDate()-30);
var date1=dateFormat(d1,"MM/dd/yyyy");
var d = new Date();
d.setDate(d.getDate()-30);
var date2=dateFormat(d,"MM/dd/yyyy");
var dateselected1=date1+"-"+date2;
var presetFromDate = getPresetFilters("fromDate");
var presetToDate = getPresetFilters("toDate");
var presetDateOption = getPresetFilters("dateOption");
console.log(d1,d,date1,date2);
if(sessionStorage.getItem("onloadDate") == null || sessionStorage.getItem("onloadDate") == undefined || sessionStorage.getItem("onloadDate") == "")
{
dateOption = "DateRange";
$('#dateRange').val(dateselected1);
sessionStorage.setItem("onloadDate","true");
console.log("gluing" + dateselected1);
applyFiltersOnLoad();
console.log("filter data with date"+sessionStorage.getItem("filterData"));
}
else{
$('#dateRange').val(dateselected1);
}
}

please check your function name i think it will be dateFilterSelected()
function dateFilterSelected(){
//some code
}

javascript click function not working on form generated in php

I have a form created using echo command in php. It is being displayed correctly. I have a javascript which detects click on radio button of form and displays the hyperlink/anchor corresponding to each button group, which is not working.
But if I create the form in html only without any php, it works perfectly. please HELP.
Form creation
echo("<form name ='input' action = 'result.php' method = 'POST'>");
while($row = mysqli_fetch_array($result,MYSQLI_NUM))
{
echo(($i+1)." ".$row[1]."<br>");
echo("
<input type = 'radio' value = $row[2] name = '$i'>$row[2]&nbsp&nbsp&nbsp&nbsp
<input type = 'radio' value = $row[3] name = '$i'>$row[3]<br>
<input type = 'radio' value = $row[4] name = '$i'>$row[4]&nbsp&nbsp&nbsp&nbsp
<input type = 'radio' value = $row[5] name = '$i'>$row[5]&nbsp&nbsp
<a id='$i' href='javascript:clear($i)'>Reset</a><br>");
$i++;
$z[]=$row[6];
}
SCRIPT
$('input:radio').click(function() {
var n = $(this).attr('name');
var k ='#' + n;
alert($(this).attr('name'));
$(k).show(400);
});

You can try changing $('input:radio') to $('input[type="radio"]').
Try this
$('input[type="radio"]').on('click', function() {
var n = $(this).attr('name');
var k ='#' + n;
alert($(this).attr('name'));
$(k).show(400);
});

$('body').on('click','input:radio',(function() {
var n = $(this).attr('name');
var k ='#' + n;
alert($(this).attr('name'));
$(k).show(400);
});
When clicking on dynamically created elements you need to use event delegation.

Hmm... your problem is that $row array should be with curly brackets because you're in double quotes
echo("<form name ='input' action = 'result.php' method = 'POST'>");
while($row = mysqli_fetch_array($result,MYSQLI_NUM))
{
echo(($i+1)." ".$row[1]."<br>");
echo("
<input type = 'radio' value = '{$row[2]}' name = '$i'>{$row[2]}&nbsp&nbsp&nbsp&nbsp
<input type = 'radio' value = '{$row[3]}' name = '$i'>{$row[3]}<br>
<input type = 'radio' value = '{$row[4]}' name = '$i'>{$row[4]}&nbsp&nbsp&nbsp&nbsp
<input type = 'radio' value = '{$row[5]}' name = '$i'>{$row[5]}&nbsp&nbsp
<a id='$i' href='javascript:clear($i)'>Reset</a><br>");
$i++;
$z[]=$row[6];
}

not changing textbox value from ui and unable to display

taking value in 1st textbox and want to display it in 2nd..
1st <input type="text" value=" " id = "marks1" name = "marks1" onblur = "myFunction('marks1')" />
2nd <input type="text" value=" " id = "marks2" name = "marks1" disabled = "disabled" />
and on oblur I am calling a function. Whenever I change the value from UI, on function call I am getting the old value i.e. ' ' instead of changed value.
in the variable "value" the old value which i am getting, i am unable to display it on 2nd textbox.
function myFunction( txtname )
{
alert("call");
var txtobj = document.getElementsByName(txtname);
var value = txtobj[0].value;
alert("my value : "+value);
txtobj[1].value = value;
}
I know the code is okay, but it is not working at me. Is there any other way?

Works for me:
function myFunction(element)
{
var txtobj = document.getElementsByName(element);
var value = txtobj[0].value;
txtobj[1].value = value;
}​
http://jsfiddle.net/pwTwB/1/
Are you getting an error?

Try it this way:
function myFunction( txtname )
{
var txtobj = document.getElementById(txtname);
var target = document.getElementById("marks2");
target.value = txtobj.value;
}

Here is a simple way to set the next textbox's value.
function moveText(ele){
document.getElementById("marks2").value = ele.value;
}
Then use the following in your html markup
<input type="text" id="marks1" onblur="moveText(this)" />
<input type="text" id="marks2" disabled="disabled" />