Develop Reference

json record from javascript, espace empty record

I wish to record input into my form in JSON array, but I don't know why it records empty items with "{}" and that's bug my view form when I want to use it after.
My javascript code :
function update_CF_Data(CF_SortablesForm){
var mySelector = $("#cf-sortables-form");
var data_array = new Array();
$("#cf-sortables-form :input").not("#cf-sortables-form :input[class=optionprix]").each(function(){
var optionPrix = $(this).siblings("input.optionprix").val();
var item = {};
item['name'] = $(this).attr('name');
item['value'] = $(this).attr('value');
if ($(this).hasClass('optionname')){
item['optionprix'] = optionPrix;
}
data_array.push(item);
});
var sortableContent = JSON.stringify(data_array);
$('#custom_fields').val(sortableContent);
};
The html form :
<form id="cf-sortables-form">
<ul>
<li class="ui-state-default">
<small>Radio Buttons</small>
<p><input class="cf-required-checkbox" checked="checked" type="checkbox" name="required---4969523" id="required---4969523"> <label for="required---4969523">Champs Obligatoire</label></p>
<input type="text" name="radio-buttons-label---4969523___required" value="Utilisateurs :">
<ul id="cf-radio-buttons" class="ui-sortable">
<li class="ui-state-default">
<input type="text" class="optionname" name="single-radio-button---4969523" value="1 ou 2">
<img src="images/icon-euro.png" alt="Prix" width="16" height="16">
<input type="text" class="optionprix" name="single-radio-button---4969523" value="0">
</li>
</ul>
<button class="cfButton button" data-type="single-radio-button"><i class="booked-icon booked-icon-plus"></i> Radio Button</button>
</li>
<li class="ui-state-default">
<small>Checkboxes</small>
<p><input class="cf-required-checkbox" checked="checked" type="checkbox" name="required---8940009" id="required---8940009"> <label for="required---8940009">Champs Obligatoire</label></p>
<input type="text" name="checkboxes-label---8940009___required" value="Options Payantes :">
<ul id="cf-checkboxes" class="ui-sortable">
<li class="ui-state-default">
<input type="text" class="optionname" name="single-checkbox---8940009" value="Option 1" optionprix="5">
<img src="images/icon-euro.png" alt="Prix" width="16" height="16">
<input type="text" class="optionprix" name="single-checkbox---8940009" value="5">
</li>
</ul>
<button class="cfButton button" data-type="single-checkbox"><i class="booked-icon booked-icon-plus"></i> Checkbox</button>
</li>
<li class="ui-state-default">
<small>Paragraphe de texte</small>
<p><input class="cf-required-checkbox" checked="checked" type="checkbox" name="required---6402519" id="required---6402519"> <label for="required---6402519">Champs Obligatoire</label></p>
<input type="text" name="paragraph-text-label---6402519___required" value="Remarque éventuelle :">
</li>
</ul>
</form>
The JSON record array :
[{\"name\":\"required---4969523\",\"value\":\"on\"},{\"name\":\"radio-buttons-label---4969523___required\",\"value\":\"Utilisateurs :\"},{\"name\":\"single-radio-button---4969523\",\"value\":\"1 ou 2\",\"optionprix\":\"0\"},{},{\"name\":\"required---8940009\",\"value\":\"on\"},{\"name\":\"checkboxes-label---8940009___required\",\"value\":\"Options Payantes :\"},{\"name\":\"single-checkbox---8940009\",\"value\":\"Option 1\",\"optionprix\":\"5\"},{},{\"name\":\"required---6402519\",\"value\":\"on\"},{\"name\":\"paragraph-text-label---6402519___required\",\"value\":\"Remarque éventuelle :\"}]
I search by analysing each input in the form but I still don't know why it record empty array.
Perhaps I can find a way to espace / avoid the record if item equal {} ?

Problem fixed after found my problem was comming from "button".
I don't know why but the javascript recorded each "button" as an empty object, so I just added a new .not condition on the jquery to filter "button" and that's ok.
$("#cf-sortables-form :input").not("#cf-sortables-form :input[class=optionprix]").not("#cf-sortables-form :button").each(function(){
You can check this jsfiddle =>
http://jsfiddle.net/q8gwcor0/

Modify text of next element from id

My HTML:
<li>
<input type="checkbox" id="check-1">
<label for="check-1">foo</label>
</li>
I am trying to change "foo" to "bla" with this JS code:
$("#check-1 label").text("bla");
but nothing happens and I am getting no errors. I also tried with :first-child.
Any ideas?

You can use this
$('label[for=check-1]').text('bla');

The label is not a child of the input. It's the next element:
$("#check-1").next().text('bla');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<input type="checkbox" id="check-1">
<label for="check-1">foo</label>
</li>

In input there is not child elements, you can use $.next to get next element after input
$("#check-1").next('label').text('bla');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<input type="checkbox" id="check-1">
<label for="check-1">foo</label>
</li>

try this
$("#check-1 + label").text("bla");

Getting label text of checkbox and appending to div

Working on revamping some old code and needing some help on this last addition. Basically can have a variable number of checkboxes and need to get the labels text to any of those checkboxes and append that text to another div. Have rewritten this a ton of times and used a lot of others code but nothing seems to be working. Have seen several similar questions on here but none of those have worked for a solution to this problem.
Problem:
Get a labels text associated to it's input checkbox. Then once that text value is gathered append it to a separate div.
Note:
The checkboxes have an ID and a VALUE that are the same because of some different code versions just trying to get them to work. Would like a solution using VALUE only.
HTML:
<a cid="38" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="38" id="38">
<label for="38">Category ONE</label>
</div>
</a>
<a cid="14" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="14" id="14">
<label for="14">Category TWO</label>
</div>
</a>
<div id="labelName"></div>
JS:
$(".cat_filter").live('click', function() {
$(this).find("input:checkbox").attr("checked", true);
var labelName = $(this).find("label[for='"+$(this).attr("id")+"']").text();
labelName.appendTo('#labelName');
});
Fiddle:
http://jsfiddle.net/wfuller/o25z9w0f/1/
Any help would be greatly appreciated.

So this should solve your problem:
$(".cat_filter").on('click','input',function() {
//On click on an input field. if this isn't OK tell me and I will change it again.
$('#labelName').html($('label[for='+$(this).prop('id')+']').html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a cid="38" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="38" id="38">
<label for="38">Category ONE</label>
</div>
</a>
<a cid="14" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="14" id="14">
<label for="14">Category TWO</label>
</div>
</a>
<div id="labelName"></div>
Greetings from Vienna

var nodeList = document.querySelectorAll('input[type ="checkbox"]');
var div = document.getElementById('myDiv');
for (node in nodeList) {
div.innerHTML += node.text; //or label if you set that attribute on the element
}
Does not rely on jQuery

Jquery get array of input element values within a common parent

I have a jquery application where I am templating an html block that contains 3 textfields. I need to get the values of the text fields within a specific block. the identifiers are replicated in all blocks.
Sample Code
<div>
<div class="htmlBlock">
<ul>
<li>
<input class="myInput1" type="text">
<input class="myInput2" type="text">
<input class="myInput3" type="text">
</li>
<li>
<input class="myInput1" type="text">
<input class="myInput2" type="text">
<input class="myInput3" type="text">
</li>
<li>
<input class="myInput1" type="text">
<input class="myInput2" type="text">
<input class="myInput3" type="text">
</li>
</ul>
<button class="clickMe">Click to get values of this block</button>
</div>
<div class="htmlBlock">
<ul>
<li>
<input class="myInput1" type="text">
<input class="myInput2" type="text">
<input class="myInput3" type="text">
</li>
</ul>
<button class="clickMe">Click to get values of this block</button>
</div>
</div>
When I click the .clickMe button I want to call $('.myInput').val() and get the value only within the block that the button is located.

$('button.clickMe').on('click', function() {
var values = $(this).closest('.htmlBlock').find('input[type="text"]').map(function(){
return this.value;
}).get();
});

You can do the following:
$('button.clickMe').on('click', function() {
var block = $(this).closest('.htmlBlock');
var inputs = block.find('input[type="text"]');
// .myInput1 values as an array.
var myInput1Vals = block.find('.myInput1').map(function() {
return this.value;
});
// Do what you want to do
});
I didn't use $('.myInput').val(), since you have different classes on each input. But you can loop through them, do whatever you want with them and they will all be localized within that block.
jsfiddle
This fiddle converts it to an array that is not a jQuery object using .toArray() after the .map.

Multiple checkbox values search javascript

I have a list of keywords, and I've created a checkbox for each. My template has a form wrapping the content, so I can't have a nested form around the checkbox list.
How can I send the selected checkbox values to my search results page?
The form that wraps the content doesn't have any actions or methods applied:
<form id="BoostMasterForm" runat="server">
This is an example of the HTML markup of my checkbox list (the checkboxes will be different depending on the keywords):
<div class="checkboxes">
<ul>
<li>
<input type="checkbox" name="search" class="options" value="one">
<label>one</label>
</li>
<li>
<input type="checkbox" name="search" class="options" value="two">
<label>two</label>
</li>
<li>
<input type="checkbox" name="search" class="options" value="three">
<label>three</label>
</li>
</ul>
<input type="submit" value="Submit"/>
</div>
How can I use javascript or jQuery to submit the values of the multiple checkbox selections and on submit action them to the following URL: '/imagery/image-search.aspx'
The resulting URL for a search where option 1 and 3 are submitted should be: '/imagery/image-search.aspx?search=one%20three'
I'm using this javascript that I found on another post, however I need it to append the form an the action and the method. My website is ASP, where this post is for a PHP site:
Sending multiple checkbox options
$('.options').click(function() {
var selectedItems = new Array();
$(".checkboxes input:checkbox[name=search]:checked").each(function() {selectedItems.push($(this).val());});
var data = selectedItems.join('|');
$("#opts").val(data);
});
If anyone can help, it'd be greatly appreciated.
Cheers, JV

This works for your example.
$('input[type=submit]').on('click', function(evt) {
var selectedValues = [];
var url = '/imagery/image-search.aspx?search=';
$('input[type=checkbox]:checked').each(function() {
selectedValues.push($(this).val());
});
url += selectedValues.join(' ');
window.location = url;
});​

I am still not clear. But here is a code where you can build an string and pass it
<script type="text/javascript">
function fnc()
{
elements=document.getElementById("BoostMasterForm").elements;
str="";
for(i=0;i<elements.length;++i)
{
if(elements[i].type=='checkbox' && elements[i].checked)
str=str+elements[i].value;
}
alert(str);
//alert(window.location.href+'?str='+str);
//document.getElementById("aform").submit();
}
</script>
<form id="BoostMasterForm" onsubmit="fnc()">
<div class="checkboxes">
<ul>
<li>
<input type="checkbox" id="search1" name="search" class="options" value="one">
<label>one</label>
</li>
<li>
<input type="checkbox" id="search2" name="search" class="options" value="two">
<label>two</label>
</li>
<li>
<input type="checkbox" id="search3" name="search" class="options" value="three">
<label>three</label>
</li>
</ul>
<input type="submit" value="Submit"/>
</div>
</form>