We Keep Coding

check input number whether bigger than certain value by using javascript

I am trying to do some calculation in page, however, it doesn't work, I have tried the following code, does anyone can tell me the correct answer?
For example, when I enter a number then it will do one of the calculation.
<table><tr><td>
<input name="per_pax" size="2" style="border-style:none" type="text" id="per_pax" value="">
</td><td>
<input name="sum_tlcost" type="hidden" id="sum_tlcost" value="<?php echo $tl_cost;?>">
<input name="sum_htl_pp" type="hidden" id="sum_htl_pp" value="<?php echo $sum_htl_pp;?>">
<input name="sum_coach" type="hidden" id="sum_coach" value="<?php echo $sum_coach;?>">
<input name="pax" size="5" readonly="readonly" type="text" id="pax" value="">
</td></tr></table>
<script>
$(document).ready(function () {
var total = Number($("#per_pax").val());
if(total >= 20) {
$("#sum_tlcost,#sum_htl_pp,#sum_coach,#per_pax").keyup(function () {
if (parseInt($("#per_pax").val()) >= 20) {
$("#pax").val(Math.round(Number($("#sum_htl_pp").val()) + Number($("#sum_tlcost").val()) / Number($("#per_pax").val()) + Number($("#sum_coach").val()) / Number($("#per_pax").val()));
)}else{
$("#pax").val(Math.round(Number($("#sum_htl_pp").val()) + Number($("#sum_tlcost").val()) + Number($("#sum_coach").val())))
}
})}})
</script>

