Javascript to show next table row if current row is poulated - javascript

I have an HTML table which is poulated by a user. The first colum in the row has a drop down box where they select an option generated by a mysql database.
This is for an orders table and the order could consist of 1 row to 72 rows. When the form loads, I only want 1 row to be displayed. When the select an option on the first row, the second row must appear. when an option is selected from the 2nd row, the 3rd row appears. and all the way to the end where row 72 only appears if an option is selected from row 71.
I hope this makes sense.
Below is my HTML table ( for 5 rows only)
<table>
<tr>
<td>
<select name="users" onchange="showUser(1, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint1"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr>
<td>
<select name="users" onchange="showUser(2, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint2"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr>
<td>
<select name="users" onchange="showUser(3, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint3"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr>
<td>
<select name="users" onchange="showUser(4, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint4"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr>
<td>
<select name="users" onchange="showUser(5, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint5"><b>SKU Details will be seen here</b></div>
</td>
</tr>
</table>
I know this is not a coding forum but I have searched the net for a while for a relevant example and found nothing. my javascript knowledge is very verly limited, if someone could point me in the right direction it would be greatly appreciated.
Thanks and regards,
Ryan Smith
Update 17 Jan 2012.
Below please find a simplified script which I cannot get to work correctly.
<html>
<head>
<script type="text/javascript">
function showUser(userNumber, str)
{
document.getElementById("r"+index).style.display="block"
}
</script>
</head>
<body>
<table>
<tr id="r1">
<td><select name="users" onchange="showUser(1, this.value)">
<OPTION VALUE=1>
1
</option>
<OPTION VALUE=2>
2
</option>
<OPTION VALUE=3>
3
</option>
</SELECT>
</td>
</tr>
<tr id="r2" style="display:none;">
<td><select name="users" onchange="showUser(2, this.value)">
<OPTION VALUE=1>
1
</option>
<OPTION VALUE=2>
2
</option>
<OPTION VALUE=3>
3
</option>
</SELECT>
</td>
</tr>
</tr>
<tr id="r3" style="display:none;">
<td><select name="users" onchange="showUser(3, this.value)">
<OPTION VALUE=1>
1
</option>
<OPTION VALUE=2>
2
</option>
<OPTION VALUE=3>
3
</option>
</SELECT>
</td>
</tr>
</table>
</body>
</html>
The javascript function does not appear to be getting called correctly with the on change event.
Thanks and Regards,
Ryan Smith


Set the ids for the rows in a sequential order and then set display property of the every row to display:none, except the first one and in the showUser method called on the each row while performing the selection, set the display for the subsequent row to display:block. You will get it working.
For example:
<table>
<tr id="r1">
<td><select name="users" onchange="showUser(2, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?> </option>
</SELECT>
</td>
</tr>
<tr id="r2" style="display:none;">
<td><select name="users" onchange="showUser(3, this.value)" size=1>
<OPTION VALUE=0>
<?=$optionssku?> </option>
</SELECT>
</td>
</tr>
</table>
function showUser(index,val)
{
document.getElementById("r"+index).style.display="block"
//your code
}
Edit Part
Ok I am guessing what you want just change the size=1 to size=2 in the tag. You will get the values within the dropdown list box itself.
Edit on Jan17
Hey change your function as shown below
<script type="text/javascript">
function showUser(userNumber, str)
{
document.getElementById("r"+(userNumber+1)).style.display="block"
}
</script>
Hope this helps you.


