Advanced Web Tutorial: October 2013

//---------------------- SCRIPT PART -----------
<script>
function addondblclick1(addobj)
{
if($('.her1 .box ').size()< 5)
{
itemcounts++;
var cat=$(addobj).attr('cat');

var catname=$(addobj).attr('catname');

var imagename=$(addobj).attr('imagename');

var imagecounter=$(addobj).attr('imagecounter');
var yaddfavtype =$(addobj).attr('addfavtype');
var user_email=$('#user').attr('value');
var sessionid=$('#sessionid').attr('value');
var openedtr=0;
$('#popup_box_for_progress').fadeIn("slow"); //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','none', 500);

inp=$('#add_to_list_'+ cat + '_' + imagecounter);

$.ajax({
type: "POST",
url: "createpageajax/addtolist.php",
data: {
session_id : sessionid,
email : user_email,
catid : cat,
imgsrc:$(addobj).attr('imagename'),
xcatname:catname,
xaddfavtype:yaddfavtype,
item:inp.val()
}
}).done(function( msg ) {

$('#popup_box_for_progress').fadeOut("slow"); //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','auto');
// alert(msg);
if(itemcounts < listexpandtrcount)
{
//alert('if');
var rowCount=0;
var Count=0;

openedtr=openedtr+1;
// alert('open'+openedtr);
var count=$('#rowcount').attr('value');
//alert(count);
if(count>=1)
{
var rowCount = $('.her1 li').find('span').length;
var newcount = Number(rowCount)+1;
$('#rowcount').attr('value',newcount);
}
else
{
///////////////--count favlist rows--////////
$('#rowcount').attr('value',openedtr);
}
/*$('#table_item_count_' + itemcounts ).append("<span><img src='"+ $(addobj).attr('src') + "' /></span><h5>" + catname + "-" + inp.val() + "</h5><a href='#' index='" + msg + "'><img src='covers/removeicon.png' /></a>");*/
$('.her1').append("<li class='box'><img src='"+ $(addobj).attr('imagename') + "' /></span>" + "<a href='#' index='" + msg + "'>X</a></li>");
$('.table_listdata a').addClass("fav_list_ul_li_a");

}
else
{
//alert('else');
var rowCount=0;
var Count=0;

openedtr=openedtr+1;
// alert('open'+openedtr);
var count=$('#rowcount').attr('value');
//alert(count);
if(count>=1)
{
var rowCount = $('.her1 li').find('span').length;
var newcount = Number(rowCount)+1;
$('#rowcount').attr('value',newcount);
}
else
{
$('#rowcount').attr('value',openedtr);
}

var table_item='<li class="box"><span><img src="'+ $(addobj).attr('imagename') + '"></span>' + '<a index="'+ msg +'" href="#" class="fav_list_ul_li_a">X</a>';
$( ".her1" ).append(table_item);

$('.her1 a').addClass("fav_list_ul_li_a");

}
inp.val('');

$('.fav_list_ul_li_a').click(function() {

$('#popup_box_for_progress').fadeIn("slow"); //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','none', 500);

$.ajax({
type: "POST",
url: "createpageajax/removefromlist.php",
data: {
index:jQuery(this).attr('index')
}
}).done(function( msg ){

//alert('dblclc');
//alert("Remove 1");

//alert(msg);

var rows=$('#rowcount').attr('value');
rows=Number(rows)-1;
$('#rowcount').attr('value',rows);

$('#popup_box_for_progress').fadeOut("slow"); //////////////////////progress/////////
$('#fav_option_ul').css('pointer-events','auto');

});
$(this).parent().remove();
//$(this).parent().parent().remove();
//alert('remove');
/*$('.her1 .table_listitem .table_listcounter').each(function(index) {
$(this).html(index+1);
}); */
});
});
}
else
{
alert("You cannot add more than 5 items in her favs");
$('#popup_box_for_max_items').fadeIn("slow");

}
}
</script>
//-------------------- HTML with PHP -------------
<html>
//----in loop----
<span class="her" imagename="<?php echo $fb_music['image']; ?>>" cat="<?php echo $row3['category_id'];?>"
catname="<?php echo $row3['category_name'];?>"
imagecounter="<?php echo $imagecounter;?>" addfavtype="Her" onClick="addondblclick1(this);">+ ADD ITEM</span>
//-------loop end---------------
<div class="right-box">
<p><span class="ch">Choose 10 items</span></p>
<ul class="her">
<li>Her Favs</li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
<ul class="his">
<li>His Favs</li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
<ul class="her1">
<li> </li>

