I am trying to create a session in php every time a checkbox is selected. i have got this working on each individual check box using the following:
onchange="$.get(\'set_item.php?stockID='.$row[stockID].'&push=\'+this.checked);"
I now would like to add a check all link which then selects all of the check boxes and then actions the above line to create the php session... so far i have got the check all link working but i can not get the loop to work.
$(document).ready(function () {
$('#selectChb').click(function(){
$(':checkbox').prop("checked", true);
});
$(":checkbox:checked").each(function() {
str = this.val();
$.get('set_item.php?stockID='+str+'&push='+this.checked);
});
$(":checkbox:not(:checked)").each(function() {
str = this.val();
$.get('set_item.php?stockID='+str+'&push='+this.checked);
});
});
This should allow you to also remove the inline onchange that you have on your checkbox elements.
$(document).ready(function () {
$('#selectChb').click(function(){
$(':checkbox').prop("checked", true);
});
$(":checkbox").on("change", function() {
if($(this).is(":checked"))
{
str = $(this).val();
$.get('set_item.php?stockID='+str+'&push='+this.checked);
}
});
});
Related
I'm outputting several divs using php - each div has a different country name for the class.
I'm also outputting a variable using jquery which checks if content of a div has changed. That variable will also be a country name.
If the jquery variable matches a div class, I want that div to .show(), how can I do that?
This is my (horrible) attempt:
(function($) {
$(document).ready(function () {
$("#block1").bind("DOMSubtreeModified", function() {
message = $("#block1").html();
regiondiv = '.';
fullregion = regiondiv + message;
alert(fullregion);
if ($('.region-logos').hasClass(message)) {
$(fullregion).show();
} else {
$(fullregion).hide();
}
});
});
})(jQuery);
If I click on Canada for instance, it will show the .Canada div, but if I click on Spain after it, it's shows the .Spain div as well as the .Canada div. I.e once you click on more than one it just continues to show them all. It doesn't hide the divs if you haven't click on it.
var class = 'no-class';
$(document).ready(function () {
$("#block1").bind("DOMSubtreeModified", function() {
var regiondiv = '.';
var fullregion = regiondiv + class ;
$(".fullregion").hide();
class = $("#block1").html();
fullregion = regiondiv + class ;
$(".fullregion").show();
});
});
Not sure if I followed the question correctly. I assume you want to display a div if class of that div matches a variable in javascript. If so the you can try this:
(function($) {
$(document).ready(function () {
$("body").bind("DOMSubtreeModified", function() {
// Not sure how are you generating this jquery variable
var yourJqueryVariable;
// Check if class name exists
if ($(".yourJqueryVariable")[0]){
$(".yourJqueryVariable").show(); //or even $(".yourJqueryVariable").css('display','block');
}
});
});
})(jQuery);
(function($) {
$(document).ready(function () {
$("#block1").bind("DOMSubtreeModified", function() {
var message = $("#block1").html();
//ok so you have the variable to check
if($('.'+message).length > )) { //is there 1 or more of these classes in the DOM?
$('.'+message).each(function() { //there is, loop and show them all
$(this).show();
});
}
});
});
})(jQuery);
EDIT
Ok looking at your updated answer, assuming there are multiple .region-logos you need to perform your if else within a loop of those:
$('.region-logos').each(function() {
if($(this).hasClass(message)) {
$(fullregion).show();
}else {
$(fullregion).hide();
}
});
I have a form that submits fields. I'm using Google autocomplete to suggest location and populate fields. Problem is that it adds extra words to the locations like -si, -do, etc.
I need to remove these extra words on submit.
I have this JQuery code but it does not work:
$(document).ready(function () {
$("form").submit(function () {
$('input[name=locality').val.replace('-si', '');
//return value.replace('-si', '');
});
});
Any help is appreciated.
$(document).ready(function () {
$("form").submit(function () {
var inp = $('input[name=locality]');
inp.val(inp.val().replace('-si', ''));
});
});
Fiddle
I am having name, email in content of a html page. i have to validate it on clicking continue button. and also the content in the content div has to change. how can i do both on clicking the continue button. help me with some suggestions. thanks.
am using the following code for changing div content.
<script>
$(document).ready(function () {
$("#button").click(function () {
$("#content").load("<?php echo base_url().'survey/categories' ?>");
});
});
$(document).ready(function () {
$("#button1").click(function () {
$("#content").load("<?php echo base_url().'survey/budget_overview' ?>");
});
});
</script>
As i understand your question, i think what you want is to do the two tasks at the same time on click of the button. So here's some sample code assuming this is what you want. If you have any doubts just ask. And i have added just sample Email Validation Using RegExp in JavaSript at the end of the code as a function.. Get the idea, Hope this helped you,,
//
$(document).ready(function() {
//Button1 Click
$("button").click(function(){
//initialize inputs here
var email =$("#email").val;
var input1=$("#input1").val;
//Validate Inputs Here
if(IsEmail(email)==true && input1!=""){
return true
}
else{
return false;
}
//Loading the first content after validating inputs
$("#content").load("<?php echo base_url().'survey/categories' ?>");
//To Trigger the other button
$('#button1').trigger('click');
});
//Button1 Trigger Will fire Click event
$("#button1").click(function () {
$("#content").load("<?php echo base_url().'survey/budget_overview' ?>");
});
});
//Email Validation In JavaScript
function IsEmail(email) {
var regex = /^([a-zA-Z0-9_\.\-\+])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
I think the problem is with your syntax. You have to specify a file URL in the load method like this:
$(document).ready(function(){
$("form").submit(function(){
$("#content").load("myfile.php");
return false;
});
});
You can have a look on the load documentation.
I have a php page with jQuery, with range sliders.
When the sliders are changed the jQuery code sums the values.
I also want this code to be fired when the page is loaded. But it doesn't happen when I trigger the function inside $(window).load(function() {}); or directly in $(document).ready(function() {});.
Here's the jQuery code:
$(document).ready(function() {
$(window).load(function() {
countSilders();
});
function countSliders(){
var SliderValue = parseInt($("#slider0").val())+parseInt($("#slider1").val())+parseInt($("#slider2").val());
if (SliderValue==10)
$("#submit_next").button("enable");
else
$("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue+"/10");
}
$(document).on("change","#sliders", function(){
countSliders();
});
});
Try this:
// First define your function
function countSliders() {
var SliderValue = parseInt($("#slider0").val()) + parseInt($("#slider1").val()) + parseInt($("#slider2").val());
if (SliderValue == 10) $("#submit_next").button("enable");
else $("#submit_next").button("disable");
$("#lblsum_scores").text(SliderValue + "/10");
}
// Run on ready, don't use ready and then on load, that will never happen
// And i changed the on() to change()
$(document).ready(function(){
countSilders();
$("#sliders").change(function(){
countSliders();
});
});
You should be able to do:
function countSliders(){
...
}
$(document).ready(function() {
countSilders(); // fire it on load
// bind it to sliders
$(document).on("change","#sliders", function(){
countSliders();
});
});
I have a form with number of submit type as images. Each image has a different title. I need to find out the title of the clicked image. But my click function inside form submit is not working.
My form is:
<form action='log.php' id='logForm' method='post' >
<?
for($j=1;$j<=5;$j++)
{
?>
<input type="image" src="<?=$img;?>" title="<?=$url;?> id="<?="image".$j?> class="images" />
<?
}
?>
</form>
Jquery:
$("#logForm").submit(function(e)
{
$(".advt_image").click(function(event) {
var href=event.target.title;
});
var Form = { };
Form['inputFree'] = $("#inputFree").val();
// if($("#freeTOS").is(":checked"))
Form['freeTOS'] = '1';
$(".active").hide().removeClass('active');
$("#paneLoading").show().addClass('active');
var url="http://"+href;
$.post('processFree.php', Form, function(data)
{
if(data == "Success")
{
$("#FreeErrors").html('').hide();
swapToPane('paneSuccess');
setTimeout( function() { location=url }, 2500 );
return;
}
swapToPane('paneFree');
$("#FreeErrors").html(data).show();
});
return false;
});
How can I get the title value of clicked image inside this $("#logForm").submit(function())?
How can I use the id of clicked image for that?
You can use event.target property
$("#logForm").submit(function(e)
alert($(e.target).attr('title'));
});
http://api.jquery.com/event.target/
[UPDATE]
I just realized it wouldn't work. I don't think there is a simple solution to this. You have to track the click event on the input and use it later.
jQuery submit, how can I know what submit button was pressed?
$(document).ready(function() {
var target = null;
$('#form :input[type="image"]').click(function() {
target = this;
alert(target);
});
$('#form').submit(function() {
alert($(target).attr('title'));
});
});
[Update 2] - .focus is not working, but .click is working
http://jsfiddle.net/gjSJh/1/
The way i see it, you have multiple submit buttons. Instead of calling the function on submit, call it on the click of these buttons so you can easily access the one the user chose:
$('input.images').click(function(e) {
e.preventDefault(); //stop the default submit from occuring
alert($(this).attr('title');
//do your other functions here.
});
// Runtime click event for all elements
$(document).on('vclick', '.control', function (e) { // .control is classname of the elements
var control = e.target;
alert(e.currentTarget[0].id);
});
if you are not getting proper message in alert, just debug using Firebug.
Check following code you can get the title of clicked image.
Single click
$(document).ready(function()
{
$('#logForm').submit(function(e){
$(".images").click(function(event) {
alert(event.target.title);
});
return false;
});
});
Double click
$(document).ready(function()
{
$('#logForm').submit(function(e){
$(".images").dblclick(function(event) {
alert(event.target.title);
});
return false;
});
});
add following ondomready in your rendering page
$(document).ready(function(){
$("form input[type=image]").click(function() {
$("input[type=image]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
Now in your form's submitt action add follwing behaviour and yupeee!... you got it!....
$("#logForm").submit(function(e)
{
var title = $("input[type=image][clicked=true]",e.target).attr("title");
.....
.....
});