Thought I would post the final solution here and full code. Big Thanks to #AmGates on this one.
index.php
<html>
<head>
<script type="text/javascript">
function showUser(userNumber, str)
{
document.getElementById("r"+(userNumber+1)).style.display="block";
if (str=="")
{
document.getElementById("txtHint" + userNumber).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdata1.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?
$con = mysql_connect('localhost', DBUser', 'DBPass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("DBName", $con);
$skusql="SELECT packcode,concat(packcode, ' - ' , description) as description from skudata";
$resultsku=mysql_query($skusql);
$optionssku="";
while ($row=mysql_fetch_array($resultsku)) {
$sku=$row["packcode"];
$description=$row["description"];
$optionssku.="<OPTION VALUE=\"$sku\">".$description;
}
?>
<table border=1>
<tr>
<td width=393>Product</td>
<td width=200>Category</td>
<td width=150>Selling Unit</td>
<td width=150>Grouping</td>
<td width=150>Full Case QTY</td>
</tr>
</table>
<table>
<tr id="r1">
<td>
<select name="users" onchange="showUser(1, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint1"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r2" style="display:none;">
<td>
<select name="users" onchange="showUser(2, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint2"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r3" style="display:none;">
<td>
<select name="users" onchange="showUser(3, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint3"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r4" style="display:none;">
<td>
<select name="users" onchange="showUser(4, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint4"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r5" style="display:none;">
<td>
<select name="users" onchange="showUser(5, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint5"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r6" style="display:none;">
<td>
<select name="users" onchange="showUser(6, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint6"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r7" style="display:none;">
<td>
<select name="users" onchange="showUser(7, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint7"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r8" style="display:none;">
<td>
<select name="users" onchange="showUser(8, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint8"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r9" style="display:none;">
<td>
<select name="users" onchange="showUser(9, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint9"><b>SKU Details will be seen here</b></div>
</td>
</tr>
<tr id="r10" style="display:none;">
<td>
<select name="users" onchange="showUser(10, this.value)">
<OPTION VALUE=0>
<?=$optionssku?>
</SELECT>
</td>
<td>
<div id="txtHint10"><b>SKU Details will be seen here</b></div>
</td>
</tr>
</table>
</body>
</html>
GetData1.php
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'DBUser', 'DBPass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("DBName", $con);
$sql="SELECT Category, SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<table border=1><tr>";
echo "<td width=200>".$row['Category']."</td>";
echo "<td width=150>".$row['SellingUnits']."</td>";
echo "<td width=150>".$row['Grouping']."</td><td width=150>";
if($row['SellingUnits']=="CS"){echo $row['CasesPerPallet'];} elseif($row['SellingUnits']=="SHR") {echo $row['ShrinksPerPallet'];}
echo "</td></tr></table>";
}
mysql_close($con);
?>
Thanks again to everyone on this site, really appreciated.

Related

Why does my jquery linking work in firefox and microsoft edge but not Google Chrome?

Before that I try and it works text field everything can be validate but when I restart my PC suddenly the validation linking doesn't work. I have try to refresh the browser and try again but it seems to be the same validation doesn't seems to work only in Google Chrome browser.
Here is my code :-
PHP file
<!DOCTYPE HTML>
<html>
<head>
<title>Create New Explore</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css"/>
<link rel="stylesheet" href="css/desaru.css" type="text/css">
<link rel="stylesheet" href="css/header.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/footer.css" type="text/css">
</head>
<body>
<br/>
<?php include('header.html'); ?>
<br/><br/><br/><br/>
<div id="scrollbox">
<!-- Content Section -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><strong>Create New Explore</strong></h1>
</div>
</div>
<br/><br/>
<script>
$(document).ready(function() { // website fully loaded
$('#submit').click(function() { //if button id=submit click trigger function down
var name = $('#foldername').val(); //retrieve input for folder name
var httpvar = 'http://211.25.118.147';
var defaultfolder = '/resource/';
//alert(name); get retrieve test name
if(name==""){ // if foldername input blank
alert("Insert folder name");
}
else {
$.ajax( {
url : "addfolder.php",
type: "POST",
data: {foldername : name}, //pass input foldername = name(variable declare at the top) foldername name base on html that set
success: function(result){ //if success will sent the post data
//alert(result);
if (result=="success") { //based on output echo addfolder.php
alert("File "+name+" has been added");
$("#SelectImageFolder option[value='.."+defaultfolder+name+"']").remove();
$("#SelectImageFolder").append($('<option>', { //add new options
value : ".."+defaultfolder+name ,
text : httpvar+defaultfolder+name
}))
$("#SelectImageFolder option:last").attr("selected", "selected");//auto select the last option
}
else if(result=="fail") {// if the file exist then result will fail to create the file
alert("Something wrong happened");
}
}
}
)
}
})
});
</script>
<form id="createexplore" action="CreateExploreProcess.php" method="post" enctype="multipart/form-data" >
<table class='table table-hover table-responsive table-bordered'>
<!--<tr>
<td>Class</td>
<td colspan="2">
<input type='text' name='Class' readonly class='form-control' value='Explore' maxlength="20"/>
</td>
</tr>-->
<!--<tr>
<td>Placemark</td>
<td colspan="2">
<Input type='number' name="Placemark" class='form-control' >
</td>
</tr>-->
<tr>
<td>Category</td>
<td colspan="2">
<div class="custom-select" style="width:200px;">
<select required="true">
<option value="" selected disabled hidden>Select Category..</option>
<option value="Stay">Stay</option>
<option value="Dining">Dining</option>
<option value="Facilities">Facilities</option>
<option value="ThingstoDo">Things to Do</option>
<option value="NearbyAttractions">Nearby Attractions</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Sub Category</td>
<td colspan="2">
<div class="custom-select" style="width:200px;">
<select required>
<option value="" selected disabled hidden>Select Sub Category... </option>
<option value="TheWestinDesaruCoastResort"> The Westin Desaru Coast Resort </option>
<option value="Kiosk"> Kiosk </option>
<option value="ShuttlePickupPoints"> Shuttle Pickup Points </option>
<option value="Rides&Attractions"> Rides & Attractions </option>
<option value="ParkingBay"> Parking Bay </option>
<option value="DesaruOstrichFarm"> Desaru Ostrich Farm </option>
<option value="Restroom"> Restroom </option>
<option value="Cafe"> Cafe </option>
<option value="AnataraCoastResort&Villas"> Anatara Coast Resort & Villas </option>
<option value="Kids"> Kids </option>
<option value="DesaruCrocodileFarm"> Desaru Crocodile Farm </option>
<option value="Restaurant"> Restaurant </option>
<option value="Riverside"> Riverside </option>
<option value="InformartionKiosk"> Informartion Kiosk </option>
<option value="Amphitheater"> Amphitheater </option>
<option value="MainAttractions"> Main Attractions </option>
<option value="DesaruCoastAdventureWaterPark"> Desaru Coast Adventure Water Park </option>
<option value="Golf"> Golf </option>
<option value="LuxuryResorts&Villas"> Luxury Resorts & Villas </option>
<option value="HardRockHotelDesaruCoast"> Hard Rock Hotel Desaru Coast </option>
<option value="ConferenceCentre"> Conference Centre </option>
<option value="Shopping"> Shopping </option>
<option value="Spas"> Spas </option>
<option value="BeachActivities"> Beach Activities </option>
<option value="DesaruFruitFarm"> Desaru Fruit Farm </option>
<option value="DisabledToilet"> Disabled Toilet </option>
<option value="FirstAid"> First Aid </option>
<option value="ChangingRoom"> Changing Room </option>
<option value="Locker"> Locker </option>
<option value="BabyChangingRoom"> Baby Changing Room </option>
<option value="LostandFound"> Lost and Found </option>
<option value="MuslimPrayerRoom"> Muslim Prayer Room </option>
</select>
</div>
</td>
</tr>
<tr>
<td>Item</td>
<td colspan="2">
<div class="custom-select" style="width:200px;">
<select required>
<option value="" selected disabled hidden>Select Item... </option>
<option value="Hotel"> Hotel </option>
<option value="Kiosks"> Kiosks </option>
<option value="ShuttlePickup"> Shuttle Pickup </option>
<option value="Rides&Attractions"> Rides & Attractions </option>
<option value="ParkingBay"> Parking Bay </option>
<option value="Sightseeing"> Sightseeing </option>
<option value="Restroom"> Restroom </option>
<option value="Cafe"> Cafe </option>
<option value="Kids"> Kids </option>
<option value="Restaurant"> Restaurant </option>
<option value="Riverside"> Riverside </option>
<option value="InformartionKiosks"> Informartion Kiosks </option>
<option value="Amphitheater"> Amphitheater </option>
<option value="MainAttractions"> Main Attractions </option>
<option value="DesaruCoastAdventureWaterPark"> Desaru Coast Adventure Water Park </option>
<option value="Golf"> Golf </option>
<option value="ConferenceCentre"> Conference Centre </option>
<option value="Shopping"> Shopping </option>
<option value="Spas"> Spas </option>
<option value="BeachActivities"> Beach Activities </option>
<option value="DisabledToilet"> Disabled Toilet </option>
<option value="FirstAid"> First Aid </option>
<option value="ChangingRoom"> Changing Room </option>
<option value="Locker"> Locker </option>
<option value="BabyChangingRoom"> Baby Changing Room </option>
<option value="LostandFound"> Lost and Found </option>
<option value="MuslimPrayerRoom"> Muslim Prayer Room </option>
</select></div>
</td>
</tr>
<tr>
<td>Title</td>
<td colspan="2">
<input type="text" required name='Title' class='form-control' maxlength="150"/>
</td>
</tr>
<tr>
<td>Details Header</td>
<td colspan="2">
<input type="text" required name="DetailsHeader" class='form-control' maxlength="200"/>
</td>
</tr>
<tr>
<td>Details</td>
<td colspan="2">
<textarea required name="Details" rows="8" class='form-control' maxlength="4000"></textarea>
</td>
</tr>
<tr>
<td>Button Promo</td>
<td colspan="2">
<Input required type="text" name="ButtonPromo" class='form-control' maxlength="20"/>
</td>
</tr>
<tr>
<td>Key Features</td>
<td colspan="2">
<Input required type="text" name="KeyFeatures" class='form-control' maxlength="20"/>
</td>
</tr>
<tr>
<td>Features</td>
<td colspan="2">
<textarea required name="FeaturesList" rows="5" class='form-control' maxlength="1000"></textarea>
</td>
</tr>
<tr>
<td>Image Folder</td>
<td colspan="2">
<select name="SelectImageFolder" id="SelectImageFolder" class='form-control'>
<option value="selected" selected="selected">Select a folder</option>
<?php
$dirs = glob("../resource/*", GLOB_ONLYDIR);
// create variable constant url
$httpvar = 'http://211.25.118.147';
foreach($dirs as $val){
$httpcon = str_replace("..",$httpvar,$val);
echo '<option value="'.$val.'">'.$httpcon."</option>\n";
}
?>
</select><br/>
<div class="input-group">
<input type="text" required name="foldername" id="foldername" placeholder="Folder Name" class='form-control' maxlength="100" />
<span class="input-group-btn">
<button type="button" name="submit" id="submit" class="btn"/>Add Folder</button>
</span>
</div></td>
<script="js/script.js">
</script>
</tr>
<tr>
<td>List Images</td>
<td colspan="2">
<input type="file" name="FileListImage" id="FileListImage">
</td>
</tr>
<tr>
<td>Carousel 1</td>
<td colspan="2">
<input required type="file" name="FileCarousel1" id="FileCarousel1">
</td>
</tr>
<tr>
<td>Carousel 2</td>
<td colspan="2">
<input type="file" name="FileCarousel2" id="FileCarousel2">
</td>
</tr>
<tr>
<td>Carousel 3</td>
<td colspan="2">
<input type="file" name="FileCarousel3" id="FileCarousel3">
</td>
</tr>
<tr>
<td>Carousel 4</td>
<td colspan="2">
<input type="file" name="FileCarousel4" id="FileCarousel4">
</td>
</tr>
<tr>
<td>Carousel 5</td>
<td colspan="2">
<input type="file" name="FileCarousel5" id="FileCarousel5">
</td>
</tr>
<tr>
<td>Carousel 6</td>
<td colspan="2">
<input type="file" name="FileCarousel6" id="FileCarousel6">
</td>
</tr>
<tr>
<td>Find On Map</td>
<td colspan="2">
<Input required type="text" name="FindOnMap" class='form-control' maxlength="100"/>
</td>
</tr>
<tr>
<td>Call To Book</td>
<td colspan="2">
<Input type="text" name="CallToBook" class='form-control' maxlength="100"/>
</td>
</tr>
<!--<tr>
<td>Find On Map Ico</td>
<td> <input type="url" name="FindOnMapIco" class='form-control' /> </td>
<td><input type="file" name="FileImage" id="FileImage"></td>
</tr>
<tr>
<td>Call To Book Ico</td>
<td> <input type="url" name="CallToBookIco" class='form-control' /></td>
<td><input type="file" name="FileImage" id="FileImage"></td>
</tr>-->
<tr>
<!--<td >Icon</td>
<td colspan="2">
<input type="url" name="Icon" class='form-control' maxlength="100"/>
</td>
</tr>-->
<tr>
<td>In Park</td>
<td colspan="2">
<div class="custom-select" style="width:200px;">
<select required>
<option value="" selected disabled hidden>Select... </option>
<option value="Yes"> Yes </option>
<option value="No"> No </option>
<option value=""> </option>
</select>
</div>
</td>
</tr>
<tr>
<td>Ticket Entry</td>
<td colspan="2">
<input type="text" name="TicketedEntry" class='form-control' maxlength="100"/>
</td>
</tr>
<tr>
<td>Operation Hours</td>
<td colspan="2">
<textarea name="OperationHours" rows="6" class='form-control'> </textarea>
</td>
</tr>
<tr>
<td>Ride Details</td>
<td colspan="2">
<textarea name="RideDetails" class='form-control' maxlength="255"/></textarea>
</td>
</tr>
<tr>
<td>Listing Details</td>
<td colspan="2">
<textarea name="ListingDetails" class='form-control' maxlength="255"/></textarea>
</td>
</tr>
<tr>
<!--<td>Favourites</td>
<td colspan="2">
<div class="custom-select" style="width:200px;">
<select>
<option value="" selected disabled hidden>Select... </option>
<option value="Yes"> Yes </option>
<option value=""> </option>
</select>
</div>
</td>
</tr>
<tr>
<td>FB Like</td>
<td colspan="2">
<div class="custom-select" style="width:200px;">
<select>
<option value="" selected disabled hidden>Select... </option>
<option value="Yes"> Yes </option>
<option value=""> </option>
</select>
</div>
</td>
</tr>-->
<tr>
<td>More Details</td>
<td colspan="2">
<input type="text" name="MoreDetails" class='form-control' maxlength="100"/>
</td>
</tr>
<tr>
<td>Distance </td>
<td colspan="2">
<input type="text" name="DistanceAway" class='form-control' maxlength="100"/>
</td>
</tr>
<tr>
<td>Status</td>
<td colspan="2">
<div class="custom-select" style="width:200px;">
<select required>
<option value="" selected disabled hidden>Status... </option>
<option value="Active"> Active </option>
<option value="Inactive"> Inactive </option>
</select>
</div>
</td>
</tr>
<tr>
<td>Zoom</td>
<td>
<input type="number" name="ZoomStart" class='form-control' placeholder="Start" min="14" max="19"/>
</td>
<td>
<input type="number" name="ZoomEnd" class='form-control' placeholder="End" min="14" max="19"/>
</td>
</td>
</tr>
<tr>
<td>GPS Coordinate</td>
<td>
<input type="text" id="Lat" name="Lat" class='form-control' placeholder="Latitude" maxlength="12"/>
</td>
<td>
<input type="text" id="Lng" name="numeric" class='form-control' placeholder="Longitude" maxlength="12"/>
</td>
</td>
<script src="js/script.js">
</script>
</tr>
<tr>
<td>Phone</td>
<td colspan="2">
<input required type="text" id="hpno" name="Phone" class='form-control' maxlength="12"/>
</td>
<script src="js/script.js"></script>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type='submit' id='submit' name='Add' value='Save' class='btn btn-warning'/>
<a href='Explore.php' class='btn btn-danger'>Back</a>
</td>
</tr>
<span id="error_message" class="text-danger"></span>
<span id="success_message" class="text-success"></span>
</table>
</form>
<!-- End Content Section -->
<?php include('footer.html'); ?>
</div> </div>
</body>
</html>
And This is my script file
script.js
$(function() {
$('#PromoCode').on('keypress', function(e) {
if (e.which == 32)
return false;
});
});
$(".input-group").keypress(function(e){
if(String.fromCharCode(e.keyCode).match(/[^_0-9&a-z]/g))
return false;
});
var Phone='';
$("#hpno").keyup(function(e){
if($(this).val().match(/^\+?\d{0,}$/))
{
Phone=$(this).val();
$(this).val(Phone);
}
else{
$(this).val(Phone);
} });
$("#hpno").on('paste',function(){
Phone='';
});
$("#price").on("keyup", function(){
var valid = /^\d{0,4}(\.\d{0,2})?$/.test(this.value),
val = this.value;
if(!valid){
console.log("Invalid input!");
this.value = val.substring(0, val.length - 1);
}
$("#price").on("blur change",function (event) {
$(this).val(parseFloat($(this).val() || 0).toFixed(2));
});
});
$(function(){
var specialKeys = new Array();
specialKeys.push(46); // allow dot which has keyCode = 46 in specialKeys
$("#Lat,#Lng").on("blur change",function (event) {
$(this).val(parseFloat($(this).val() || 0).toFixed(8));
});
//on keypress you can restrict only number and some special characters
$("#Lat,#Lng").on("keypress", function (e) {
var keyCode = e.which ? e.which : e.keyCode;
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
return ret;
});
// restrict copy paste
$("#Lat,#Lng").on("paste drop", function (e) {
return false;
});
});
$(document).ready(function () {
$("#ValidFrom").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var dt2 = $('#ValidTo');
var startDate = $(this).datepicker('getDate');
var minDate = $(this).datepicker('getDate');
dt2.datepicker('setDate', minDate);
startDate.setDate(startDate.getDate() + 30);
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
dt2.datepicker('option', 'minDate', minDate);
$(this).datepicker('option', 'minDate', minDate);
}
});
$('#ValidTo').datepicker({
dateFormat: "dd-M-yy"
});
});