<?php $itemindex=0;
if(isset($_SESSION["items"]))
$sessitems=$_SESSION["items"];
else
$sessitems=array();

foreach($sessitems as $key => $item)
{
if($item["addfavtype"]=='Her'){ ?>
<li class="box">
<?php

if(isset($item))
{
?>
<span><img src="<?php echo $item["imgsrc"];?>"></span>

<a href="#" class="fav_list_ul_li_a" index="<?php echo $key;?>">X</a>
<?php

}

?></li>
<?php
$itemindex++;
}}
/*while($itemindex<0)
{
?>
<tr class="table_listitem">
<td class="table_listcounter"><?php echo $itemindex+1; ?></td>
<td id="table_item_count_<?php echo $itemindex+1; ?>" class="table_listdata"></td>
</tr>
<?php

$itemindex++;
}*/

?>
</ul>
<ul class="his1">
<li> </li>

<?php

$itemindex=0;
if(isset($_SESSION["items"]))
$sessitems=$_SESSION["items"];
else
$sessitems=array();

foreach($sessitems as $key => $item)
{
if($item["addfavtype"]=='His'){ ?>
<li class="box">
<?php

if(isset($item))
{
?>
<span><img src="<?php echo $item["imgsrc"];?>"></span>

<a href="#" class="fav_list_ul_li_a" index="<?php echo $key;?>">X</a>
<?php

}

?></li>
<?php
$itemindex++;
}}
/*while($itemindex<0)
{
?>
<tr class="table_listitem">
<td class="table_listcounter"><?php echo $itemindex+1; ?></td>
<td id="table_item_count_<?php echo $itemindex+1; ?>" class="table_listdata"></td>
</tr>
<?php

$itemindex++;
}*/

?>
</ul>
</html>
-------------------------------------------------------------------------------------------
<?php
//--------Dvelopeped by- Atul Sharma (R&D)
//include('../config/config.php'); // you can create db connection if you want to save data in database
//----------------
session_start();

$item["catid"]=$_POST["catid"];
$item["imgsrc"]=$_POST["imgsrc"];
$item["item"]=$_POST["item"];
$item["catname"]=$_POST["xcatname"];
$item["addfavtype"]=$_POST["xaddfavtype"];
$email=$_POST["email"];
$sessionid=$_POST["session_id"];
$imgpath=$item["imgsrc"];
$catid=$item["catid"];

$items=array();

$items=$_SESSION["items"];

if(count($items)<=0)
$items=array();

if(count($_SESSION["items"])<=10)
{
$index=array_push($items,$item);

$_SESSION["items"]=$items;

array_pop(array_keys($items));
//print_r($_SESSION);
echo $index;
}
array_slice($_SESSION['items'], 0, 10);

?>

By the Loop through those elements to check which is checked. You can try document.getElementsByName(<button_name>) or document.getElementsByTagName("input") to get an array of input elements. 



You can see this example of how to fetch the value of the checked button from a set of radio buttons with the name "selected".

You can do similar for check box.

<html>
    <head>
        <script type="text/javascript">
          function get_radio_value() {
            var inputs = document.getElementsByName("selected");
            for (var i = 0; i < inputs.length; i++) {
              if (inputs[i].checked) {
                return inputs[i].value;
              }
            }
          }

          function onSubmit() {
            var id = get_radio_value();
            alert("selected input is: " + id);
          }
        </script>
    </head>
    <body>
        <form onsubmit="onSubmit();">
            <input name="selected" value="1" type="radio"/>1<br/>
            <input name="selected" value="2" type="radio"/>2<br/>
            <input name="selected" value="3" type="radio"/>3<br/>
            <input type="submit" value="submit"/>
        </form>
    </body>
</html>

Advanced Web Tutorial

menu

Wednesday, 30 October 2013

save and fetch data through jquery / java script and php without data base using push and pop

how to fetch value of selected radio button in javascript

Tuesday, 22 October 2013

Thumbnail Image Upload Example jQuery AJAX