Collecting values of multiple checkboxes using jQuery - javascript

For convenience I'm giving the script and the html in one place (instead of separate .js file). After selecting any check checkboxes if I click the "edit" link then the alert keeps repeating in a loop and the no of selected checkboxes are reported as 0 1 2 3 4 5 .... in successive occurences. Anybody's help in this matter will be appreciated.
<!doctype html>
<html>
html>
<head>
<title>Cities</title>
<script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script type = "text/javascript">
var jq = jQuery.noConflict();
var ids = new Array();
jq(document).ready(function () {
jq("#edit").click(function(){
jq('input[name="cid"]:checked').each(function() {
ids.push(parseInt(jq(this).val()));
}); // end checked each
if(ids.length > 0)
alert(ids.length + " cities selected \n"+"their names: "+ids);
else
alert("Please select one or more rows to edit.");
}); // end #edit click
}); // end document ready
function setCityUpdateAction(){
jq("#edit").click();
}
</script>
</head>
<body>
<form name="myform">
<table border=1px>
<tr><th></th>select<th>CityID</th><th>City</th></tr>
<tr><td><input type="checkbox" name="cid" value=1></td>
<td>1</td><td>London</td></tr>
<tr><td><input type="checkbox" name="cid" value=2></td>
<td>1</td><td>New York</td></tr>
<tr><td><input type="checkbox" name="cid" value=3></td>
<td>1</td><td>Paris</td></tr>
<tr><td></td><td></td><td><a id="edit" href="#" onclick="setCityUpdateAction();">edit</a></tr>
</table>
</form>
</body>
</html>

You already have click event handler when you write jq("#edit").click. So you need to get rid of onclick event handler in the <a> tag.
So, it should look like this:
<a id="edit" href="#" >edit</a>
Additionally, you can get rid of function as well due to click event handler already set. So remove below function.
setCityUpdateAction() {
jq("#edit").click();
}

try this:
<!doctype html>
<html>
<head>
<title>Cities</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type = "text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function () {
jq("#edit").click(function(){
var ids = new Array();
jq('input[name="cid"]:checked').each(function() {
ids.push(parseInt(jq(this).val()));
}); // end checked each
if(ids.length > 0)
alert(ids.length + " cities selected \n"+"their names: "+ids);
else
alert("Please select one or more rows to edit.");
setCityUpdateAction()
}); // end #edit click
}); // end document ready
function setCityUpdateAction(){
jq("#edit").click();
}
</script>
</head>
<body>
<form name="myform">
<table border=1px>
<tr><th></th>select<th>CityID</th><th>City</th></tr>
<tr><td><input type="checkbox" name="cid" value=1></td>
<td>1</td><td>London</td></tr>
<tr><td><input type="checkbox" name="cid" value=2></td>
<td>1</td><td>New York</td></tr>
<tr><td><input type="checkbox" name="cid" value=3></td>
<td>1</td><td>Paris</td></tr>
<tr><td></td><td></td><td><a id="edit" href="#">edit</a></tr>
</table>
</form>
</body>
</html>
First declare the ids array inside the jq("#edit").click event, second remove the onclick from a tag and call the setCityUpdateAction function inside your jq("#edit").click event.
I hope this will help you.

Make sure you reset the ids array, Also serialize the form values,
Make sure you name every inputfield! It can be achieved with serializeArray() like this:
var $form = $(form).serializeArray();
$.each($form, function(i, field) {
...
});
Javascript
var jq = jQuery.noConflict();
jq(document).ready(function () {
jq("#edit").click(function(){
var $form = jq(myform).serializeArray();
var ids = new Array();
jq.each($form, function(i, field) {
ids.push(parseInt(field.value)+"-"+field.name);
});
if($form.length > 0)
alert($form.length + " cities selected \n"+"their names: "+ids);
else
alert("Please select one or more rows to edit.");
}); // end #edit click
}); // end document ready
HTML
<form name="myform">
<table border=1px>
<tr><th></th>select<th>CityID</th><th>City</th></tr>
<tr><td><input type="checkbox" name="london" value=1></td>
<td>1</td><td>London</td></tr>
<tr><td><input type="checkbox" name="newyork" value=2></td>
<td>2</td><td>New York</td></tr>
<tr><td><input type="checkbox" name="paris" value=3></td>
<td>3</td><td>Paris</td></tr>
<tr><td></td><td></td><td><a id="edit" href="javascript:;">edit</a></tr>
</table>
</form>
See here how it is done: jsFiddle

