On my website the amount value is based on user's Radio Button choice.
Users can also enter a bigger amount than the one proposed, so the minimum amount has to be dynamically checked.
With JQuery Validation Engine, I would like to set this value:
integer[min[xx]]
Here is the code:
<script>
jQuery(document).ready(function($) {
$('#id1').click(function(){
document.getElementById('amount').value = 50;
});
$('#id2').click(function(){
document.getElementById('amount').value = 17;
});
});
</script>
HTML:
<label class='label-radio'>
<input type='radio' name='invoice' id='id1' value='id1'>
Choice 1
</label>
<label class='label-radio'>
<input type='radio' name='invoice' id='id2' value='id2'>
Choice 2
</label>
<label for='amount'>Amount
<input id='amount' name='amount' type='text' class='validate[required,integer[min[xx]]]'>
</label>
You can see a basic pattern of the source code here: Codepen
Is it possible to do this with JQuery?
Thanks for your help.
For this you need to add dynamic rule, you can see working example here
https://jsfiddle.net/dipmala/x163rbwk/15/
HTML Code
<form name="myForm">
<label class='label-radio'>
<input type='radio' name='invoice' id='id1' class='radioclick' data-val='50' value='id1'>
Choice 1
</label>
<label class='label-radio'>
<input type='radio' name='invoice' id='id2' class='radioclick' data-val='17' value='id2'>
Choice 2
</label>
<label for='amount'>Amount
<input id='amount' name='amount' type='text' >
<input type="submit">
</form>
Javascript code
$("form").validate({
rules: {
amount: {required: true, min: 1}
} });
$('.radioclick').click(function(){
var mx = parseInt($(this).attr("data-val"));
$("#amount").rules("add", {
min: mx
});
});
Maybe there is a better/cleaner way, but it works:
Javascript code
var $total;
jQuery(document).ready(function($) {
$(function() {
var $signupForm = $( '#PaypalDiv' );
$signupForm.validationEngine();
});
$('#id1').click(function(){
$total= 50;
document.getElementById('amount').value = $total;
});
$('#id2').click(function(){
$total = 17;
document.getElementById('amount').value = $total;
});
});
function check_min(field, options){
if(parseFloat(field.val()) < $total ){
return "Cannot be lower than "+$total;
}
}
HTML code
<form action='#' method='post' id='PaypalDiv'>
<label class='label-radio'>
<input type='radio' name='invoice' id='id1' value='id1'>
Choice 1
</label>
<label class='label-radio'>
<input type='radio' name='invoice' id='id2' value='id2'>
Choice 2
</label>
<label for='amount'>Amount
<input id='amount' name='amount' type='text' class='validate[required,custom[number],funcCall[check_min[amount]]]'>
</label>
<input type="submit">
</form>
Related
We have a form and need to iterate over some elements to get the final sum to put in a "total" element.
E.g., here is a working starter script. It doesn't NOT iterate over the other ones. It does NOT consider the elements "item*", below, yet but should. Keep reading.
<script>
$( document ).ready(function() {
$('#taxsptotal').keyup(calcgrand);
$('#shiptotal').keyup(calcgrand);
$('#disctotal').keyup(calcgrand);
function calcgrand() {
var grandtot = parseFloat($('#subtotal').val(), 10)
+ parseFloat($("#taxsptotal").val(), 10)
+ parseFloat($("#shiptotal").val(), 10)
- parseFloat($("#disctotal").val(), 10)
$('#ordertotal').val(grandtot);
}
});
</script>
We are adding more to this. Think of having many items in a cart and each one has the same elements for the following where "i" is a number designating an individual item.
<!-- ordertotal = sum of #subtotal, #taxptotal, #shiptotal and #disctotal -->
<input type="text" id="ordertotal" name="ordertotal" value="106.49">
<input type="text" id="taxsptotal" name="taxsptotal" value="6.72">
<input type="text" id="shiptotal" name="shiptotal" value="15.83">
<input type="text" id="disctotal" name="disctotal" value="0.00">
<!-- sum of the cart "itemtotal[i]" -->
<input type="text" id="subtotal" name="subtotal" value="83.94">
<!-- cart items
User can change any itemprice[i] and/or itemquantity[i]
itemtotal[i] = sum(itemquantity[i] * itemprice[i])
-->
<input type="text" name="itemtotal[1]" value="8.97" />
<input type="text" name="itemquantity[1]" value="3" />
<input type="text" name="itemprice[1]" value="2.99" />
<input type="text" name="itemtotal[2]" value="4.59" />
<input type="text" name="itemquantity[2]" value="1" />
<input type="text" name="itemprice[2]" value="4.59" />
<input type="text" name="itemtotal[3]" value="0.99" />
<input type="text" name="itemquantity[3]" value="10" />
<input type="text" name="itemprice[3]" value="9.90" />
(1) User can change any itemprice[i] and/or itemquantity[i], so each needs a keyup. I can do that in php as it iterates over the items.
(2) These elements will have a $('.itemtotal[i]').keyup(calcgrand); (Or function other than calcgrand, if needed) statement, too. That keyup can be added by the php code as it evaluates the items in the cart.
(3) When an element is changed, then the script should automatically (a) calculate the $('[name="itemtotal[i]"]').val() and (b) replace the value for $('[name="itemtotal[i]"]').val().
(4) Then, the script above will use the $('[name="itemtotal[i]"]').val() to (a) replace the #subtotal value and (b) use that value in the equation.
Can someone help me with this? I am stuck on how to iterate over the [i] elements.
p.s. Any corrections/enhancements to the above code is appreciated, too.
Add a custom class to the desired inputs to sum:
HTML:
<input type="text" class="customclass" name=itemtotal[1] value="8.97" />
<input type="text" class="customclass" name=itemquantity[1] value="3" />
<input type="text" class="customclass" name=itemprice[1] value="2.99" />
JS:
var sum = 0;
$.each('.customclass',function(i, item){
sum = sum + Number($(this).val());
})
alert(sum);
if you for example group your inputs by giving them a class, or have each group in a div like so:
<!-- ordertotal = sum of #subtotal, #taxptotal, #shiptotal and #disctotal -->
<input type="text" id="ordertotal" name="ordertotal" value="106.49">
<input type="text" id="taxsptotal" name="taxsptotal" value="6.72">
<input type="text" id="shiptotal" name="shiptotal" value="15.83">
<input type="text" id="disctotal" name="disctotal" value="0.00">
<!-- sum of the cart "itemtotal[i]" -->
<input type="text" id="subtotal" name="subtotal" value="83.94">
<!-- cart items
User can change any itemprice[i] and/or itemquantity[i]
itemtotal[i] = sum(itemquantity[i] * itemprice[i])
-->
<div class="group">
<input type="text" name="itemtotal[1]" value="8.97" />
<input type="text" name="itemquantity[1]" value="3" />
<input type="text" name="itemprice[1]" value="2.99" />
</div>
<div class="group">
<input type="text" name="itemtotal[2]" value="4.59" />
<input type="text" name="itemquantity[2]" value="1" />
<input type="text" name="itemprice[2]" value="4.59" />
</div>
<div class="group">
<input type="text" name="itemtotal[3]" value="0.99" />
<input type="text" name="itemquantity[3]" value="10" />
<input type="text" name="itemprice[3]" value="9.90" />
</div>
Then you could do the following in javascript:
function calcSubTotal() {
$('[name^="itemtotal"]').each(function(i){
var sum = 0;
$('[name^="itemtotal"]').each(function(i){
sum += $(this).val();
});
$('#subtotal').val(sum);
});
}
$('.group').each(function(i) {
var total = $(this).find('[name^="itemtotal"]');
var qnt = $(this).find('[name^="itemquantity"]');
var price = $(this).find('[name^="itemprice"]');
total.keyup(function(e){
price.val(total.val() * qnt.val());
calcSubTotal();
});
qnt.keyup(function(e){
price.val(total.val() * qnt.val());
calcSubTotal();
});
});
$("[name^='itemprice'], [name^='itemquantity']").keyup(function(){
var input_name = $(this).attr('name');
var temp_name_split = input_name.split(/[\[\]]+/);
var temp_total = parseInt($('[name="itemquantity['+temp_name_split[1] +']"]').val()) * parseFloat($('[name="itemprice['+temp_name_split[1] +']"]').val());
$('[name="itemtotal['+temp_name_split[1]+']"]').val(temp_total.toFixed(2));
var total = 0;
$("[name^='itemtotal']").each(function() {
total += parseFloat($(this).val());
});
$('#subtotal').val(total.toFixed(2));
});
I prefer to get checked checkboxes from a specific checkbox group, depending on which button I have clicked, I used $('input[name="' + groupName + '"]:checked'). This will ensure that the checked checkboxes from only the coffee or animals checkbox group are selected. But it's not working as I expected.
<body>
<div>
<input type="checkbox" value="Lion" name="animals" checked />Lion<br>
<input type="checkbox" value="Tiger" name="animals" />Tiger<br>
<input type="checkbox" value="Elephant" name="animals" />Elephant<br>
<input type="checkbox" value="Girafee" name="animals" />Girafee<br>
<input type="submit" id="__mainAnimals" />
<br><br><br><br><br><br>
<input type="checkbox" value="Coffe" name="drinks" checked />Coffe<br>
<input type="checkbox" value="Tea" name="drinks" />Tea<br>
<input type="checkbox" value="Milk" name="drinks" />Milk<br>
<input type="checkbox" value="Mocha" name="drinks" />Mocha<br>
<input type="submit" id="__mainDrinks" />
</div>
<div id="__DIVresult"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#__mainAnimals').click(function () {
getSelectedCheckBoxes('animals');
});
$('#__mainDrinks').click(function () {
getSelectedCheckBoxes('drinks');
});
var getSelectedCheckBoxes = function (groupName) {
var result = $('input[name="' + groupName + '"]:checked');
if (result.length > 0) {
var resultString = result.length + " checkboxe(s) checked<br/>";
result.each(function () {
resultString += $(this).val() + "<br/>";
});
$('__DIVresult').html(resultString);
}
else {
$('__DIVresult').html("No checkbox checked");
}
};
});
</script>
</body>
1st id selector is # so $('__DIVresult') should be $('#__DIVresult')
2nd An ID should start with a letter for compatibility
Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.
REF: https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/id
3rd some small update, added two result div, one for animal one for drink:
<hr>
animals Result:
<div id="DIVresultanimals"></div>
<hr>
drinks Result:
<div id="DIVresultdrinks"></div>
Then target them dynamically with $('#DIVresult'+groupName).html(resultString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" value="Lion" name="animals" checked />Lion
<br>
<input type="checkbox" value="Tiger" name="animals" />Tiger
<br>
<input type="checkbox" value="Elephant" name="animals" />Elephant
<br>
<input type="checkbox" value="Girafee" name="animals" />Girafee
<br>
<input type="submit" id="mainAnimals" />
<br>
<br>
<br>
<br>
<br>
<br>
<input type="checkbox" value="Coffe" name="drinks" checked />Coffe
<br>
<input type="checkbox" value="Tea" name="drinks" />Tea
<br>
<input type="checkbox" value="Milk" name="drinks" />Milk
<br>
<input type="checkbox" value="Mocha" name="drinks" />Mocha
<br>
<input type="submit" id="mainDrinks" />
</div>
<hr>
animals Result:
<div id="DIVresultanimals"></div>
<hr>
drinks Result:
<div id="DIVresultdrinks"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#mainAnimals').click(function() {
getSelectedCheckBoxes('animals');
});
$('#mainDrinks').click(function() {
getSelectedCheckBoxes('drinks');
});
var getSelectedCheckBoxes = function(groupName) {
var result = $('input[name="' + groupName + '"]:checked');
if (result.length > 0) {
var resultString = result.length + " checkboxe(s) checked<br/>";
result.each(function() {
resultString += $(this).val() + "<br/>";
});
$('#DIVresult'+groupName).html(resultString);
} else {
$('#DIVresult'+groupName).html("No checkbox checked");
}
};
});
</script>
In your drink and animal section you are not separating the two so when you use your click function it doesn't discriminate between the tow sections. Once you add each one to a class then the button will only call the checked items that are actually checked.
<html>
<form>
<input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Lion" />Lion</br>
<input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Tiger" />Tiger</br>
<input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Elephant" />Elephant</br>
<input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Girafee" />Girafee</br>
<input type="button" id="save_value" name="save_value" value="Save" /></br>
<textarea id="t"></textarea>
</form>
<script>
function updateTextArea() {
var allVals = [];
$('.ads_Checkbox:checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals);
}
$('#save_value').click(function(){
$('.ads_Checkbox:checked').each(function(){
updateTextArea();
});
});
Inside this code I have named each animal and placed them in a class so I could recall them from an array. I hoped this helped.
My code is working fine but is there a way to do this without having my event (onclick) in the HTML form. How can I use an eventlistener on this?
Here is the HTML:
<strong>Select Your fees Options</strong></label><br/>
<input type="checkbox" name="fee" id="exc" value="12000.00" onclick = "updateFee()" required><label>PTA and Excursion and Magazine Fee N12,000.00</label><br>
<input type="checkbox" name="fee" id="fol" value="3000.00" onclick = "updateFee()" ><label>Folder Fee <b>(optional)</b> N3,000.00</label><br>
<input type="checkbox" name="fee" id="ext" value="15000.00" onclick = "updateFee()" ><label>Extra Lesson <b>(optional)</b> N15,000.00</label><br>
<input type="checkbox" name="fee" id="clu" value="15000.00" onclick = "updateFee()"><label>Club <b>(optional)</b> N15,000.00</label><br>
<!--total fee is here-->
<p><b>Total Fee:
<input name="amt" id="amt" class="form-control number" type="text" /> <br>
Here is the JavaScript:
<script>
function updateFee(){
var totFee = 0;
var fee=document.getElementsByName("fee");
for (i = 0; i < fee.length; i++)
{
if (fee[i].checked == true)
{
totFee += parseInt(fee[i].value, 10);
}
}
amount = totFee ;
document.getElementById("amt").value = amount;
}
Thanks!
Use javascript/jQuery
In your case it would be
<strong>Select Your fees Options</strong></label><br/>
<input type="checkbox" name="fee" id="exc" value="12000.00" required><label>PTA and Excursion and Magazine Fee N12,000.00</label><br>
<input type="checkbox" name="fee" id="fol" value="3000.00"><label>Folder Fee <b>(optional)</b> N3,000.00</label><br>
<input type="checkbox" name="fee" id="ext" value="15000.00"><label>Extra Lesson <b>(optional)</b> N15,000.00</label><br>
<input type="checkbox" name="fee" id="clu" value="15000.00"><label>Club <b>(optional)</b> N15,000.00</label><br>
<!--total fee is here-->
<p><b>Total Fee:
<input name="amt" id="amt" class="form-control number" type="text" /> <br>
And then, your script:
With jQuery
$(document).ready(function() {
$('input[name=fee]').on('click', function() {
var fee = 0;
$('input[name=fee]:checked').each(function() {
fee+=parseFloat($(this).val());
});
$('#amt').val(fee);
});
});
Or, without jQuery (using your updateFee function:
// run this script after page finish loading
window.onload = function() {
// get all the checkboxes you want to listen to
var cbs = document.getElementsByName('fee');
// attach click event for each one
for(var i=0; i<cbs.length; i++) {
cbs[i].onclick=updateFee;
}
};
I currently have been working on this code and I can't seem to figure it out. I am planning to make it so that if the radio button is pressed that shipping is not free, that an input field pops up to specifying what the addition cost will be using DOM. I am also trying to figure out how to add text to describe the input field, and to validate the input field.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function myFunction() {
var x = document.createElement("INPUT");
var c = 1;
if (c = 1) {
x.setAttribute("type", "text");
var sp2 = document.getElementById("emailP");
// var br = document.createElement("br");
// sp2.appendChild(br);
// alert("added break");
var sp2 = document.getElementById("emailP");
var parentDiv = sp2.parentNode;
parentDiv.insertBefore(x, sp2);
c++;
alert("Added Text Box");
}
}
</script>
<form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">
<p class="boldParagraph">Upload an Image:</p>
<input type="file" id="pic" accept="image/*" required>
<p class="boldParagraph">Name of seller:</p>
<input class="averageTextBox" type="text" id="seller" value="" required>
<p class="boldParagraph" id = "tip3P">Shipping costs are free:</p>
<input type="radio" name="tip3" value="3" checked /> Yes
<input type="radio" name="tip3" value="4" onclick="myFunction(); this.onclick=null;"/> No
<p class="boldParagraph" id = "emailP">Email of seller:</p>
<input class="averageTextBox" type="email" id="emailAddress" value="" required>
<p class="boldParagraph">Closing date for auction:</p>
<input type="date" id="closeDate" value="" required>
<br><br>
<button>Submit</button>
</form>
</body>
</html>
Create a label element and populate text using innerHTML. and then append to DOM.
Example Snippet:
function myFunction() {
var label = document.createElement("label");
label.innerHTML = "<br>Shipment Cost : ";
var x = document.createElement("INPUT");
var c = 1;
if (c = 1) {
x.setAttribute("type", "text");
var sp2 = document.getElementById("emailP");
// var br = document.createElement("br");
// sp2.appendChild(br);
// alert("added break");
var sp2 = document.getElementById("emailP");
var parentDiv = sp2.parentNode;
parentDiv.insertBefore(x, sp2);
parentDiv.insertBefore(label, x);
c++;
alert("Added Text Box");
}
}
<form action="#" method="post" onsubmit="alert('Your form has been submitted.'); return false;">
<p class="boldParagraph">Upload an Image:</p>
<input type="file" id="pic" accept="image/*" required>
<p class="boldParagraph">Name of seller:</p>
<input class="averageTextBox" type="text" id="seller" value="" required>
<p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
<input type="radio" name="tip3" value="3" checked />Yes
<input type="radio" name="tip3" value="4" onclick="myFunction(); this.onclick=null;" />No
<p class="boldParagraph" id="emailP">Email of seller:</p>
<input class="averageTextBox" type="email" id="emailAddress" value="" required>
<p class="boldParagraph">Closing date for auction:</p>
<input type="date" id="closeDate" value="" required>
<br>
<br>
<button>Submit</button>
</form>
OR
You can keep the text box hidden and show it when user clicks no. Also, apply validations only when no is selected for shipment radio button.
I suggest use jQuery, see the snippet below:
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
var radioButtons = $("[name=tip3]");
radioButtons.on("change", function() {
if ($("[name=tip3]:checked").val() == "3") {
$("#shipmentDetail").hide();
} else {
$("#shipmentDetail").show();
}
})
$("#submit").on("click", function() {
var flag = true;
if ($("[name=tip3]:checked").val() == "4") {
if ($("#shipmentDetail").val() == "") {
flag = false;
alert("enter some value");
}
}
//other validations here
if (flag) {
$("#form").submit()
}
})
#shipmentDetail {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="#" method="post">
<p class="boldParagraph">Upload an Image:</p>
<input type="file" id="pic" accept="image/*" required>
<p class="boldParagraph">Name of seller:</p>
<input class="averageTextBox" type="text" id="seller" value="" required>
<p class="boldParagraph" id="tip3P">Shipping costs are free:</p>
<input type="radio" name="tip3" value="3" checked />Yes
<input type="radio" name="tip3" value="4" />No
<label id="shipmentDetail" for="price">Shipment Cost:
<input id="price" type="text" value="" />
</label>
<p class="boldParagraph" id="emailP">Email of seller:</p>
<input class="averageTextBox" type="email" id="emailAddress" value="" required>
<p class="boldParagraph">Closing date for auction:</p>
<input type="date" id="closeDate" value="" required>
<br>
<br>
<button id="submit">Submit</button>
</form>
replace
alert("Added Text Box");
with:
var additional_fees = prompt("Type in");
x.setAttribute("value", additional_fees)
I have few checkboxes and I want to convert them into dropdown list. I tried something but don't know at the end what to do?
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]">
General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]">
Antique & Collectible Tools
</label>
</p>
</form>
and i tried following jQuery to convert these checkboxes into dropdown list. but don't getting to how to done this successfully.
jQuery(document).ready(function($){
var extra, checkBoxesName,
checkBoxlabel,
checkBoxes = $('.wysija-checkbox-paragraph');
var checkBoxesLabel = $('.wysija-checkbox-label');
checkBoxesName = checkBoxes.find('input').prop('name');
checkBoxlabel = checkBoxes.find('label').text();
checkBoxesLabel.append('<select name="'+checkBoxesName+'">'+extra+'</select>');
$('.wysija-checkbox-paragraph').each(function(n){
var dataText = $(this).find('label').text();
$('select[name='+checkBoxesName+']').append('<option value="'+n+'">'+dataText+'</option>');
});
//checkBoxes.remove();
});
Try this:
var checkBoxes = $('.wysija-checkbox-paragraph'),
checkBoxesLabel = $('.wysija-checkbox-label'),
checkBoxesName = checkBoxes.find('input').prop('name')
$select = $('<select name="' + checkBoxesName + '"></select>').appendTo(checkBoxesLabel);
checkBoxes.each(function (n) {
var dataText = $(this).find('label').text();
var dataValue = $(this).find('input').val();
$select.append('<option value="' + dataValue + '">' + dataText + '</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]" /> General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]" /> Antique & Collectible Tools
</label>
</p>
</form>
Note, that since checkboxes allow to select multiple values, you might want to add multiple attribute to selectbox, in order to allow the same behavior.
jQuery(document).ready(function($){
var extra, checkBoxesName,
checkBoxlabel,
checkBoxes = $('.wysija-checkbox-paragraph');
var checkBoxesLabel = $('.wysija-checkbox-label');
checkBoxesName = checkBoxes.find('input').prop('name');
checkBoxlabel = checkBoxes.find('label').text();
checkBoxesLabel.append('<select name="'+checkBoxesName+'">'+extra+'</select>');
$('.wysija-checkbox-paragraph').each(function(n){
var dataText = $(this).find('label').text();
$('.wysija-checkbox-paragraph').append('<select name="'+checkBoxesName+']" > <option value="'+n+'">'+dataText+'</option></select>');
});
//checkBoxes.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]">
General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]">
Antique & Collectible Tools
</label>
</p>
</form>