We Keep Coding

jquery .show() by php variable

I'm trying to trigger jquery .show() events triggered by php variables.
Here's my .php (which draws from a form submission on a separate page):
$last_pic_displayed = trim($_POST["last_pic_displayed"]);
if ( strlen($last_pic_displayed) <= 0 )
{ $last_pic_displayed = trim($_GET["last_pic_displayed"]); }
and here's my .show() code:
<script>
var lpic = "<?php echo $last_pic_displayed; ?>";
lpic = parseInt(lpic);
if (lpic == 0) {
$("#1").show();
}
</script>
I use variations on this script for multiple divs with the intention that the correct $last_pic_displayed; value will trigger the correct div to show, but so far none have.
Here's an example of the form that's posting data to my php:
<form id="buttons" action="process_form.php" method="post">
<label for="child_name"><img src="images/enter_name_text.png" alt="Enter Your Name" id="name_text"></label>
<input type="text" id="child_name" name="child_name" />
<section>
<input checked="checked" id="radio1" name="last_pic_displayed" type="radio" value="0" />
<label for="radio1"><img src="images/3_letter_text.png" alt="3 Letter Words" class="level_text">
</label>
</section>
<section>
<input checked="checked" id="radio2" name="last_pic_displayed" type="radio" value="6" />
<label for="radio1"><img src="images/4_letter_text.png" alt="4 Letter Words" class="level_text">
</label>
</section>
<section>
<input checked="checked" id="radio3" name="last_pic_displayed" type="radio" value="13" />
<label for="radio1"><img src="images/5_letter_text.png" alt="5 Letter Words" class="level_text">
</label>
</section>
<section id="submit_button">
<input type="image" name="submit" src="images/submit.png" />
</section>
</form>
Here is an example of the section of code that I'm trying to get to show when the submitted form data matches a certain value along with my script in relation:
<div class="word" id="1" data-value="1">
<img src="images/Bat.png" class="letter_text">
<form id="f1" action="results.php" method="post">
<input type="hidden" name="child_name" value="<?php $child_name; ?>" />
<input type="hidden" name="running_score" value="<?php $running_score; ?>" />
<input type="hidden" name="last_pic_displayed" value="1" />
<input type="hidden" name="correct_spelling" value="BAT" />
<input type="hidden" name="last_pic_flag" value="NO" />
<input type="hidden" name="level" value="3_letter" />
<input type="text" name="submitted_spelling" />
<input type="image" class="submit" src="images/submit.png" />
</form>
</div>
<script>
var lpic = "<?php echo $last_pic_displayed; ?>";
lpic = parseInt(lpic);
if (lpic == 0) {
$("#1").show();
}
alert(lpic);
</script>
I'm pretty new at all this, so I definitely appreciate your help.
EDIT: Updated with syntax corrections; problem currently persists.
EDIT2: Updated with form example.
EDIT3: Updated with parseInt() and example of the div I'm trying to show.

You need to parseInt() the "lpic" variable Like that way :
var lpic = "<?php echo $last_pic_displayed; ?>";
lpic = parseInt(lpic);
if (lpic == 0) {
$("#1").show();
}

use it:-
var lpic = "<?php echo $last_pic_displayed; ?>";
lpic = parseInt(lpic);
if (lpic == 0) {
$("#1").show();
}

use this
<script>
var lpic = "<?php echo $last_pic_displayed; ?>"; // this must in ""
if (lpic == '0') { // must be == instead =
$("#1").show();
}
</script>

show/hide div if input is 0 or default

I´m working in a payment gateway where the user Name the Price for my digital books. An input box (to text the price) and a "Pay now" button are displayed. BUT:
If the price is less than 0.50 the payment button disapear and the download button appear
If the user introduce a "," instead a "." a box is displayed (please, enter a valid number)
Here is the form with the input box:
<form id="hikashop_paypal_form" name="hikashop_paypal_form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="X" />
<input type="hidden" name="item_name_1" value="X" />
<input id="amount_1" name="amount_1" class="amount_1"/></form>
Pay Now button (it should be hiden if 1 is true)
<div id="PayNow" class="PayNow">
<input id="PayNow_button" type="submit" class="btn btn-primary" value="Pay now" name="" />
</div>
Download Now Button (it should be shown if 1 is true)
<div id="downloadNow" class="downloadNow">
Download now
</div>
Info box (It should be shown if 2 is true)
<div id="info" class="info">
Enter a valid number
</div>
And the question is: How can I do it?
I supose the solution passes by using javascript, but I don´t know how exactly... Thanks for you time...