Your event binding function may not work if the js file is loaded before the dom is loaded.
Please try to include your js file at the bottom of your php file.
Or you can change the event binding function to $(document).on(event, selector, function)

Onclick is not calling javascript function

I have some JavaScript code in an HTML page with a button. I have two functions called 'total()' and 'con()' that handles the onClick event of the 2 buttons. i have tried putting the script tag on top of the form, buttons and i also tried putting it in the head tag. The code for the button is as follows
The problem is that when the button is clicked, the function is not called. What am I doing wrong here?
thanks for not criticizing me, i'm just a begginer.
function con() {
var conf = confirm('Are you finished?');
if (conf) {
return true
} else {
return false
}
}
function total() {
// Some Code here
}
<form action="reserve.php" method="POST">
<div class="tick"><img class="ticket" src='assets/img/<?php
echo($row["Photo"]);?>' style='margin-top:10px;'>
<h4>
<?php echo($row["Event_Name"]); ?>
</h4>
<div class="table-responsive1">
<table class="table">
<tr>
<th>No. Of Persons</th>
<th>
<select class="form-control select2" name="Ticks" id="p" required="">
<option selected="">Select # of Persons</option>
<option value="1">Admit One</option>
<option value="2">Admit Two</option>
<option value="3">Admit Three</option>
<option value="4">Admit Four</option>
<option value="5">Admit Five</option>
</select>
</th>
</tr>
<tr>
<th>Zone</th>
<th>
<select class="form-control select1" name="TickType" id="z" required="">
<option value="" selected="">Select a zone</option>
<option value="ga" id="ga" name="TickType">General Admission</option>
<option value="b" id="b">Bronze</option>
<option value="s" id="s">Silver</option>
<option value="g" id="g">Gold</option>
<option value="p" id="p">Platinum</option>
<option value="v" id="v">Vip</option>
</select>
</th>
</tr>
<div class="table-responsive">
<table class="table">
<thead>
<h3>Prices</h3>
<tr>
<th>Gen. Admission</th>
<th>Bronze</th>
<th>Silver</th>
<th>Gold</th>
<th>Platinum</th>
<th>VIP</th>
</tr>
</thead>
<tbody>
<tr>
<td id="ge">
<?php echo($row["GenAd_Price"]);?>~Php</td>
<td id="br">
<?php echo($row["Bronze_Price"]);?>~Php</td>
<td id="si">
<?php echo($row["Silver_Price"]);?>~Php</td>
<td id="go">
<?php echo($row["Gold_Price"]);?>~Php</td>
<td id="pl">
<?php echo($row["Platinum_Price"]);?>~Php</td>
<td id="vi">
<?php echo($row["Vip_Price"]);?>~Php</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<input type='hidden' length='1' value='<?php echo($row["Event_ID"]); ?>' name='id'>
<button class="but" type="submit" onclick="return con()">Done</button>
</form>
<h4 id="tot" style="position:absolute; top:80%;">Total: </h4>
<button type="button" class="but" id="btn" onClick="total()">Compute</button>
</div>

