How to make auto scroll to Top after submit error and when it scroll up need to be smooth but not straight to the top and when it scroll to the top it need to have like 100px space gap from the header .
This is the code that I try to used but it doesn't seems to work in my code
This is the jquery I have tried :-
$("#submit").click( function() {
$(window).scrollTop(100);
});
And I have tried to insert this in the CSS :-
scroll-behaviour: smooth;
Sometimes it work but sometimes it can't work. But when I insert the scroll behavior the text field required error message doesn't appear.
And this is my php file code :-
<!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="//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="js/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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/>
<script src="js/script.js"></script>
<?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>
<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>
<script src="js/script.js"></script>
</body>
</html>
And CSS code:-
#scrollbox {
overflow-y:auto;
height: 478px;
width: 100%;
margin-top: -80px;
scroll-behaviour: smooth;
}
