copy of the table after user changes some inputs - javascript

I have table with some input fields where user can enter the inputs in it.once user enters and click on Add button.copy has to be done with user input fields.
I want to show exact copy of the table after user changes the fields by clicking on button.
function duplicate(val)
{
var editTable=$('#editable').html()
var totalGarments=$('#totalGarments').val()
test = parseInt(totalGarments)+1
$('#totalGarments').val(test)
var testVal=$('#totalGarments').val()
var duplicatVal= parseInt(val)+1
var selectOtmGarmentsHtml=$('#otmgarments'+val).html()
var selectOtmColorsHtml=$('#otmcolors'+val).html()
var selectOtmSizeHtml=$('#otmsize'+val).html()
$('#editable'+val).after("<table cellpadding='0' cellspacing='0' border='0' class='table table-striped table-bordered' id='editable"+testVal+"'><thead><tr><td>Garments</td><td>Color</td><td>Size</td> <td>Quantity</td> <td><span onclick='addNew("+testVal+")' class='btn btn-sm block btn-success'>Add</span></td> </tr> <tbody> <tr><td><select class='form-control' name='otmgarments[]' id='otmgarments"+testVal+"'>"+selectOtmGarmentsHtml +"</select></td> <td><select class='form-control' name='otmcolors[]' id='otmcolors"+testVal+"'>"+selectOtmColorsHtml +"</select> </td> <td><select class='form-control' name='otmsize[]' id='otmsize"+testVal+"'>"+selectOtmSizeHtml +"</select> </td> <td> <input type='text' value='' name='otmquantity[]' id='otmquantity"+duplicatVal+"' class='form-control'></td> <td><span onclick='duplicate("+testVal+")' class='btn block btn-sm btn-danger'>Duplicate</span></td></tr> </tbody> </table>")
var garmentSearch=$('#otmgarments'+val).val()
var colorSearch=$('#otmcolors'+val).val()
var sizeSearch=$('#otmsize'+val).val()
var quantityValue=$('#otmquantity'+val).val()
$('#otmgarments'+duplicatVal+' option[value='+garmentSearch+']').attr('selected',true);
$('#otmcolors'+duplicatVal+' option[value='+colorSearch+']').attr('selected',true);
$('#otmsize'+duplicatVal+' option[value='+sizeSearch+']').attr('selected',true);
$('#otmquantity'+duplicatVal).val(quantityValue)
}
<div class="form-group" >
<label class="col-sm-2 control-label">Quantity</label>
<div class="col-sm-10">
<input type="text" name="totalGarments" id="totalGarments" value="1">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="editable1">
<thead>
<tr>
<td>Garments</td>
<td>Color</td>
<td>Size</td>
<td>Quantity</td>
<td><span onclick='addNew(1)' class="btn btn-sm block btn-success">Add</span></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control" name="otmgarments[]" id="otmgarments1" >
<option value="AZ">Shirt</option>
<option value="CO">Pant</option>
<option value="ID">T-Shirt</option>
<option value="MT">Sports Wear</option>
<option value="NE">Jeans</option>
</select>
</td>
<td>
<select class="form-control" name="otmcolors[]" id="otmcolors1">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="White">White</option>
<option value="Purple">Purple</option>
<option value="Green">Green</option>
</select>
</td>
<td>
<select class="form-control" name="otmsize[]" id="otmsize1">
<option value='xs'>XS</option>
<option value='s'>S</option>
<option value='m'>M</option>
<option value='l'>L</option>
<option value='xl'>XL</option>
<option value='xxl'>XXL</option>
</select>
</td>
<td><input type="text" value="1500" name="otmquantity[]" id="otmquantity1" class="form-control" ></td>
<td><span id="tab1" onclick="duplicate(1)" class="btn block btn-sm btn-danger">Duplicate</span></td>
</tr>
</tbody>
</table>
</div>
</div>

Related

Convert dynamic HTML tabular form to JSON

I have a simple form with dynamic number of rows, each row having the same fields.
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">
<p>1</p>
</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<!-- Dynamic rows appear here -->
</tbody>
</table>
Form is present as a table, but it's not a strict requirement, so can be flexible here.
On form submission I need this form data to be converted to JSON.
I have this function to convert form into JSON:
function convertFormToJSON(form) {
const array = $(form).serializeArray();
const json = {};
$.each(array, function () {
json[this.name] = this.value || "";
});
return json;
}
But every row overwrites previous one, so I end up having only last row data in this JSON. I realize I need to have a loop and append each new row data into final JSON, but I struggle finding the criterion for this loop. Table rows? Or better not to use table and switch to a different form presentation?
Here is a simple non-jQuery way of collecting all the input data from this form with a variable number of input elements:
document.querySelector("button").onclick=ev=>{
let res=[...document.getElementById("tbody").children].map(tr=>
Object.fromEntries([...tr.querySelectorAll("input,select")].map(el=>
[el.name,el.value])));
console.log(res);
}
input,select {width:80px;}
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">1</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R2" name="record">
<td class="row-index text-center">2</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R3" name="record">
<td class="row-index text-center">3</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
</tbody>
</table>
<button>collect data</button>

How to Hide (or Show) child drop-down (dynamic html) in jquery?

Here create a dynamic table row when clicking on + button add a new row and click on - button remove row design like this,
Here subject drop-down display and also instructor drop-down display but the problem is when select subject maths instructor drop-down show and when select a science instructor drop-down hide but it's changing in all drop-down.
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
if (jQuery.inArray(topic_name, names) != '-1') {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent().find('td').hide();
} else {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent('td').find('td').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr id="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" id="CourseScheduleScheduleInstructor" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr id="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" id="CourseScheduleScheduleInstructor" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>
That happens because of duplicate identifiers, the id attribute must be unique in the same document.
That will be fixed by replacing the duplicate ones with common classes.
Then your selector could be simply :
$(this).closest('tr').find('.instructor_name');
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
var instructor_name = $(this).closest('tr').find('.instructor_name');
if ($.inArray(topic_name, names) != -1) {
instructor_name.hide();
} else {
instructor_name.show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr class="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr class="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>

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.

Looping through the span and assigning the values to closest dropdown with jQuery

My objective is to get the value from span and assign the value to the dropdown on the same row.
Here is my jsFiddle: http://jsfiddle.net/bharatgillala/581hk9Ly/4/
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
My objective is to loop through all the spans and if there is any text, get the text and assign the text to the closest dropdown.
I've already answered that for you yesterday. The code is fully commented below:
(function(d) {
// when all the DOMElements are already loaded into the document
d.addEventListener('DOMContentLoaded', function() {
// gets the generated table, and get all the dropdownlists inside it
var table = document.getElementById('gridviewInfo'),
ddls = [].slice.call(table.querySelectorAll('.judges'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
});
});
})(document);
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
And here is your fiddle updated: http://jsfiddle.net/581hk9Ly/6/
And if you want a jQuery version:
$(document).ready(function() {
$('.spanclass').each(function() {
$(this).closest('tr').find('.judges').val($(this).text());
});
});

Categories