The code is working for me. Whatever you are using, perhaps it doesn't support confirm(). Try if this works:
function con() {
var sentence = document.getElementById("sentence");
sentence.innerHTML = "Are you finished?";
document.getElementById("conf1").style.visibility = "visible";
document.getElementById("conf2").style.visibility = "visible";
}
function isDone(bool) {
if (bool) {
// do something
} else {
// do something
}
}
function total() {
// Some Code here
}
<form action="reserve.php" method="POST">
<div class="tick"><img class="ticket" src='assets/img/<?php
echo($row["Photo"]);?>' style='margin-top:10px;'>
<h4>
<?php echo($row["Event_Name"]); ?>
</h4>
<div class="table-responsive1">
<table class="table">
<tr>
<th>No. Of Persons</th>
<th>
<select class="form-control select2" name="Ticks" id="p" required="">
<option selected="">Select # of Persons</option>
<option value="1">Admit One</option>
<option value="2">Admit Two</option>
<option value="3">Admit Three</option>
<option value="4">Admit Four</option>
<option value="5">Admit Five</option>
</select>
</th>
</tr>
<tr>
<th>Zone</th>
<th>
<select class="form-control select1" name="TickType" id="z" required="">
<option value="" selected="">Select a zone</option>
<option value="ga" id="ga" name="TickType">General Admission</option>
<option value="b" id="b">Bronze</option>
<option value="s" id="s">Silver</option>
<option value="g" id="g">Gold</option>
<option value="p" id="p">Platinum</option>
<option value="v" id="v">Vip</option>
</select>
</th>
</tr>
<div class="table-responsive">
<table class="table">
<thead>
<h3>Prices</h3>
<tr>
<th>Gen. Admission</th>
<th>Bronze</th>
<th>Silver</th>
<th>Gold</th>
<th>Platinum</th>
<th>VIP</th>
</tr>
</thead>
<tbody>
<tr>
<td id="ge">
<?php echo($row["GenAd_Price"]);?>~Php</td>
<td id="br">
<?php echo($row["Bronze_Price"]);?>~Php</td>
<td id="si">
<?php echo($row["Silver_Price"]);?>~Php</td>
<td id="go">
<?php echo($row["Gold_Price"]);?>~Php</td>
<td id="pl">
<?php echo($row["Platinum_Price"]);?>~Php</td>
<td id="vi">
<?php echo($row["Vip_Price"]);?>~Php</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<input type='hidden' length='1' value='<?php echo($row["Event_ID"]); ?>' name='id'>
<button class="but" type="submit" onclick="return con()">Done</button>
</form>
<h4 id="tot" style="position:absolute; top:80%;">Total: </h4>
<button type="button" class="but" id="btn" onClick="total()">Compute</button>
<p id="sentence"></p>
<button id="conf1" style="visibility: hidden" onclick="isDone(true)">Yes</button>
<button id="conf2" style="visibility: hidden" onclick="isDone(false)">No</button>
</div>
Note: This is just an example. You don't have to use this.

