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;
}
Related
I have a simple html form, which is included in a Spry Tabbed Panel.
So, i would like to know, is it possible to submit that form, and only that form in the Panel, and then echo the submitted data back in the correct fields.
The echo part is not a problem doing it on a different page, or redirect after submitting, but my issue comes in with the other forms that should/can not be cleared if this one is submitted.
A hint in the right direction would be greatly appreciated!
Thank you in advance.
see code below:
(i know that the form action should not direct to a different file, but that is just how I've been using it until now...)
<form action="caller_upd.php" method="post" name="contact" >
<table width="200" border="0">
<?php
$_SESSION['uid'] = $uid;
?>
<tr>
<td width="68">Title</td>
<td width="4">:</td>
<td width="144"><select name="title" id="title">
<option selected="selected" disabled="disabled"</option>
<option value="Mr">Mr</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
</select></td>
<td width="6"> </td>
<td width="53">Number</td>
<td width="3">:</td>
<td width="301"><input style="color:rgb(255,0,0);" autofocus="autofocus" type="text" name="contactnr" id="contactnr" /></td>
</tr>
<tr>
<td>Name</td>
<td>:</td>
<td><input type="text" name="fname" id="fname" /></td>
<td> </td>
<td>Surname</td>
<td>:</td>
<td><input type="text" name="sname" id="sname" /></td>
</tr>
<tr>
<td>Nature of Call</td>
<td>:</td>
<td><select name="type" id="type">
<option disabled="disabled" selected="selected"></option>
<option value="Domestic">Domestic</option>
<option value="MVA">MVA</option>
<option value="Assult">Assult</option>
<option value="Padestrian">Padestrian</option>
<option value="Transfer">Transfer</option>
<option value="Private">Private</option>
</select></td>
<td> </td>
<td>Nr of Patients:</td>
<td>:</td>
<td><select name="nop" id="nop">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select></td>
</tr>
<tr>
<td>Location</td>
<td><label for="location"></label></td>
<td colspan="5"><input name="location" type="text" id="location" size="50" /> <?php if (!empty($location)){ ?>Show Map<?php } else { } ; ?></td>
</tr>
<tr>
<td>Comments:</td>
<td colspan="6"><textarea name="comment" id="comment" cols="70" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="7" class="form"><input type="submit" name="submit" id="submit" value="Update" /></td>
</tr>
</table>
</form>
Check if the post value exists, and if so either select the option or put the value in the input element...
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="contact" >
<table width="200" border="0">
<tr>
<td width="68">Title</td>
<td width="4">:</td>
<td width="144"><select name="title" id="title">
<option value="Mr" <?php if(isset($_POST['title']) && $_POST['title'] == "Mr") echo "selected"; ?>>Mr</option>
<option value="Ms" <?php if(isset($_POST['title']) && $_POST['title'] == "Ms") echo "selected"; ?>>Ms</option>
<option value="Dr" <?php if(isset($_POST['title']) && $_POST['title'] == "Dr") echo "selected"; ?>>Dr</option>
</select></td>
<td width="6"> </td>
<td width="53">Number</td>
<td width="3">:</td>
<td width="301"><input style="color:rgb(255,0,0);" autofocus="autofocus" type="text" name="contactnr" id="contactnr" value="<?php if(isset($_POST['contactnr'])) echo $_POST['contactnr']; ?>" /></td>
</tr>
<tr>
<td>Name</td>
<td>:</td>
<td><input type="text" name="fname" id="fname" value="<?php if(isset($_POST['fname'])) echo $_POST['fname']; ?>" /></td>
<td> </td>
<td>Surname</td>
<td>:</td>
<td><input type="text" name="sname" id="sname" value="<?php if(isset($_POST['sname'])) echo $_POST['sname']; ?>" /></td>
</tr>
...
</table>
</form>
The following is my HTML. I want to pass the name of the dropdownlist(d1and d2) to another survey.php page when the button is clicked.
<!DOCTYPE html>
<head>
<title>Survey</title>
</head>
<body>
<form id="form1" action="survey.php" method="POST">
<table border=1>
<tr>
<td height=" 30" width="200">
Condition of the item received:
<select name="d1">
<option>Select One</option>
<option value="g">Good</option>
<option value="s">bad</option>
<option value="u">Worst</option>
</select>
</td>
<td height=" 30" width="200">
Price of the Item:
<select name="d2">
<option>Select One</option>
<option value="g">Good</option>
<option value="s">bad</option>
<option value="u">Worst</option>
</select>
</td>
</tr>
<tr>
<td align="center" >
<input type="button" name="submit1" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
Rewrite:
<form id="form1" action="survey.php" method="POST">
<table border=1>
<tr>
<td height=" 30" width="200">
Condition of the item received:
<select name="d1">
<option>Select One</option>
<option value="Good">Good</option>
<option value="bad">bad</option>
<option value="Worst">Worst</option>
</select>
</td>
<td height=" 30" width="200">
Price of the Item:
<select name="d2">
<option>Select One</option>
<option value="Good">Good</option>
<option value="bad">bad</option>
<option value="Worst">Worst</option>
</select>
</td>
</tr>
<tr>
<td align="center" >
<input type="button" name="submit1" value="Submit" />
</td>
</tr>
</table>
</form>
Firstly, instead of: <input type="button" name="submit1" value="Submit" />
Use: <input type="submit" name="submit1" value="Submit" />
<input type="submit"> is what is used to actually send the form.
Secondly, in the body of survey.php:
<?php
echo "You rated ".$_POST['d1']." for condition."
echo "You rated ".$_POST['d2']." for price."
?>
In short:
The $_POST variable in PHP is automatically set to a dictionary containing all the POST parameters.
My below code is posting at both times when the checkbox is checked or not checked. When its not checked I am getting alert and then posting. But when checked its posting automatically.
I need JavaScript to post the form when Submit button is clicked and checkbox should be kept checked. Else it should just provide me an alert. But unfortunately the page is reloading even when keeping the checkbox unchecked and using submit button.
My code is
<script type="text/javascript">
function check()
{
if(document.getElementById("privacy").checked == true)
{
document.print.submit();
}
else{
alert('Please read and accept our privacy statments to proceed.');
};
}
</script>
</head>
<body>
<form id="print" action="printfile.php">
<div id="express">
<table width="800">
<tr>
<td colspan="2"><span style="color:#FF0000; font-size:26px;">Express Application</span></td>
</tr>
<tr>
<td width="300"> </td>
<td width="500"> </td>
</tr>
<tr>
<td>First Name (Required) </td>
<td><input name="firstname" type="text" size="30"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Last Name </td>
<td><input name="lastname" type="text" size="30"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Email (Required) </td>
<td><input name="email" type="text" id="email" size="30"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Purpose of finance (Required) </td>
<td><select name="purpose" id="purpose">
<option selected="selected">Home Loan</option>
<option>Refinance</option>
<option>Investment Loan</option>
<option>Debit Consolidation</option>
<option>Others</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Your deposit amount </td>
<td><input name="depositamount" type="text" size="30"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Amount you need to borrow? </td>
<td><input name="borrowamount" type="text" size="30"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Brief description of purpose of <br />
finance (Required) <br />
<br />
<br />
<br />
<br />
<br /></td>
<td><textarea name="purposedesc" cols="60" rows="10" id="purposedesc"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Application Type<br />
<br /></td>
<td><label>
<input type="radio" name="apptype" value="Single" onclick="document.getElementById('singleapp').style.visibility = 'visible'; document.getElementById('jointapp').style.visibility = 'hidden';" />
Single Application</label>
<br />
<label>
<input type="radio" name="apptype" value="Joint" onclick="document.getElementById('singleapp').style.visibility = 'visible'; document.getElementById('jointapp').style.visibility = 'visible';" />
Joint Application</label></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"><input name="privacy" type="checkbox" id="privacy" value="checkbox" />
Privacy Act (Required) <br />
<br />
I have read the Privacy Act 1988 (as Amended) and understand that by selecting the submit button I/we authorise Best Aussie Broker to act on my/our behalf and manage personal information in relation to this application. </td>
</tr>
</table>
<br />
Last step then we will get all listed Australian vendors to fight it out for your best deal.<br />
<br />
<table width="800" border="0" style="">
<tr>
<td width="400">
<div id="singleapp">
<table width="400" border="0">
<tr>
<td colspan="2" bgcolor="#333300"><span class="style1">Your application </span></td>
</tr>
<tr>
<td width="150"> </td>
<td width="240"> </td>
</tr>
<tr>
<td>Date of Birth</td>
<td><select name="day1" id="day1">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month1" id="month1">
<option selected="selected">Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apl</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
<input name="year1" type="text" id="year1" style="padding:1.2px;" size="8" maxlength="4" /> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Address</td>
<td><input name="address1" type="text" id="address1" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Suburb</td>
<td><input name="suburb1" type="text" id="suburb1" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>PostCode</td>
<td><input name="postcode1" type="text" id="postcode1" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>State</td>
<td><select name="state1" id="state1">
<option value="Victoria" selected="selected">VIC</option>
<option value="New South Wales">NSW</option>
<option value="QueensLand">QLD</option>
<option value="South Australia">SA</option>
<option value="Western Australia">WA</option>
<option value="Tasmania">TAS</option>
<option value="New Zeland">NZ</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Best contact </td>
<td><select name="phone1" id="phone1">
<option>Phone</option>
<option>Email</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Phone number </td>
<td><input name="number1" type="text" id="number1" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Marital status </td>
<td><select name="maried1" id="maried1">
<option>Single</option>
<option>Married</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Residential status </td>
<td><select name="rstatus1" id="rstatus1">
<option selected="selected">Renting</option>
<option>Home Owner</option>
<option>Home Mortgaged</option>
<option>Board</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Children/dependents</td>
<td><select name="childs1" id="childs1">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6 or more">6 or more</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Net income </td>
<td><input name="netincome1" type="text" id="netincome1" size="10"/>
per
<select name="months1" id="months1">
<option>Month</option>
<option>Year</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Current employer </td>
<td><input name="cemployer1" type="text" id="cemployer1" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Time at this<br />
employer </td>
<td> Years
<select name="years1" id="years1">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="More">More</option>
</select>
Months
<select name="emonth1" id="emonth1">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input name="submit" type="submit" value="Submit my Application" onclick="check();" /></td>
</tr>
</table>
</div>
</td>
<td width="400">
<div id="jointapp">
<table width="400" border="0">
<tr>
<td colspan="2" bgcolor="#333300"><span class="style1">Your partner's application </span></td>
</tr>
<tr>
<td width="150"> </td>
<td width="240"> </td>
</tr>
<tr>
<td>Date of Birth</td>
<td><select name="day11" id="day11">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month11" id="month11">
<option selected="selected">Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apl</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
<input name="year2" type="text" size="8" maxlength="4" style="padding:1.2px;" /> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Address</td>
<td><input name="address12" type="text" id="address12" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Suburb</td>
<td><input name="suburb12" type="text" id="suburb12" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>PostCode</td>
<td><input name="postcode12" type="text" id="postcode12" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>State</td>
<td><select name="state12" id="state12">
<option value="Victoria" selected="selected">VIC</option>
<option value="New South Wales">NSW</option>
<option value="QueensLand">QLD</option>
<option value="South Australia">SA</option>
<option value="Western Australia">WA</option>
<option value="Tasmania">TAS</option>
<option value="New Zeland">NZ</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Best contact </td>
<td><select name="phone11" id="phone11">
<option>Phone</option>
<option>Email</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Phone number </td>
<td><input name="number11" type="text" id="number11" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Marital status </td>
<td><select name="married12" id="married12">
<option>Single</option>
<option>Married</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Residential status </td>
<td><select name="rstatus12" id="rstatus12">
<option selected="selected">Renting</option>
<option>Home Owner</option>
<option>Home Mortgaged</option>
<option>Board</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Children/dependents</td>
<td><select name="childs12" id="childs12">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6 or more">6 or more</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Net income </td>
<td><input name="netincome12" type="text" id="netincome12" size="10"/>
per
<select name="months12" id="months12">
<option>Month</option>
<option>Year</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Current employer </td>
<td><input name="cemployer12" type="text" id="cemployer12" size="20"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Time at this<br />
employer </td>
<td> Years
<select name="years12" id="years12">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="More">More</option>
</select>
Months
<select name="emonths12" id="emonths12">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select></td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
</div>
</td>
</tr>
</table>
<p><br />
<br />
<center>
</center>
<br />
</p>
</div>
</form>
With the inline event handler syntax you're using it is easiest to return false so the default action (the submitting) isn't executed:
<input name="submit"
type="submit"
value="Submit my Application"
onclick="check(); return false;" />
You need to make the submit return false, otherwise it will just do the regular thing a form does when you click submit.
if(document.getElementById("privacy").checked == true)
{
document.print.submit();
}
else
{
alert('Please read and accept our privacy statments to proceed.');
return false;
}
Technically as it will be submitting anyway. You could just get it to check and only intercept if it is not checked.
if(document.getElementById("privacy").checked == false)
{
alert('Please read and accept our privacy statments to proceed.');
return false;
}
Also add return to the submit onclick (link #AndreKR said)
<input name="submit" type="submit" value="Submit my Application" onclick="return check();" />
I have a standard HTML form, and I'd like to store the data from that form into a MySQL database. I had everything working correctly, but now am wanting to implement AJAX to prevent the page from refreshing, and all of sudden am running into trouble.
Problem: the "success" alert is not being generated, and the data is not being saved into the database.
I have very, very little exposure into Jquery/AJAX, and am learning on-the-go, so please bear with me if I made an elementary mistake.
*UPDATE 1***
This is my new AJAX code. The data from the form is now getting saved into the database, but still no success alerts. In fact, NO pop-up appears.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "InsertNewMentor.php",
data: $("form").serialize(),
success: function() {
alert("Success!");
}
});
return false;
});
});
</script>
This is the form (includes AJAX code at the end). (update: no longer using this code, see above)
<form>
<table cellpadding="10">
<tr>
<td><b>Chapter:</b></td>
<td><input type="text" name="chapter"></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="first"></td>
<td>Last Name:</td>
<td><input type="text" name="last"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>
<td>Ethnicity:</td>
<td>
<form action="">
<select name="ethnicity">
<option value="white">White/Caucasian</option>
<option value="hispanic">Hispanic</option>
<option value="asian">Asian/Pacific Islander</option>
<option value="native_american">Native American Indian</option>
<option value="other">Other</option>
</form>
</td>
</tr>
<tr>
<td>Year in School</td>
<td>
<form action="">
<select name="year_in_school">
<option value="freshman">Freshman</option>
<option value="sophomore">Sophomore</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</form>
</td>
<td>Phone Number:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>Email Address:</td>
<td><input type="text" name="email"></td>
<td>Street Address:</td>
<td>
<input type="text" name="address">
</td>
</tr>
<tr>
<td>Apt/Suite:</td>
<td>
<input type="text" name="suite_num">
</td>
<td>City:</td>
<td>
<input type="text" name="city">
</td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="state">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</td>
<td>Zip Code:</td>
<td>
<input type="text" name="zip_code">
</td>
</tr>
<tr>
<td>Cumulutative GPA:</td>
<td><input type="text" name="gpa"></td>
<td>Major/Area of Study:</td>
<td><input type="text" name="major"></td>
</tr>
<tr>
<td>Twitter handle:</td>
<td>
<input type="text" name="twitter_handle">
</td>
</tr>
<tr>
<td colspan="2">
<p>Please describe any relevant teaching experience:</p>
<textarea rows="6" cols="45" name="teaching_experience">
</textarea>
</td>
<td colspan="2">
<p>Why do you want to join Moneythink?</p>
<textarea rows="6" cols="43" name="why_moneythink">
</textarea>
</td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" value="Apply"></td>
<td><input type="reset" value="Clear"></td>
</tr>
</table>
</form>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "/InsertNewMentor.php",
data: $("form").serialize(),
success: function() {
alert("form was submitted");
}
});
return false;
});
});
</script>
And this is InsertNewMentor.hp
<?php
$username="";
$password="";
$database="";
$first = $_POST['first'];
$last = $_POST['last'];
$email = $_POST['email'];
$gpa = $_POST['gpa'];
$year = $_POST['year_in_school'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$gender = $_POST['gender'];
$ethnicity = $_POST['ethnicity'];
$year_in_school = $_POST['year_in_school'];
$suite_number = $_POST['suite_num'];
$city = $_POST['city'];
$state = $_POST['state'];
$zip_code = $_POST['zip_code'];
$major = $_POST['major'];
$twitter_handle = $_POST['twitter_handle'];
$why_moneythink = $_POST['why_moneythink'];
$teaching_experience = $_POST['teaching_experience'];
$date = date("m/d/Y");
mysql_connect(localhost,$username,$password);
#mysql_select_db($database) or die( "Unable to select database");
$query = "INSERT INTO students VALUES ('','$address','$phone','$first','$last','$gender', '$ethnicity', '$year_in_school', '$email', '$suite_number','$city','$state','$zip_code','$major','$gpa','$twitter_handle','$why_moneythink','$teaching_experience','pending','$date')";
mysql_query($query);
mysql_close();
?>
First of all , the serialize() function returns a text string ,and not an array of values - for further information read jQuery documentaion.
Now for the ajax submittion -
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "/InsertNewMentor.php",
**data: {dataString: $("form").serialize()} ,**
success: function() {
alert("form was submitted");
}
});
return false;
});
You have got to send a JSON formatted data , as explanied above ( notice the change in the data field)
In the PHP code , when posting , you only post the field you send through ajax - i.e - dataString.
Furtheremore , in the success function you might use :
success: function(result) {
alert(result);
}
});
so you could debug any errors , if exist.
Good luck.
<form id="formPost" method="POST">
<table cellpadding="10">
<tr>
<td><b>Chapter:</b></td>
<td><input type="text" name="chapter"></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="first"></td>
<td>Last Name:</td>
<td><input type="text" name="last"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>
<td>Ethnicity:</td>
<td>
<select name="ethnicity">
<option value="white">White/Caucasian</option>
<option value="hispanic">Hispanic</option>
<option value="asian">Asian/Pacific Islander</option>
<option value="native_american">Native American Indian</option>
<option value="other">Other</option>
</td>
</tr>
<tr>
<td>Year in School</td>
<td>
<select name="year_in_school">
<option value="freshman">Freshman</option>
<option value="sophomore">Sophomore</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
</td>
<td>Phone Number:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>Email Address:</td>
<td><input type="text" name="email"></td>
<td>Street Address:</td>
<td>
<input type="text" name="address">
</td>
</tr>
<tr>
<td>Apt/Suite:</td>
<td>
<input type="text" name="suite_num">
</td>
<td>City:</td>
<td>
<input type="text" name="city">
</td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="state">
<option value="Alabama">Alabama</option>
.....
</select>
</td>
<td>Zip Code:</td>
<td>
<input type="text" name="zip_code">
</td>
</tr>
<tr>
<td>Cumulutative GPA:</td>
<td><input type="text" name="gpa"></td>
<td>Major/Area of Study:</td>
<td><input type="text" name="major"></td>
</tr>
<tr>
<td>Twitter handle:</td>
<td>
<input type="text" name="twitter_handle">
</td>
</tr>
<tr>
<td colspan="2">
<p>Please describe any relevant teaching experience:</p>
<textarea rows="6" cols="45" name="teaching_experience">
</textarea>
</td>
<td colspan="2">
<p>Why do you want to join Moneythink?</p>
<textarea rows="6" cols="43" name="why_moneythink">
</textarea>
</td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" value="Apply"></td>
<td><input type="reset" value="Clear"></td>
</tr>
</table>
</form>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('form').bind('submit', function(){
$.ajax({
type: 'post',
url: "/InsertNewMentor.php",
data: $("#formPost").serialize(),
success: function() {
alert("form was submitted");
}
});
return false;
});
});
</script>
try this
I am using jquery with ajax. Sometimes, It is giving error $ is not defined.
This is my code:
<script language="javascript" type="text/javascript">
var base_path="<? echo $this->baseUrl().'/'; ?>";
function checkemail()
{
var email=document.getElementById('comp_email').value;
//alert(email);
if(email!='')
{
$.ajax({
url: base_path + "admin/jobs/emailcheck/",
data: "email="+email,
type: 'GET',
success: function (resp)
{
//alert(resp);
$("#valid_email").html(resp);
//alert($("#valid_email table tr td").text());
if($("#valid_email table tr td").text()=='This firm is not exist in database. Firstly register this firm.')
{
//alert('ok');
$.ajax({
url: base_path + "admin/profile/firmadd/",
data:"flag=jobsController",
type: 'POST',
success: function (resp)
{
document.getElementById('firm_add_form').style.display='';
//alert(resp);
$("#firm_add_form").html(resp);
document.getElementById('register_typ').focus();
return false;
},
error: function(e){ alert('Error: '+e); }
});
}
else
{
document.getElementById('firm_add_form').style.display='none';
document.getElementById('valid_email').style.display='none';
var comp_name = resp.substring(0,resp.indexOf(',',0));
var comp_web = resp.substring(resp.indexOf(',',0)+1);
document.getElementById('comp_name').value = comp_name;
document.getElementById('comp_web').value = comp_web;
return true;
}
},
error: function(xhr ,e){
alert(xhr.readyState);
alert('Error: '+e); }
});
}
}
</script>
This function is called on onblur in a textbox and called on onclick on submit button in same form.
But when I call it on onblur it is working properly but when I call it on onclick then it is giving error $ is not defined.
And when I gives alert(email) then it is working properly on onclick on submit button.
my form is below:
<form id="addfrm" enctype="application/x-www-form-urlencoded" method="post" action=""
name="">
<table align="center" class="tbcss" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="right" valign="top" width="15%"><label for="comp_email" class=
"optional">Company Email:</label></td>
<td class="element" width="26%" valign="top"><input type="text" name="comp_email"
id="comp_email" value="" size="35" onblur="return checkemail()"><span id=
"valid_email" align="left" width="55%"></span></td>
<td align="right" valign="top" width="15%"><label for="comp_name" class=
"required">Company Name:</label></td>
<td class="element" width="26%" valign="top"><input type="text" name="comp_name"
id="comp_name" value="" size="35"></td>
</tr>
<tr>
<td id="firm_add_form" colspan="4"></td>
</tr>
<tr>
<td align="right" valign="top" width="15%"><label for="comp_web" class=
"optional">Company Website:</label></td>
<td class="element" width="26%" valign="top"><input type="text" name="comp_web"
id="comp_web" value="" size="35"></td>
<td align="right" valign="top" width="15%"><label for="category" class=
"required">Job Category:</label></td>
<td class="element" width="26%"><select name="category" id="category">
<option value="" label="Select Category">
Select Category
</option>
<option value="Architecture" label="Architecture">
Architecture
</option>
<option value="Manufacturing" label="Manufacturing">
Manufacturing
</option>
<option value="IT" label="IT">
IT
</option>
</select></td>
</tr>
<tr>
<td align="right" valign="top" width="15%"><label for="job_title" class=
"optional">Job Title:</label></td>
<td class="element" width="26%" valign="top"><input type="text" name="job_title"
id="job_title" value="" size="35"></td>
<td align="right" valign="top" width="15%"><label for="contact_prsn" class=
"optional">Contact Person:</label></td>
<td class="element" width="26%" valign="top"><input type="text" name=
"contact_prsn" id="contact_prsn" value="" size="35"></td>
</tr>
<tr>
<td align="right" width="15%"><label for="close_date" class="optional">Closing
Date:</label></td>
<td class="element" width="26%"><select name="close_date" id="close_date">
<option value="" label="Date">
Date
</option>
<option value="1" label="01">
01
</option>
<option value="2" label="02">
02
</option>
<option value="3" label="03">
03
</option>
<option value="4" label="04">
04
</option>
<option value="5" label="05">
05
</option>
<option value="6" label="06">
06
</option>
<option value="7" label="07">
07
</option>
<option value="8" label="08">
08
</option>
<option value="9" label="09">
09
</option>
<option value="10" label="10">
10
</option>
<option value="11" label="11">
11
</option>
<option value="12" label="12">
12
</option>
<option value="13" label="13">
13
</option>
<option value="14" label="14">
14
</option>
<option value="15" label="15">
15
</option>
<option value="16" label="16">
16
</option>
<option value="17" label="17">
17
</option>
<option value="18" label="18">
18
</option>
<option value="19" label="19">
19
</option>
<option value="20" label="20">
20
</option>
<option value="21" label="21">
21
</option>
<option value="22" label="22">
22
</option>
<option value="23" label="23">
23
</option>
<option value="24" label="24">
24
</option>
<option value="25" label="25">
25
</option>
<option value="26" label="26">
26
</option>
<option value="27" label="27">
27
</option>
<option value="28" label="28">
28
</option>
<option value="29" label="29">
29
</option>
<option value="30" label="30">
30
</option>
<option value="31" label="31">
31
</option>
</select> <span class="element"><select name="close_month" id="close_month">
<option value="" label="Month">
Month
</option>
<option value="01" label="Jan">
Jan
</option>
<option value="02" label="Feb">
Feb
</option>
<option value="03" label="Mar">
Mar
</option>
<option value="04" label="Apr">
Apr
</option>
<option value="05" label="May">
May
</option>
<option value="06" label="Jun">
Jun
</option>
<option value="07" label="Jul">
Jul
</option>
<option value="08" label="Aug">
Aug
</option>
<option value="09" label="Spt">
Spt
</option>
<option value="10" label="Oct">
Oct
</option>
<option value="11" label="Nov">
Nov
</option>
<option value="12" label="Dec">
Dec
</option>
</select></span> <span class="element"><select name="close_year" id="close_year">
<option value="" label="Year">
Year
</option>
<option value="2009" label="2009">
2009
</option>
<option value="2010" label="2010">
2010
</option>
<option value="2011" label="2011">
2011
</option>
<option value="2012" label="2012">
2012
</option>
<option value="2013" label="2013">
2013
</option>
<option value="2014" label="2014">
2014
</option>
<option value="2015" label="2015">
2015
</option>
<option value="2016" label="2016">
2016
</option>
<option value="2017" label="2017">
2017
</option>
<option value="2018" label="2018">
2018
</option>
<option value="2019" label="2019">
2019
</option>
<option value="2020" label="2020">
2020
</option>
<option value="2021" label="2021">
2021
</option>
</select></span></td>
<td align="right" valign="top" width="15%"><label for="location" class=
"required">Location:</label></td>
<td class="element" width="26%"><input type="text" name="location" id="location"
value="" size="35"></td>
</tr>
<tr>
<td align="right" valign="top" width="15%"><label for="job_detail" class=
"optional">Job Details:</label></td>
<td class="element" width="26%" valign="top">
<textarea name="job_detail" id="job_detail" cols="30" rows="5">
</textarea></td>
<td align="right" valign="top" width="15%"><label for="notes" class=
"required">Notes:</label></td>
<td class="element" width="26%">
<textarea name="notes" id="notes" cols="30" rows="5">
</textarea></td>
</tr>
<tr>
<td align="right" valign="top" width="15%"><label for="block" class=
"optional">Block:</label></td>
<td class="element" width="26%"><input type="hidden" name="block" value=
"N"><input type="checkbox" name="block" id="block" value="Y"></td>
<td align="right" valign="top" width="15%"><label for="source" class=
"optional">Job Source/Link:</label></td>
<td class="element" width="26%" valign="top"><input type="text" name="source" id=
"source" value=""></td>
</tr>
<tr>
<td align="center" colspan="4"><input type="submit" name="add" id="add" value=
"Add" onclick="return checkemail();"> <button name="back" id="back" type="button"
onclick="window.location='/allindiazend/admin/jobs/list'">Back</button></td>
</tr>
</table>
</form>
can any body help me plz.
$ is defined by the jQuery library. You are therefore, presumably, not successfully including the library on your page.
Check you have a <script> element that includes it and is not 404 erroring.
Check that you do so earlier in the page then any attempts to use it
Check you are not defering the request for the script
Check that the browser is making the request (in the Net tab of whatever debug tool (e.g. Firebug) you use
Your jQuery is not getting loaded properly sometimes. Ideally, use Google's CDN to load it.
You should put all of jQuery's scripts in a document ready block as such:
<script type="text/javascript">
$(document).ready(function(){
//call jQuery enabled functions here
});
</script>
This makes sure jQuery is loaded (and $ is defined) before executing