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>
Related
Here is the checklist radio button code I am using right now, I would like to convert it into a checklist with submit button. Currently, selecting one option will filter the result instantly, but i want to select multiple options and click submit button to get result. I want to use it without effecting the existing functions, as an addon feature.
In short it should allow to select more than one option at a time and submit.
Someone give me an example on how to do this ?
I am trying to learn JQuery and javascript, and need someone's help.
I tried but couldn't get a working result.
I want to use this method
<form>
<ul>
Brand
<li><input name="Samsung" type="checkbox" value="Samsung" /> Samsung</li>
<li><input name="OnePlus" type="checkbox" value="OnePlus" /> OnePlus</li>
<li><input name="Apple" type="checkbox" value="Apple" /> Apple</li>
</ul>
<ul>
RAM
<li><input name="1GB" type="checkbox" value="1GB" /> 1GB</li>
<li><input name="2GB" type="checkbox" value="2GB" /> 2GB</li>
</ul>
<div><button id="apply">Apply</button> <button id="apply">Clear</button></div>
</form>
So that the filter will not apply automatically, this funtion is for mobile pages.
and in PC, the regular auto filter will work.
Example image attached
<h3>Sort</h3>
<div class="list-group-item checkbox">
<label for="radio1">
<input type="radio" id="radio" class="common_selector brand" name="radio" value="Samsung"> Samsung
</label>
<label>
<input type="radio" class="common_selector brand" name="radio" value="Apple" > Apple
</label>
<label>
<input type="radio" class="common_selector brand" name="radio" value="Nokia" > Nokia
</label>
<label>
</div>
The following JQuery function is capturing data from this checklist
<script>
$(document).ready(function(){
filter_data();
function filter_data()
{
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var minimum_price = $('#hidden_minimum_price').val();
var maximum_price = $('#hidden_maximum_price').val();
var brand = get_filter('brand');
var sort = get_filter('sort');
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, brand:brand, sort:sort},
success:function(data){
$('.filter_data').html(data);
}
});
}
function get_filter(class_name)
{
var filter = [];
$('.'+class_name+':checked').each(function(){
filter.push($(this).val());
});
return filter;
}
$('.common_selector').click(function(){
filter_data();
});
$('#price_range').slider({
range:true,
min:1000,
max:95000,
values:[1000, 95000],
step:500,
stop:function(event, ui)
{
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
$('#hidden_minimum_price').val(ui.values[0]);
$('#hidden_maximum_price').val(ui.values[1]);
filter_data();
}
});
});
</script>
I tried the following code, but it didn't work.
<form>
<input type="checkbox" value="Samsung"> Samsung
<input type="checkbox" value="Apple"> Apple
<input type="button" id="apply" class="common_selector brand" value="Submit">
</form>
$('#apply').click(function(){
filter_data();
});
In the html, convert the radiobuttons to checkboxes. Then create the Apply button. In the script, connect the click event of the Apply button to the filter_data function.
<form>
<input type="checkbox" class="brand" id="samsung" value="Samsung"> Samsung
<input type="checkbox" class="brand" id="apple" value="Apple"> Apple
<button id="apply" class="common_selector brand">Apply</button>
</form>
The script would then be
$('#apply').click(function(){
filter_data();
});
In place of "$('#apply')" you will include a selector for the button, which can be based on the identifier (as above).
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/
I have a checkbox but has the value assigned to the item's name. Now i have this hidden field which has the value assigned to the item's price. now when i run my jquery using the hidden field to calculate the sum of the selected items, it doesn't work. It works the other way around when i assign the price and calc ID to the checkbox and not the hidden field.
Here's my jquery:
<script type="text/javascript">
function calcscore(){
var score = 0;
$(".calc:checked").each(function(){
score+=parseInt($(this).val(),10);
});
$('#price').text(score.toFixed(2));
$("input[name=sum]").val(score)
}
$().ready(function(){
$(".calc").change(function(){
calcscore()
});
});
</script>
And my html:
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>
The Title
</label>
<input type="hidden" name="title8" value="250">
</li>
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>The Title
</label>
<input type="hidden" name="title8" value="150">
</li>
<p>Total: PHP <span id="price">0</span></p>
Any insight will be greatly appreciated. Thanks
Your code should be more like the solution below and check how it would be working on jsfiddle: https://jsfiddle.net/yehiaawad/wwtwmaLv/
Your HTML:
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>
The Title
<input type="hidden" name="title8" value="250">
</label>
</li>
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>The Title
<input type="hidden" name="title8" value="150">
</label>
</li>
<p>Total: PHP <span id="price">0</span></p>
Your JS
function calcscore(){
var score = 0;
var checked=$(".calc:checked ~ input[type=hidden]").each(function(){
score+=parseInt($(this).val());
});
$('#price').text(score.toFixed(2));
}
$(document).ready(function(){
$(".calc").change(function(){
calcscore()
});
});
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.
I am having some difficulty in using the jQuery Validator plugin. I have a list of checkboxes with different name attributes and I can't seem to figure out how to ensure that at least one of them has been checked. Everything that I find on Google seems to only work when the name attribute is the same.
Here is some sample code (updated):
<ul id="email_lists">
<li>
<input name="checkbox1" type="checkbox" /> List 1
</li>
<li>
<input name="checkbox2" type="checkbox" /> List 2
</li>
<li>
<input name="checkbox3" type="checkbox" /> List 3
</li>
<li>
<input name="checkbox4" type="checkbox" /> List 4
</li>
</ul>
I want to make sure that at least one of those is checked. Unfortunately, I cannot make the names the same as it is form that submits to a third-party email marketing application and it is expecting specific name attributes for these checkboxes.
Update
I am aware of how to do this using plain jQuery, but I would prefer to use the jQuery Validator plugin since that is how all of the other validation on the page is done.
I can group those checkboxes using jQuery by saying $('#email_lists li');, but I'm not really sure how to use something like that and tell the jQuery Validator plugin to use that as a group.
Assuming that you can give the checkboxes a class name (the jQuery needs something to work with):
<input class="validationGroupOne" name="checkbox1" type="checkbox" />
<input class="validationGroupOne" name="checkbox2" type="checkbox" />
<input class="validationGroupOne" name="checkbox3" type="checkbox" />
<input class="validationGroupOne" name="checkbox4" type="checkbox" />
You should be able to plug in the .validationGroupOne class-selector in place of the, usual, name attribute.
This was my solution :-)
Use:
<div id="list">
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
</div>
<input type="hidden" name="the_real_field_name" />
Then in jquery validate plugin block:
rules : {
chkbox: "required"
},
Then store the values as an array into a single hidden field like:
function updateInput() {
var allVals = [];
$('#list :checked').each(function() {
allVals.push($(this).val());
});
$('#the_real_field_name').val(allVals);
}
$(function() {
$('#list input').click(updateInput);
updateInput();
});