I'm not overly fond of the jquery keyup calls... so here's a snippet that should call your function using normal DOM event calls. The input event triggers as they type.. which should be similar to what you're trying to do with the keyups... I also cleaned up the function itself to make it more readable for presentation.
function onInputChange() {
var perPax = parseInt($("#per_pax").val());
var tlCost = Number($("#sum_tlcost").val());
var htlPP = Number($("#sum_htl_pp").val());
var coach = Number($("#sum_coach").val());
var newValue = 0;
if (perPax < 20) {
newValue = (htlPP + tlCost) / (perPax + (coach / perPax));
} else {
newValue = htlPP + tlCost + coach;
}
$("#pax").val(Math.round(newValue))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input name="per_pax" size="2" style="border-style:none" type="text" id="per_pax" value="" oninput="onInputChange()">
</td>
<td>
<input name="sum_tlcost" type="hidden" id="sum_tlcost" value="<?php echo $tl_cost;?>">
<input name="sum_htl_pp" type="hidden" id="sum_htl_pp" value="<?php echo $sum_htl_pp;?>">
<input name="sum_coach" type="hidden" id="sum_coach" value="<?php echo $sum_coach;?>">
<input name="pax" size="5" readonly="readonly" type="text" id="pax" value="">
</td>
</tr>
</table>

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>

DIV does not show on link with variables

For some reason a certain div will now show up when i click a button. I'm fairly new to JS so can't really figure out why is it only on that one. Basically the order should be
Click on Add Shots -> Show Games and Rounds ( Works Fine) -> Click Submit -> Show Targets on each round (Works Fine) -> Click Target -> Show Fill in form (the "fillshotsdiv") (NOT working).
Below is my code. What am i missing?
JS
<script>
$(function() {
$(".but").on("click",function(e) {
e.preventDefault();
$(".contentfill").hide();
$("#"+this.id+"div").show();
});
});
function refreshTargets() {
var load = $.get('functions.php',{gameShots:"<?php echo $_GET['gameShots']; ?>", roundShots:"<?php echo $_GET['roundShots']; ?>",function:"drawTargets"});
$(".targetinfo").html('Refreshing');
load.error(function() {
console.log("Mlkia kaneis");
$(".targetinfo").html('failed to load');
// do something here if request failed
});
load.success(function( res ) {
console.log( "Success" );
$(".targetinfo").html(res);
});
load.done(function() {
console.log( "Completed" );
});
}
</script>
HTML
<div id="addshotsdiv" class="contentfill">
<form action="">
<select name="gameShots" class="gameShot">
<script>
refreshGameDel();
</script>
</select>
<select name="roundShots" class="roundShot">
<option value="nothing">-----</option>
<option value="Round 1">Round 1</option>
<option value="Round 2">Round 2</option>
</select>
<button type="submit" >Submit</button>
</form>
</div>
<div class="targetinfo">
<script>
refreshTargets();
</script>
</div>
<div id="fillshotsdiv" class="contentfill">
<form method="post" action="addScoreToRound.php?targetNo=<?php echo $_GET['targetNo'];?>&gameNo=<?php echo $_GET['gameNo'];?>&roundName=<?php echo $_GET['roundName']; ?>">
<table border="1">
<tr><th>Shot Number</th><th>Arrow 1</th><th>Arrow 2</th><th>Arrow 3</th></tr>
<tr><td>1</td><td><input type="text" name="arrow_1_1"></td><td><input type="text" name="arrow_1_2"></td><td><input type="text" name="arrow_1_3"></td></tr>
<tr><td>2</td><td><input type="text" name="arrow_2_1"></td><td><input type="text" name="arrow_2_2"></td><td><input type="text" name="arrow_2_3"></td></tr>
<tr><td>3</td><td><input type="text" name="arrow_3_1"></td><td><input type="text" name="arrow_3_2"></td><td><input type="text" name="arrow_3_3"></td></tr>
<tr><td>4</td><td><input type="text" name="arrow_4_1"></td><td><input type="text" name="arrow_4_2"></td><td><input type="text" name="arrow_4_3"></td></tr>
<tr><td>5</td><td><input type="text" name="arrow_5_1"></td><td><input type="text" name="arrow_5_2"></td><td><input type="text" name="arrow_5_3"></td></tr>
<tr><td>6</td><td><input type="text" name="arrow_6_1"></td><td><input type="text" name="arrow_6_2"></td><td><input type="text" name="arrow_6_3"></td></tr>
<tr><td>7</td><td><input type="text" name="arrow_7_1"></td><td><input type="text" name="arrow_7_2"></td><td><input type="text" name="arrow_7_3"></td></tr>
<tr><td>8</td><td><input type="text" name="arrow_8_1"></td><td><input type="text" name="arrow_8_2"></td><td><input type="text" name="arrow_8_3"></td></tr>
<tr><td>9</td><td><input type="text" name="arrow_9_1"></td><td><input type="text" name="arrow_9_2"></td><td><input type="text" name="arrow_9_3"></td></tr>
<tr><td>10</td><td><input type="text" name="arrow_10_1"></td><td><input type="text" name="arrow_10_2"></td><td><input type="text" name="arrow_10_3"></td></tr>
</table>
<button type="submit">Submit</button>
</form>
</div>
PHP that refreshTargets calls is
if($_GET['function']=="drawTargets")
{
$gameNo = $_GET['gameShots'];
$roundName = $_GET['roundShots'];
$sql=mysql_query("SELECT * FROM tbl_Round WHERE match_id='$gameNo' && round_name='$roundName'")
or die(mysql_error());
while ($row = mysql_fetch_array($sql)) {
echo '<p><button class="but" id="fillshots" type="button">'.$row["target_name"].'- Player'.$row['player_id'].'</button></p>';
}
}

You need to use event delegation on your click handler because .but is a dynamically inserted element:
$('.targetinfo').on('click', '.but', function(e) {
e.preventDefault();
$('.contentfill').hide();
$('#' + this.id + 'div').show();
});

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

jCrop not updating hidden fields

I'm using jCrop to Crop a image uploaded by someone. It's working fine in my local machine, but in server it's not able to update coordinates(crop area) in hidden fields.
I try my hand but still not able to find problem :(
HTML
<form id="cropIt" action="crop.php" method="post">
<input type="hidden" id="cropTop" name="x" value="0" />
<input type="hidden" id="cropLeft" name="y" value="0" />
<input type="hidden" id="cropWidth" name="w" value="0" />
<input type="hidden" id="cropHeight" name="h" value="0" />
<input type="hidden" id="image_name" name="image_name" value="<?php echo $uploadDir . $file; ?>" />
<p style="paddin-top: 10px; text-align: center;"><input type="submit" name="cropImage" /></p>
</form>
JavaScript
function updateCoords(c) {
$('#cropTop').val(c.x);
$('#cropLeft').val(c.y);
$('#cropWidth').val(c.w);
$('#cropHeight').val(c.h);
}
function checkCoords() {
if (parseInt($('#w').val())) {
return true;
}
// alert('Please select a crop region then press submit.');
// return false;
};
$(function($) {
var newImg = $("#profileImage").clone();
newImg.css("display", "none").removeAttr("id").appendTo("body");
var profileImgWidth = newImg.width();
var profileImgHeight = newImg.height();
newImg.remove();
$('#profileImage').Jcrop({
onSelect: updateCoords,
onChange: updateCoords,
boxWidth: 400,
boxHeight: 300,
trueSize: [profileImgWidth, profileImgHeight]
});
});