I have a rating system for a bunch of entries on a website, they are programatically placed in and therefore I have given them a unique form identifier by using a count.
<form name="star">
<input type="radio" class="star" name="rating" id ="rating" value="Terribad"/>
<input type="radio" class="star" name="rating" id ="rating" value="Meh"/>
<input type="radio" class="star" name="rating" id ="rating" value="OK"/>
<input type="radio" class="star" name="rating" id ="rating" value="Pretty Good"/>
<input type="radio" class="star" name="rating" id ="rating" value="Awesome!"/>
<input type='hidden' name='item' id = 'item' value='<%out.print(item);%>'>
</form>
<span id = "msg<%out.print(item);%>" style = "float:right; margin-left:0px; padding-top:0px;"></span>
I also have another hidden field which is the users name here (retrieved in the javascript) but removed it because its large and from a complex session based array.
I've also added the count in a hidden field to help try and sort it out.
From there I'm running a javascript on the click of one of the radio buttons that will grab some more details from the session, and do an AJAX database update.
$(function() {
$(".star").click(function() {
var submission = document.getElementsByName("rating");
var name = $("input#name").val();
var item = $("input#item").val();
var rating;
for (i = 0; i< submission.length; i++) {
if (submission[i].checked) {
rating = submission[i].value;
}
}
var submitted = 'name='+name + 'rating=' + rating;
//alert (item);return false;
$.ajax ({
type: "POST",
url: "/process_rating.jsp",
data: submitted,
success: function () {
$('#msg'+item).html("Submitted");
}
});
return false;
});
});
This all works fine on the first entry (when I didn't have that count in) but as I am not surprised all the other entries are being treated as the first. The main issue is when I try and update the msg div with its success it only does the first one as it is grabbing the hidden value from the first form, not the form that was actually submitted.
This is all inside a jsp btw.
First of all, each id should be unique on the page and you shouldn't need any of the ids in your example. This could very well be the root of many issues on your page.
Your code can be simplified quite a bit and you can use the "form" property on an input element to find the associated form. Does this work better for you?
$(function() {
$(".star").click(function() {
$.ajax ({
type: "POST",
url: "/process_rating.jsp",
data: {
name: this.form.name,
rating: $(this).val()
},
success: function () {
// Not sure what you're trying to do here... Update some input
// that you didn't show in your code?
$('#msg').html("Submitted");
}
});
return false;
});
});
I wasn't sure what you were trying to do upon successfully saving the form. Let me know and we'll see if we can get it working.
Use the "this" from the event handler function to look for the form which is the parent.
$(".star").click(function(){
var formThatWasSubmitted = $(this).parents("form")
});
Pretty sure that's how it works.
Related
I am currently trying to build a list with checkboxes that can be easily checked/unchecked to be included or excluded. When the page loads most of the list items will have the checkbox "checked" attribute to show that the item is included. Im trying to change the checkbox attribute when the user changes the selection so that I can save the results.
I Have tried a few combinations that I have found here on Stackoverflow but none are changing the attribute, Im not sure what Im doing wrong.
function check() {
if ($("#working").prop("checked", true)) {
$("#working").prop("checked", false)
} else {
$("#working").prop("checked", true)
}
}
var data = {
id: document.getElementById('workingId').value,
visible: document.getElementById('working').checked
};
$(document).on("click", ".save", function() {
alert(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="workingId" value="13245">
<input type="checkbox" name="working" id="working" onclick="check(this);" checked> I am a check box
<button type="button" class="btn save"> Save</button>
I am hoping to print an array that has an ID for the checkbox (12345) and whether the checkbox is now checked/unchecked. Any help with this would be greatly appreciated.
I don't know if I understand your question right. Is this what you want ?
var data = {};
function check() {
if ($("#working").prop("checked")) {
data = {
id: document.getElementById('workingId').value,
visible: document.getElementById('working').checked
};
} else {
data = {};
}
}
$(document).on("click", ".save", function() {
console.log(data);
});
check();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="workingId" value="13245">
<input type="checkbox" name="working" id="working" onclick="check(this);" checked> I am a check box
<button type="button" class="btn save"> Save</button>
here's a way to do it with multiple checks:
var data = {};
function check() {
data = {};
$("[name=working]").each((ign, o)=>{
if ($(o).prop('checked'))
data[o.id] = $(o).attr('data-val');
});
}
$(document).on("click", ".save", function() {
console.log(data);
});
check();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-val="13245" name="working" id="working1" onclick="check(this);" checked> I am a check box
<br>
<input type="checkbox" data-val="23245" name="working" id="working2" onclick="check(this);" checked> I am other check box
<br>
<input type="checkbox" data-val="33245" name="working" id="working3" onclick="check(this);" checked> I am yet another check box
<button type="button" class="btn save"> Save</button>
Try this:
var $checkBox = $("#working");
var data = {
id: $("#workingId").val(),
visible: $checkBox.is(":checked")
};
$(".save").on("click", function () {
data.visible = $checkBox.is(":checked");
alert(JSON.stringify(data));
});
// Do other things with the 'data' object...
No onclick="check(this);" logic is needed.
Notes:
Consider switching to the latest JS. I see that you're still writing in ES5.
Consistency is very importing when developing. If already importing jQuery, consider using it across the board. I see in your initial logic that you use it for some element selection and not others.
When accessing the DOM via JS, with or without jQuery, try to stay as DRY as possible. For example, if you need to access the working div in more than one place, store the query selection in a variable. Resource-wise, DOM access/manipulation is not as cheap as variable creation.
Additionally, you can use an HTML data-* attribute in your checkbox element to store the "workingId" and remove your hidden element(s) entirely.
I am using Angular-Js and Jquery. I am implementing disable all checkboxes in the page after click on checkbox. But When I reload the page my page is reset, I don't want to reset disable checkboxes after reload. Suppose I checked checkbox after that reload the page checkbox should be checked.
Below is the code example.
$('#mainChk').on('click', function(){
var categories = $('.disableCheck');
categories.prop('disabled', !categories.prop('disabled'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="mainChk" type="checkbox" > Main
<input type="checkbox" class="disableCheck"> First
<input type="checkbox" class="disableCheck"> Second
<input type="checkbox" class="disableCheck"> Third
When I reload the page, All checkbox is reset.
I can use Angular-Js also. I set checkbox value in query parameter like true or false.
$location.search({ checkbox: disableCheck.prop('disabled') })
But I did not get desired output.
You can use something like sessionStorage or localStorage to save checkboxes' state after page reloading.
There is an angularjs library, that I use.
You also can find same thing for jQuery.
The best way is to call ajax on page load via API method though SELECT query of Save Table.
<input type="checkbox" class="disableCheck" value="First"> First
<input type="checkbox" class="disableCheck" value="Second"> Second
<input type="checkbox" class="disableCheck" value="Third"> Third
$(document).ready(function () {
$.ajax({
url: 'abc.asmx',// Call List Method of Save Checkbox Table
success: function (data) {
callback(data);
},
})
});
function callback(data) {
$.each(data.d, function (index, item) {
$("#checkboxId option[value='" + item.SaveCheckboxColumnName + "']").prop("checked",
true);
$("#checkboxId option[value='" + item.SaveCheckboxColumnName +
"']").prop("disabled",
true);
});
}
Here's what I'm trying to do: when a radio button is clicked, I want to update some values in the form and only after those values are updated, submit the entire form. the problem I'm having is, that the form is submitted before the values are updated.
This is my current (non-working) implementation:
<div class="btn-group" data-toggle="buttons">
<label id="label_radio_2_78" class="btn btn-info btn-sm checkbox-padding ">
<input onchange="update_transaction(78)" id="radio_2_78" name="ledger_id" value="2" type="radio">
BR
</label>
<label id="label_radio_3_78" class="active">
<input onchange="switch_ledgers(78, 3)" id="radio_3_78" checked="checked" name="ledger_id" value="3" type="radio">
HP
</label>
</div>
function switch_ledgers(transactionId, ledgerId)
{
deactivate_radio(transactionId, ledgerId).done
(
update_transaction(transactionId)
);
}
//checks if the clicked radio buttion is active, if so it unchecks it.
function deactivate_radio(transactionId, ledgerId)
{
var cb = $('#radio_' + ledgerId + '_' + transactionId + ':checked');
var r = $.Deferred();
if(cb)
{
cb.prop('checked', false);
$('#label_radio_' + ledgerId + '_' + transactionId).removeClass('active');
}
return r.resolve();
}
//Submits the form, this function gets called too quickly
function update_transaction(transactionId)
{
var form = $("#transaction_" + transactionId);
$.ajax({
type: form.attr('method'),
data: form.serialize(),
url: form.attr('action')
}).done(function()
{
update_balance();
update_total_balance();
});
}
I hope I made it sufficiently clear what I'm trying to do.
Thanks!
It looks like you're calling update_transaction() directly in the onchange event of the first input element.
Shouldn't you be calling switch_ledgers() in the change event instead?
For Example:
<input onchange="switch_ledgers(78)" id="radio_2_78" name="ledger_id" value="2" type="radio">
Straightforwardly, you just need to fix switch_ledgers() so as not to call update_transaction() immediately (Peter Herdenborg's answer).
Going further, you can (and should) :
purge the deferred/promise from deactivate_radio(), which is totally synchronous.
attach event handlers in javascript, not as HTML attributes.
avoid cumbersome ids by exploiting the power of jQuery to traverse the DOM.
There must be a thousand ways to write the code - here's one :
HTML
Purge ids and onchange= properties in favour of data- properties
<div class="btn-group" data-toggle="buttons" data-transactionId="78">
<label class="btn btn-info btn-sm checkbox-padding">
<input data-changeHandler="update_transaction" name="ledger_id" value="2" type="radio"> BR
</label>
<label class="active">
<input data-changeHandler="switch_ledgers" checked="checked" name="ledger_id" value="3" type="radio"> HP
</label>
</div>
Javascript
// Attach a generalised change handler to the radio buttons,
// braching out to a specific function as specified by
// the button's `data-changeHandler` property.
$(".btn-group input[type='radio']").on('change', function () {
changeHandlers[$(this).data('changeHandler')](this);
});
// Branching above is made simple by specifying
// the specific change handlers as properties of an object.
var changeHandlers = {
'switch_ledgers': function(button) {
$(button).filter(':checked').prop('checked', false).closest("label").removeClass('active');
changeHandlers.update_transaction(button);
},
'update_transaction': function(button) {
var transactionId = $(button).closest(".btn-group").data('transactionId'),
form = $("#transaction_" + transactionId);
$.ajax({
type: form.attr('method'),
data: form.serialize(),
url: form.attr('action')
}).done(function() {
update_balance();
update_total_balance();
});
}
}
Now, modify the HTML in other button groups to follow the same pattern as above.
It seems to me that the problem is that you execute update_transaction() when you're actually trying to pass it as the callback function of .done():
function switch_ledgers(transactionId, ledgerId)
{
deactivate_radio(transactionId, ledgerId).done
(
update_transaction(transactionId)
);
}
should be
function switch_ledgers(transactionId, ledgerId)
{
deactivate_radio(transactionId, ledgerId).done
(
function() {
update_transaction(transactionId)
}
);
}
If you weren't passing an argument to update_transaction(), you could just have used
deactivate_radio(transactionId, ledgerId).done(update_transaction); //No ()
but now that you do you have to wrap the call in an anonymous function to avoid executing update_transaction() immediately.
I have array of checkboxes like below,
<input type="checkbox" value="1" id="a_r_id[1]" name="a_r_id[1]">
<input type="checkbox" value="1" id="a_r_id[2]" name="a_r_id[2]">
<input type="checkbox" value="1" id="a_r_id[3]" name="a_r_id[3]">
<input type="checkbox" value="1" id="a_r_id[4]" name="a_r_id[4]">
in my page... and i want to submit only the checked one via JavaScript (jQuery AJAX)... how can i do that ?
EDITED :
Actually, i want to get all array keys on the checked checkbox so that i can post it via ajax. Something like "1,4" as a string.
var keys = [],
keystring;
$('input[name^="a_r_id"]:checked').each(function () {
keys.push($(this).attr('name').replace(/a_r_id\[(\d+)\]/, '$1'));
});
keystring = keys.join();
Of course, there are better ways of doing this, but this answers your question as you've framed it.
Finally, i found an answer for my question above. I'll write it down right here.
Problem :
how can i get "key" from array HTML element(s) ? (in my case, only checked checkbox i want to get)
my answer code is something like this :
//first, i get every checked checkbox using jQuery selector,
//as mentioned by DerekHenderson.
var list_agent = $('input[name^="a_r_id"]:checked');
var l_c_agent = new Array();
//then, i create a loop to loop each object returned.
for(var i=0;i<list_agent.length;i++){
//after that, i'm using Regular Expression ( match() ) on every returned object id and throw it into some array.
l_c_agent[i] = list_agent[i].id.match(/[0-9]+/);
}
//finally, i join the array using javascript join() method so that i can pass it using jQuery AJAX as a string to my controller and process it.
var clean_agent_list = l_c_agent.join();
var add_url = 'test.php';
$.ajax({
url: add_url,
type: "GET",
data : { 'list_agent' : clean_agent_list },
success: function(data_return) {
//alert(data_return);
}
});
the output will be something like this (if using my example question above and we're check element with id 1,3 and 4 only)
1,3,4
if anybody have a better code, please write it here so that we can discuss which is better to solve my problem.
The method you want seems a bit backwards; the browser will already submit only the checked checkboxes, but here goes:
var re = /\[(\d+)\]$/,
numbers = [];
$('input[name^="a_r_id\\["]:checked').each(function() {
numbers.push(+this.name.match(re)[1]);
});
console.log(numbers.join(','));
It selects all checked boxes whose name starts with "a_r_id[". Then, a regular expression is used to extract the number portion between square brackets and added to the list of values.
I think you want to do something like this
<input type="checkbox" value="1" id="a_r_id_1" name="a_r_id[]">
<input type="checkbox" value="2" id="a_r_id_2" name="a_r_id[]">
<input type="checkbox" value="3" id="a_r_id_3" name="a_r_id[]">
<input type="checkbox" value="4" id="a_r_id_4" name="a_r_id[]">
Radio Buttons seems to be more applicable here rather than checkboxes try this:
<input type="radio" name="radiogroup" value="1" id="a_r_id[1]" name="a_r_id[1]">
<input type="radio" name="radiogroup" value="2" id="a_r_id[2]" name="a_r_id[2]">
<input type="radio" name="radiogroup" value="3" id="a_r_id[3]" name="a_r_id[3]">
You can get the selected value using
$("input:radio[name=radiogroup]").click(function() {
var value = $(this).val();
//
do something with var
//
});
How to pass multiple checkboxes using jQuery ajax post
this is the ajax function
function submit_form(){
$.post("ajax.php", {
selectedcheckboxes:user_ids,
confirm:"true"
},
function(data){
$("#lightbox").html(data);
});
}
and this is my form
<form>
<input type='checkbox' name='user_ids[]' value='1'id='checkbox_1' />
<input type='checkbox' name='user_ids[]' value='2'id='checkbox_2' />
<input type='checkbox' name='user_ids[]' value='3'id='checkbox_3' />
<input name="confirm" type="button" value="confirm" onclick="submit_form();" />
</form>
From the jquery docs for POST (3rd example):
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });
So I would just iterate over the checked boxes and build the array. Something like
var data = { 'user_ids[]' : []};
$(":checked").each(function() {
data['user_ids[]'].push($(this).val());
});
$.post("ajax.php", data);
Just came across this trying to find a solution for the same problem. Implementing Paul's solution I've made a few tweaks to make this function properly.
var data = { 'venue[]' : []};
$("input:checked").each(function() {
data['venue[]'].push($(this).val());
});
In short the addition of input:checked as opposed to :checked limits the fields input into the array to just the checkboxes on the form. Paul is indeed correct with this needing to be enclosed as $(this)
Could use the following and then explode the post result explode(",", $_POST['data']); to give an array of results.
var data = new Array();
$("input[name='checkBoxesName']:checked").each(function(i) {
data.push($(this).val());
});
Here's a more flexible way.
let's say this is your form.
<form>
<input type='checkbox' name='user_ids[]' value='1'id='checkbox_1' />
<input type='checkbox' name='user_ids[]' value='2'id='checkbox_2' />
<input type='checkbox' name='user_ids[]' value='3'id='checkbox_3' />
<input name="confirm" type="button" value="confirm" onclick="submit_form();" />
</form>
And this is your jquery ajax below...
// Don't get confused at this portion right here
// cuz "var data" will get all the values that the form
// has submitted in the $_POST. It doesn't matter if you
// try to pass a text or password or select form element.
// Remember that the "form" is not a name attribute
// of the form, but the "form element" itself that submitted
// the current post method
var data = $("form").serialize();
$.ajax({
url: "link/of/your/ajax.php", // link of your "whatever" php
type: "POST",
async: true,
cache: false,
data: data, // all data will be passed here
success: function(data){
alert(data) // The data that is echoed from the ajax.php
}
});
And in your ajax.php, you try echoing or print_r your post to see what's happening inside it. This should look like this. Only checkboxes that you checked will be returned. If you didn't checked any, it will return an error.
<?php
print_r($_POST); // this will be echoed back to you upon success.
echo "This one too, will be echoed back to you";
Hope that is clear enough.
This would be better and easy
var arr = $('input[name="user_ids[]"]').map(function(){
return $(this).val();
}).get();
console.log(arr);
The following from Paul Tarjan worked for me,
var data = { 'user_ids[]' : []};
$(":checked").each(function() {
data['user_ids[]'].push($(this).val());
});
$.post("ajax.php", data);
but I had multiple forms on my page and it pulled checked boxes from all forms, so I made the following modification so it only pulled from one form,
var data = { 'user_ids[]' : []};
$('#name_of_your_form input[name="user_ids[]"]:checked').each(function() {
data['user_ids[]'].push($(this).val());
});
$.post("ajax.php", data);
Just change name_of_your_form to the name of your form.
I'll also mention that if a user doesn't check any boxes then no array isset in PHP. I needed to know if a user unchecked all the boxes, so I added the following to the form,
<input style="display:none;" type="checkbox" name="user_ids[]" value="none" checked="checked"></input>
This way if no boxes are checked, it will still set the array with a value of "none".
function hbsval(arg) {
// $.each($("input[name='Hobbies']:checked"), function (cobj) {
var hbs = new Array();
$('input[name="Hobbies"]:checked').each(function () {
debugger
hbs.push($(this).val())
});
alert("No. of selected hbs: " + hbs.length + "\n" + "And, they are: " + hbs[0] + hbs[1]);
}