Related

How can I remove an element from a form using its ID in JQuery?

Hello and happy new year to everyone :D.
I am currently trying to develop a way to add and delete an input from a form using javascript and jquery.
The problem is i am not familiarized with declaring functions on jquery so I beg for your help because I currently ran out of ideas.
I currently have this.
So the idea is to have 4 buttons in the bottom. Two for add or delete extra inputs for percentages "A", and the other pair to add or delete extra inputs for percentages "B".
I was trying to do it the easy way by declaring four independent functions (i.e addA, removeA, addB, removeB), but i want to achieve this in a few lines. So that's why i opted to declare it as a function with two input parameters. Since i did that the code doesn't work anymore :(
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idesc">
<input type='text' id='idesc_1' value='idesc_1'>
</div>
<div id="edesc">
<input type='text' id='edesc_1' value='edesc_1'>
</div>
<input type="hidden" value="1" id="idinpt">
<input type="hidden" value="1" id="edinpt">
<button id="idadd">Add input for data A</button><button id="idrem">Remove input for data A</button>
<button id="edadd">Add input for data B</button><button id="edrem">Remove input for data B</button>
<script type="text/javascript">
function add(inpnum, inpnam){
var act_id = parseInt($('#'+inpnum).val());
if(act_id<5){ //5 input
var new_id = act_id+1;
var new_input = "<input type='text' id='"+inpnam+"_"+new_id+"' value='"+inpnam+"_"+new_id+"'>";
$('#'+inpnam).append(new_input);
$('#'+inpnum).val(new_id);
}
}
function remove(inpnum, inpnam){
var last_id = $('#'+inpnum).val();
if(last_id>1){
$('#'+inpnam+'_'+last_id).remove();
$('#'+inpnum).val(last_id-1);
}
}
$('#edadd').on('click', add('edinpt','edesc'));
$('#edrem').on('click', remove('edinpt','edesc'));
$('#idadd').on('click', add('idinpt','idesc'));
$('#idrem').on('click', remove('idinpt','idesc'));
</script>
</body>
</html>
Thank you so much!
I edited you html, please see below, jquery codes must be inside the $(function(){
and your syntax in on click function is incorrect.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idesc">
<input type='text' id='idesc_1' value='idesc_1'>
</div>
<div id="edesc">
<input type='text' id='edesc_1' value='edesc_1'>
</div>
<input type="hidden" value="1" id="idinpt">
<input type="hidden" value="1" id="edinpt">
<button id="idadd">Add input for data A</button><button id="idrem">Remove input for data A</button>
<button id="edadd">Add input for data B</button><button id="edrem">Remove input for data B</button>
<script>
$(function(){
$('#edadd').on('click', function(){
add('edinpt','edesc')
});
$('#edrem').on('click', function(){
remove('edinpt','edesc')
});
$('#idadd').on('click', function(){
add('idinpt','idesc')
});
$('#idrem').on('click', function(){
remove('idinpt','idesc')
});
})
</script>
<script type="text/javascript">
function add(inpnum, inpnam){
var act_id = parseInt($('#'+inpnum).val());
if(act_id<5){ //5 input
var new_id = act_id+1;
var new_input = "<input type='text' id='"+inpnam+"_"+new_id+"' value='"+inpnam+"_"+new_id+"'>";
$('#'+inpnam).append(new_input);
$('#'+inpnum).val(new_id);
}
}
function remove(inpnum, inpnam){
var last_id = $('#'+inpnum).val();
if(last_id>1){
$('#'+inpnam+'_'+last_id).remove();
$('#'+inpnum).val(last_id-1);
}
}
</script>
</body>
</html>

How can I have multiple checkboxes appear when initial checkbox is checked (using PHP/Javascript)

I am trying to implement a small part of my program where when an initial checkbox is clicked, it would open multiple checkboxes are opened up for selection. I don't want to use forloop (or dynamically) to create the multiple checkboxes but I need to manually create them.
My program is below and I am not sure why it doesn't work. If someone can kindly pleaes point me to my mistake, I would greatly appreciate. I am not skilled with PHP/JavaScript.
Thanks!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
<script type="text/javascript">
$(document).ready(function() {
//set initial state.
$('#checkbox').val($(this).is(':unchecked'));
$('#checkbox').change(function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
document.myForm.appendChild(box);
hasBox = true;
}
});
});
</script>
</head>
<body>
<p>Click on this paragraph.</p>
<form action="">
<input id="checkbox" name="click" type="checkbox" onclick="check(this)"/>initial checkbox<br>
</body>
</html>
You can also do this with CSS:
.secondary-checkboxes
{
display: none;
}
.primary-checkbox:checked ~ .secondary-checkboxes
{
display: initial;
}
<input type="checkbox" class="primary-checkbox"> Primary checkbox
<br>
<div class="secondary-checkboxes">
<input type="checkbox"> Secondary checkbox 1
<br>
<input type="checkbox"> Secondary checkbox 2
<br>
<input type="checkbox"> Secondary checkbox 3
<br>
</div>
Source: this Stack Overflow question
Your on the right track.
You have a few problems in your code.
1) You forgot to enclose your new checkbox tag within quotation marks.
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
should be:
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
Also note the change from type "chkbox" to "checkbox"
2) To set the initial state for a checkbox I would use the inbuilt prop function in JQuery. For example:
$('#checkbox').prop('checked', false);
rather than your code of:
$('#checkbox').val($(this).is(':unchecked'));
3) The last problem is when you append the new checkbox to the form. The way that i would do this is using JQuery again:
$("#myForm").append(box);
and give the form element an id of "myForm"
Please find below my full code which works to your requirements:
$(document).ready(function() {
//set initial state.
$('#checkbox').prop('checked', false);
$('#checkbox').on('click', function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
$("#myForm").append(box);
hasBox = true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Click on this paragraph.</p>
<form action="" id="myForm">
<input id="checkbox" name="click" type="checkbox"/>initial checkbox<br>
</form>
Hope that you found this useful.

jQuery remove too many fields

I am creating a form where the user can add fields one after the other. For each field I am setting a "remove" button. Each field is in a table, so I give a random id to the table, and pass this id to a removing function doing: $(random-id).remove().
The strange thing is that jQuery is removing all of the tables created by the user, as if the id is not taken into account
Why that can be?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
function delete_field(id)
{
$("#"+id+"").remove();
}
function add_form_field()
{
id = Math.random();
html = '<table id='+id+'>\
<tr><td>Label </td></tr>\
</table>\
\
<button onclick=delete_field('+id+')>remove</button>';
$("form").append(html);
}
</script>
</head>
<body>
<form>
</form>
<button onclick=add_form_field()> Add a field </button>
</body>
</html>
Don't use Math.random, rather increment a number and create ID like: #tab_NN.
Add an ID to your Form Element id=myForm
Delegate click events to dynamically generated delete buttons using .on()
While removing the table that matched the button data-* attribute, delete the button too using .add( this ) (where this stays for the clicked button)
var id = 0;
function delete_field(event){
event.preventDefault();
$("#tab_"+ $(this).data("remove")).add(this).remove();
}
function add_form_field(){
id += 1;
var html = '<table id="tab_'+ id +'">'+
'<tr><td>Label</td></tr>'+
'</table>'+
'<button data-remove="'+id+'" class="remove">remove</button>';
$("#myForm").append(html);
}
$('#addField').on('click', add_form_field);
$('#myForm').on('click', '.remove', delete_field);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm"></form>
<button id="addField"> Add a field </button>
The code above allows you to have changes in the future markup cause it targets a specific ID, but in case your DELETE buttons will always be exactly after table than you can do it without assigning ID's, by simply using .prev("table"):
http://jsbin.com/wuqati/1/edit
function delete_field(event){
event.preventDefault();
$(this).prev("table").add(this).remove();
}
function add_form_field(){
var html = '<table>'+
'<tr><td>Label</td></tr>'+
'</table>'+
'<button class="remove">remove</button>';
$("#myForm").append(html);
}
$('#addField').on('click', add_form_field);
$('#myForm').on('click', '.remove', delete_field);
Math.random() produces a floating point number less than 1 which is invalid for an id. You can use a global variable to keep count of the rows created. Keep in mind that a CSS ID can not start with a digit. So append the number to a string before using it as an ID.
<script>
function delete_field(id)
{
$("#"+id+"").remove();
}
tableID = 1;
function add_form_field()
{
id = 'table-'+tableID;
html = '<table id='+id+'>\
<tr><td>Label </td></tr>\
</table>\
\
<button onclick=delete_field('+id+')>remove</button>';
$("form").append(html);
tableID++;
}
</script>
Why not simplify this by doing something like below.
$(".remover").click(function() {
$(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" placeholder="input One"/> <input type="button" class="remover" value="remove" />
</td> </tr>
<tr>
<td>
<input type="text" placeholder="input Two"/> <input type="button" class="remover" value="remove" />
</td> </tr>
<tr>
<td>
<input type="text" placeholder="input Three"/> <input type="button" class="remover" value="remove" />
</td> </tr>
</table>

Update price shown onchange

I am simply trying to get a price shown, to update on an onchange event. Right now, this is only just showing me both values of the onchange ids I'd just like to have someone click a check box and then it updates the price that was already shown to the new value.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox" id="extras" value="25.00" onChange="calc()">
</td>
<td>
<input type="checkbox" id="rush" value="35.00" onChange="calc()">
</td>
<td>
<input id="total" type="text" value="90.00" />
</td>
</tr>
</table>
</body>
<script type='text/javascript'>
function calc() {
var extras = document.getElementById('extras').value;
var rush = document.getElementById('rush').value;
var result = document.getElementById("total");
result.value = extras + rush;
}
</script>
</html>
You can do:
$('input[type=checkbox]').change(function () {
var val = parseFloat(this.value),
totalVal = parseFloat($('#total').val());
if (this.checked) {
$('#total').val((totalVal + val).toFixed(2));
} else {
$('#total').val((totalVal - val).toFixed(2));
}
});
Fiddle Demo
a non jquery solution could be to check for checked value. You also need to convert the value which is text to float otherwise it won't be a valid sum but just concatenation of strings.
var extrasCB = document.getElementById('extras');
var extras = 0;
if(extrasCB.checked) {
extras = parseFloat( extrasCB.value );
}

Multiple checkbox value will show in textbox

Here is my code :
<body>
<div align="center">
<b>A<input type="checkbox" name="a" id="check" value="a"></b>
<b>B<input type="checkbox" name="b" id="check" value="a"></b>
<b>B<input type="checkbox" name="c" id="check" value="c"></b>
<b>D<input type="checkbox" name="d" id="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>
</body>
I'm trying that: if (more than one) checkbox is selected (or checked) that value will be assigned into the checkbox like "abcd" or "acd" or "bd".For that I have written jQuery
<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
$("#text").val(("#check").val());
}
});
</script>
able to print one txtbox value at a time,but not able to put all checked value in the textbox at a time.
Where I am going wrong ??Any inputs will appreciated.
I may have not understood you correctly, but does this fiddle help you? http://jsfiddle.net/XwGJ9/1/
The change is the javascript:
var $textInput = $('#text');
var $checkBox = $('#checkboxes');
$('input').click(function(){
populateTextInput();
});
function populateTextInput () {
// empty text input
$textInput.val('');
// print out all checked inputs
$checkBox.find('input:checked').each(function() {
$textInput.val( $textInput.val() + $(this).val() );
});
}
Edit: updated
Use this code
$('.check').click(function(){
$("#text").val('');
$(".check").each(function(){
if($(this).prop('checked')){
$("#text").val($("#text").val()+$(this).val());
}
});
});​
​
With this HTML (use class instead of id for abcd)
<div align="center">
<b>A<input type="checkbox" name="a" class="check" value="a"></b>
<b>B<input type="checkbox" name="b" class="check" value="b"></b>
<b>B<input type="checkbox" name="c" class="check" value="c"></b>
<b>D<input type="checkbox" name="d" class="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>​
Also I encourage to use CSS instead of align="center"
See live, running demo
So I think you're wanting to append the values together in the textbox. In that case, do:
<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
var textBoxVal = $("#text").val()+$("#check").val(); // Concatenate the existing textbox value with the checkbox value.
// Load the resulting value into new var textBoxVal.
$("#text").val(textBoxVal); // Load the new value into the textbox.
}
});
</script>
I used native JS just to make it clearer what I'm doing.
had used something like this.. might help you
var checkeditems = $('input:checkbox[name="check[]"]:checked')
.map(function() {
return $(this).val()
})
.get()
.join(",");
$("#text").val(checkeditems);
If you just want no multiples of a,b,c,d at one time, the onclick is per checkbox
var boxes = $("input:checkbox");
boxes.each(function(idx,elem){
elem.onclick=function(event){
var choices = "";
boxes.each(function(idx,elem){
choices += elem.checked ? elem.name:"";
});
$('#text').val(choices);
}
});

Categories