load qty by jquery in multi add

I use jQuery and PHP for seeing the quantity (Inventory) of a product in the database.
index.php code
<table>
<tr style="background-color:black;color: #fff;text-align: center;">
<td style="width:30%">name</td>
<td style="width:30%">qty</td>
</tr>
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="" >
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
<td>
<span class="contentsr" id="contentsr" ></span></td>
</tr>
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="" >
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
<td>
<span class="contentsr" id="contentsr" ></span></td>
</tr>
<tr>
<td colspan="8">
<input style="margin-right: 44%" type="submit" id="sumbit" onclick="calc(this) findTotal() allfees()" name="submit" value="submit"/>
</td>
</tr>
</table>
and mojodi_test code is this:
<?php include 'db/db.php'; ?>
<script type="text/javascript">
$(document).ready(function(){
$('#jens_id').change(function() {
if($(this).val() !=''){
$.get('mojodi_data.php',{whats: $(this).val()}, function(data) {
$('#contentsr').html(data);
});
}
});
});
</script>
<?php
if(isset($_GET['whats'] )){
$ids = $_GET['whats'];
$sql=$db->query("SELECT * FROM anbar WHERE jens_id='$ids'");
while($row=$sql->fetch()){
$mojodiha= ($row['kharid'] - $row['forosh']); ?>
<td hidden="" > <input hidden="" name="mojodi" type="text" value="<?php echo $mojodiha ?>" /></td>
<?php echo $mojodiha; ?>qty
<?php } } ?>
This code works for the first row, but not afterwards. other rows qty is empty and only shows the first row's quantity.