I don´t know how, but it works for me:
Try it here: IBIZA! Book Download
<form id="pplaunch" action="https://www.paypal.com/cgi-bin/webscr" method="POST">
<input type="hidden" name="cmd" value="_xclick">
<input id="issueid" name="issueid" type="hidden" value="ARCHIVE NAME">
<input type="hidden" id="currency" name="currency" value="EUR">
<input type="hidden" name="business" value="YOUR PAYPAL ID" />
<input type="hidden" value="0" name="test_ipn"></input>
<input type="hidden" name="item_name" value="PRODUC NAME">
<input type="hidden" value="1" name="no_shipping"></input>
<input type="hidden" value="0" name="no_note"></input>
<input type="hidden" value="utf-8" name="charset"></input>
<input type="hidden" value="Super" name="first_name"></input>
<input type="hidden" value="http://www.YOURWEBSITE.com/return" name="return"></input>
<input type="hidden" value="http://www.OURWEBSITE.com/cancel" name="cancel_return"></input>
<div class="nameprice" style="float:left;margin-right:15px;>
<span style="font-size:small;">Name your price: </span><input id="amount" name="amount" size="6" maxlength="5" type="text"> <span style="font-size:small;color:#ccc;">From 0.00€</span>
</div>
<div id="pricerror"></div>
<div class="buttonspace">
<button id="buybutton" class="buybutton" type="button">Checkout</button>
<div id="descargaGratisMensaje"></div>
<div style="display: block;" class="pay">
</div>
</div>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
function newPopup(url, width, height){
popupWindow = window.open(url,'_blank','height='+height+',width='+width+',left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');
return false;
}
function displaybutton(displayclass){
if(displayclass == 'pay'){
$('.pay').css('display','block');
$('#pplaunch').attr('action', 'https://www.paypal.com/cgi-binwebscr');
$('#buybutton').html('Pagar');
}else{
$('.pay').css('display','none');
$('#pplaunch').attr('action', 'http://www.example.com/archive/'+$('#issueid').val());
$('#buybutton').html('Descargar');
$('#descargaGratisMensaje').html('Un Me Gusta podría ser un buen intercambio');
}
}
function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n) && (n.search(/0x/i)<0);
}
function price(n){
// return null if n is not a price, or n rounded to 2 dec. places
if(!isNumber(n)){
// maybe the user entered a comma as a decimal separator
n = n.replace(/,/g,'.');
if(!isNumber(n)){
return null;
}
}
// now we know it is a number, round it up to 2 dec. places
return Math.round(parseFloat(n)*100)/100;
}
function pricecheck(){
var data = $.trim($('#amount').val());
var myprice = price(data);
if(myprice == null){
if(data == ''){
$('#pricerror').html('');
}else{
$('#pricerror').html('Please enter a price.');
}
displaybutton('pay');
return false;
}
if(myprice == 0){
$('#pricerror').html('');
displaybutton('nopay');
}else if(myprice < 0.5){
$('#pricerror').html('The minimum price is '+currencysymbol+'0.50.
Please enter either zero, or at least '+currencysymbol+'0.50.');
displaybutton('pay');
}else{
$('#pricerror').html('');
displaybutton('pay');
}
jQuery('.content').hide();
}
var currencysymbol = '$';
$.getScript('//www.geoplugin.ne/javascript.gp?ref=panelsyndicate.com', function() {
if(geoplugin_continentCode() != 'EU'){return;}
$('#currency').val('EUR');
currencysymbol = '€';
$('.currencysymbol').html(currencysymbol);
});
$(document).ready(function(){
var dialog = $('#modal').dialog({
title: 'IBIZA!'
, autoOpen: false
, closeText: ''
, modal: true
, resizable: false
, width: 500
});
$('#buybutton').click(function() {
$('#pplaunch').submit();
});
$('#pplaunch').submit(function() {
var myprice = price($.trim($('#amount').val()));
if((myprice != 0) && ((myprice == null) || (myprice < 0.5))){
$('#pricerror').html('Please enter your price.');
$('#amount').focus();
return false;
}
});
$('.modaltrigger').click(function() {
var issueid = $(this).attr('href').substr(1);
$('#issueid').val(issueid); // Comic ID
$('#include_a_message_to').html(issues[issueid].include_a_message_to); // Destinee of the message
dialog.dialog('option', 'title', issues[issueid].title); // Title of the comic
$('#issuelangs').html(issues[issueid].langs); // Languages in which the comic is available
dialog.dialog('option', 'position', { my: "center", at: "center", of: window });
dialog.dialog('open');
// prevent the default action, e.g., following a link
pricecheck();
return false;
});
$('#amount').bind('input propertychange', function() {
pricecheck();
});
$('.custommsg').hide();
$('.msgtrigger').click(function() {
var cmsg = $('.custommsg');
if(cmsg.is(':visible')){
cmsg.hide();
$('.sendmsg').show();
}else{
$('.sendmsg').hide();
cmsg.show();
$('.msgtxt').focus();
}
return false;
});
$('.msgtxt').keyup(function(){
if($(this).val().length > maxlength){
$(this).val($(this).val().substr(0, maxlength));
}
var remaining = maxlength - $(this).val().length;
$('#msgtxtnumcharsleft').text(remaining);
});
var maxlength = 200;
var remaining = maxlength - $('.msgtxt').val().length;
$('#msgtxtnumcharsleft').text(remaining);
});
</script>

multiple image crop using jcrop

i'm trying to crop multiple images using jcrop plugin. this plugin is working for single image crop but i have no idea how to crop multiple images individually from loop. my php file is as follows
<?php
$id=$_GET['id'];
$query_image=mysql_query("SELECT * FROM tbl_images WHERE `id`='$id'");
$j=0;
while($rowq=mysql_fetch_assoc($query_image))
{
$image_source = $rowq['image'];
?>
<div>
<img src="../image_files/<?php echo $image_source;?>" width="550px" id="cropbox_<?php echo $j;?>" />
<form action="crop_image.php?id=<?php echo $id;?>" method="post" onsubmit="return checkCoords()">
<input type="text" id="x" name="x" value="" />
<input type="text" id="y" name="y" value=""/>
<input type="text" id="w" name="w" value=""/>
<input type="text" id="h" name="h" value=""/>
<input type="submit" value="crop">
<input type="reset" value="cancel">
</form>
</div>
<?php
$j++;
}
$count = $j;
?>
and jcrop functions are as follows
<script type="text/javascript">
var i;
var count = "<?php echo $count;?>";
$(function(){
for(i=0; i<count;i++)
{
$('#cropbox_'+i).Jcrop({
aspectRatio: 0,
onSelect: updateCoords
});
}
});
function updateCoords(c)
{
var x = $('#x').val(c.x);
var y = $('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords(k)
{
if (parseInt($('#w_'+k).val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
</script>
but the function updateCoords(c) not returning co-ordinate values. if you have any suggestions on this code then please help me. thank you in advance.

for image form
<form action="crop_image.php?id=<?php echo $id;?>" method="post" onsubmit="return checkCoords('<?php echo $j;?>')">
<input type="text" id="x_<?php echo $j;?>" name="x" value="" />
<input type="text" id="y_<?php echo $j;?>" name="y" value=""/>
<input type="text" id="w_<?php echo $j;?>" name="w" value=""/>
<input type="text" id="h_<?php echo $j;?>" name="h" value=""/>
<input type="submit" value="crop">
<input type="reset" value="cancel">
</form>
for updateCoords(c) function
function updateCoords(c)
{
for(i=0; i<count;i++)
{
var x = $('#x_'+i).val(c.x);
var y = $('#y_'+i).val(c.y);
$('#w_'+i).val(c.w);
$('#h_'+i).val(c.h);
}
};
function checkCoords(k)
{
if (parseInt($('#w_'+k).val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
hi sujan try this

Auto-complete for random multiple ids

I have random fields for entries. I need to autocomplete using java script and php, but when I try it auto commplete only first field.
My code is:
<script type="text/javascript">
$().ready(function() {
$(".name").keyup(function() {
$(".name").autocomplete("get_profile_list.php", {
width: 260,
matchContains: true,
selectFirst: true
});
});
});
</script>
<script type="text/javascript">
function track() {
var count = jQuery('.abc').length;
jQuery('#track1').append('<span id="track1" class="abc"><br><input type="text" name="name[]" id="name-'+count+'" class="name" value="" size="35"/><input type="text" name="qty[]" id="qty-'+count+'" value="" size="1" onchange="return track();" /><input type="text" name="price[]" id="price-'+count+'" value="" size="1"/></span>');
}
$('input').live("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
</script>
</head>
<body>
<?php date_default_timezone_set("Asia/Kolkata");?>
<form name="form" method="post">
Party Name : <input type="text" name="customer" size="30" />
Date and Time : <input type="hidden" name="edt" value="<?php echo date("d-m-Y h:i:s", time());?>"/><?php echo date("d-m-Y h:i:s", time());?>
<br><br>
<strong>Products Details</strong>
<div id="main">
<span id="track1" class="abc">
<input type="text" name="name[]" id="name-0" class="name" value="" size="35" /><input type="text" name="qty[]" id="qty-0" value="" size="1" onchange="return track();" /><input type="text" name="price[]" id="price-0" value="" size="1"/>
</span>
<div id="display">
</div>
</div>
<br><br>
Receiver Name<input type="text" name="receiver" /><br>
<input type="submit" name="submit" />
</form>
</body>
</html>
For example please visit http://computerdada.com/slip1.php
In product details first input box is name of product please test it using words
key, lan.
Thanks.

Use .on()
you are adding element with class name dynamically so the elements that are not presernt at DOM ready doesn't get event handler attached to it.
you need Event Delegation to attach the event handler to the parent element present at DOM ready.
$(document).ready(function () {
$('#track1').on('keyup', '.name', function () {
$(this).autocomplete("get_profile_list.php", {
width: 260,
matchContains: true,
selectFirst: true
});
});
});
Updated after OP's comment.
As you are using jQuery v1.3.2
so you have to use .live()
$(document).ready(function () {
$('.name').live('keyup', function () {
$(this).autocomplete("get_profile_list.php", {
width: 260,
matchContains: true,
selectFirst: true
});
});
});

Changing form variables and need to change javascript to new variables

I am a complete newbie to javascript. I have some js on my website that is handling hiding some divs in a form. I'm wanting to change some of the values of the form, and I'm confused by some of the syntax of the javascript. Here is the html and script that I am working with:
<div class="outeremailcontainer">
<div id="emailcontainer">
<?php include('verify.php'); ?>
<form action="../index_success.php" method="post" id="sendEmail" class="email">
<h3 class="register2">Newsletter Signup:</h3>
<ul class="forms email">
<li class="name">
<label for="yourName">Name: </label>
<input type="text" name="yourName" class="info" id="yourName" value="<?php echo $_POST['yourName']; ?>" /><br />
</li>
<li class="city"><label for="yourCity">City: </label>
<input type="text" name="yourCity" class="info" id="yourCity" value="<?php echo $_POST['yourCity']; ?>" /><br />
</li>
<li class="email">
<label for="emailFrom">Email: </label>
<input type="text" name="emailFrom" class="info" id="emailFrom" value="<?php echo $_POST['emailFrom']; ?>" />
<?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>';
?>
</li>
<li class="buttons email">
<button type="submit" id="submit">Send</button>
<input type="hidden" name="submitted" id="submitted" value="true" />
</li>
</ul>
</form>
<div class="clearing">
</div>
</div>
</div>
and the script:
<script type="text/javascript">
$(document).ready(function(){
$('#emailFrom')
.focus(function(){
if ($('#overlay').length) { return; } // don't keep adding overlays if one exists
$('#sendEmail')
.find('.name, .city').slideDown(300, function(){ $(this).show(); });
$('.outeremailcontainer').css({ position: 'relative', bottom: 0, left: 0, zIndex: 1001 });
$('<div id="overlay"></div>').appendTo('body');
});
$('#overlay').live('click', function(){
$('#sendEmail')
.css({ backgroundColor : 'transparent' })
.find('.name, .city').slideUp(300);
$('.outeremailcontainer').css({ position : 'static' });
$('#overlay').remove();
});
});
There is also a script at the bottom of the page in an include:
$(document).ready(function(){
$('#emailFrom')
.focus(function(){
if ($('#overlay').length) { return; } // don't keep adding overlays if one exists
$('#sendEmail')
.find('.name, .city').slideDown(300, function(){ $(this).show(); });
$('.outeremailcontainer').css({ position: 'relative', bottom: 0, left: 0, zIndex : 1001 });
$('<div id="overlay"></div>').appendTo('body');
});
$('#overlay').live('click', function(){
$('#sendEmail')
.css({ backgroundColor : 'transparent' })
.find('.name, .city').slideUp(300);
$('.outeremailcontainer').css({ position : 'static' });
$('#overlay').remove();
});
});
$(document).ready(function(){
$("#submit").click(function(){
$(".error").hide();
var hasError = false;
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var emailFromVal = $("#emailFrom").val();
if(emailFromVal == '') {
$("#emailFrom").after('<span class="error"><br />You forgot to enter the email address to send from.</span>');
hasError = true;
} else if(!emailReg.test(emailFromVal)) {
$("#emailFrom").after('<span class="error"<br />>Enter a valid email address to send from.</span>');
hasError = true;
}
var yourNameVal = $("#yourName").val();
if(yourNameVal == '') {
$("#yourName").after('<span class="error"><br />You forgot to enter your name.</span>');
hasError = true;
}
var yourCityVal = $("#yourCity").val();
if(yourCityVal == '') {
$("#yourCity").after('<span class="error"><br />You forgot to enter your city.</span>');
hasError = true;
}
if(hasError == false) {
$(this).hide();
$("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />');
$.post("/includes/sendemail.php",
//emailTo: emailToVal,
{ emailFrom: emailFromVal, yourName: yourNameVal, yourCity: yourCityVal },
function(data){
$("#sendEmail").slideUp("normal", function() {
$("#sendEmail").before('<h3 class="register2">Thank you! You\'re on the email list!</h3><p class="emailbox">Click HERE for your free song.</p>');
});
}
);
}
return false;
});
});
The above code all works just fine. However, I am wanting to use a different form action with some different variables. The form part of the code will need to look like this:
<div class="outeremailcontainer">
<div id="emailcontainer">
<?php include('verify.php'); ?>
<form action="https://madmimi.com/signups/subscribe/66160" method="post" id="mad_mimi_signup_form" class="email">
<h3 class="register2">Newsletter Signup:</h3>
<ul class="forms email">
<li class="name">
<label for="signup_name">Name: </label>
<input type="text" name="signup[name]" class="info" id="signup_name" value="<?php echo $_POST['signup_name']; ?>" /><br />
</li>
<li class="city"><label for="signup_city">City: </label>
<input type="text" name="signup[city]" class="info" id="signup_city" value="<?php echo $_POST['signup_city']; ?>" /><br />
</li>
<li class="email">
<label for="signup_email">Email: </label>
<input type="text" name="signup[email]" class="required" id="signup_email" value="<?php echo $_POST['signup_email']; ?>" />
<?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>';
?>
</li>
<li class="buttons email">
<button type="submit" id="webform_submit_button">Send</button>
<input type="hidden" name="submitted" id="submitted" value="true" />
</li>
</ul>
</form>
<div class="clearing">
</div>
</div>
</div>
I can't figure out which of the js code I will need to change for the div hiding actions to still work with the new values. Can anyone help with this? Thanks!

It looks like you just need to change the names of the fields in your JS file:
<input type="text" name="yourName" class="info" id="yourName" value="<?php echo $_POST['yourName']; ?>" />
has turned into:
<input type="text" name="signup[name]" class="info" id="signup_name" value="<?php echo $_POST['signup_name']; ?>" />
so your JS needs to change from
var yourNameVal = $("#yourName").val();
to
var yourNameVal = $("#signup_name").val();
and the same goes for all your fields, you need to select the correct element in order to manipulate it
here is a link expalining jquery selectors