Multiple values from a dropdown issue

So far i have a dropdown which each has a corresponding number which works just fine. Each number also has a corresponding trait also which will be placed in the 4th column. So what i'm trying to ask is can the dropdown have two values attached to it (a number and a trait) or should I break it up into two parts (1: dropwdown displays a number & 2: number displays a trait)? and how to do that please and thanks you.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option value="1">0-4</option> //trait1
<option value="2">5-6</option> //trait2
<option value="3">7-9</option> //trait3
<option value="4">10-11</option> //trait4
<option value="5">12-14</option> //trait5
<option value="6">15-16</option> //trait6
<option value="7">17-18</option> //trait7
<option value="8">19-20</option> //trait8
<option value="9">21-22</option> //trait9
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>

You can bind additional values to your DOM elements using data attributes. Here is how you do that.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
$('#warmthTrait').val($(this).data("trait"));
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option data-trait="trait1" value="1">0-4</option> //trait1
<option data-trait="trait2" value="2">5-6</option> //trait2
<option data-trait="trait3" value="3">7-9</option> //trait3
<option data-trait="trait4" value="4">10-11</option> //trait4
<option data-trait="trait5" value="5">12-14</option> //trait5
...
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>
Hope it helps.

Form validation if user leaves drop down populated with text

I have a page that I need to pop up an error message if the user leaves information in a box.
The user is selecting "Yes" from the Sale drop down and selecting a price (for example £10) from the New Product drop down. They are then changing the Sale drop down to "No" but leaving the price (£10) and this information is being submitted to the database.
How can I add code that warns the user that they have left the price (£10) when they have selected "No" in the Sale drop down?
<form name="test" onsubmit="return validateForm()" method="POST">
<table width="716">
<input name="CallType2" type="hidden" id="CallType2" value="Unfulfilled Sales"/></td>
</tr><tr>
<td style="text-align: left;">Mobile Number: </td>
<td colspan="2" style="text-align: left;"><input name="MobileNumber" type="text" id="MobileNumber" maxlength="11" /></td>
</tr>
<tr>
<td style="text-align: left;">Sale:</td>
<td colspan="2" style="text-align: left;"><select name="Sale" id="Sale" onchange="display(this,'Yes','No');" >
<option value=""></option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select> </td>
</tr>
<tbody id="Yes" style="display: none;">
<tr>
<td class="title"><div align="left">New Product:</div></td>
<td colspan="2" class="field">
<div align="left">
<label>
<select name="SaleProduct" id="SaleProduct">
<option value=""></option>
<option value="£10">£10</option>
<option value="£6.50">£6.50</option>
</select> </label>
</div></td>
</tr>
<tr>
</p>
</div></td>
</tr>
<tbody id="No" style="display: none;">
<tr>
<td class="title"><div align="left">Non Sale Reason:</div></td>
<td colspan="2" class="field">
<div align="left">
<label>
<span style="text-align: left;">
<select name="CancelReason" id="CancelReason">
<option value=""></option>
<option value="Account changes incomplete">Account changes incomplete</option>
<option value="Customer Credit Rating">Customer Credit Rating</option>
<option value="Handset Ineligible Damaged">Handset Ineligible Damaged</option>
<option value="Handset Ineligible (Matrix)">Handset Ineligible (Matrix)</option>
<option value="Migration not yet complete">Migration not yet complete</option>
<option value="No transaction number">No transaction number</option>
<option value="Insurance already on account">Insurance already on account</option>
</select>
</span></label>
</div></td>
</tr>
</tbody>
</tr>
</tr>
<br>
</tr>
</table>
<p>
<input type="hidden" name="MM_insert" value="test">
<p align="center">
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</fieldset>
</body>
https://jsfiddle.net/hpowe25j/
There is already a validateForm() running on submit to check that other boxes (that I have removed from this example) are not left blank
Thank you

I don't think warning a user at that point is the right thing to do. They don't want to sale, why they should be getting a warning about the price. I think you should just remove the value in your validateForm function if Sale=No.
if(document.getElementById("Sale").value == undefined || document.getElementById("Sale").value == 'No')
document.getElementById('SaleProduct').value = "";
Or, if you really want to warn the user, change your 'display' function triggered from the onchange event. add this to the code
if(document.getElementById("Sale").value == 'No' && document.getElementById('SaleProduct').value != '')
alert('You should remove the price!'); // or make some div visible that contains the error message
You can also do this on validateForm.

Categories