Currently trying to use the following script to save the billing information i've included below on a page refresh. Hoping that this would clear up further errors i'm having down the line with redirecting users to paypal.
<script>
// Run on page load
window.onload = function() {
// If sessionStorage is storing default values (ex. name), exit the function and do not restore data
if (sessionStorage.getItem('billing_firstname') == "billing_firstname") {
return;
}
// If values are not blank, restore them to the fields
var billing_firstname = sessionStorage.getItem('billing_firstname');
if (billing_firstname !== null) $('#billing_firstname').val(billing_firstname);
var billing_state= sessionStorage.getItem('billing_state');
if (billing_state !== null) $('#billing_state').val(billing_state);
var billing_country= sessionStorage.getItem('billing_country');
if (billing_country!== null) $('#billing_country').val(billing_country);
}
// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
sessionStorage.setItem("billing_firstname", $('#billing_firstname').val());
sessionStorage.setItem("billing_state", $('#billing_state').val());
sessionStorage.setItem("billing_country", $('#billing_country').val());
}
</script>
To save the following form (not added all the form labels to the script yet)
<div id="billing_info" class="pad10 boxShadow" style="display:block">
<!--START: SAVE_ADDRESSES-->
<div class="chkField">
<label for="save_address">[checkout3_PreviousAddresses]</label>
<select type="dropdown" name="save_address" onchange="javascript:filladdress_form(this,'billing','billing');check_address('billing');" tabindex="1" class="txtBoxStyle">
[address_billing_list]
</select>
<div class="clear"></div>
</div>
<!--END: SAVE_ADDRESSES-->
<div class="chkField">
<label for="billing_firstname">[CustomerInfo_firstname]</label>
<input name="billing_firstname" onchange="clearContent(this);" type="text" id="billing_firstname" value="[billing_firstname]" size="15" tabindex="2" class="txtBoxStyle" />
<!--START: req_billing_firstname-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_firstname-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_lastname">[CustomerInfo_lastname]</label>
<input name="billing_lastname" type="text" onchange="clearContent(this);" id="billing_lastname" value="[billing_lastname]" size="15" tabindex="3" class="txtBoxStyle" />
<!--START: req_billing_lastname-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_lastname-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_company">[CustomerInfo_company]</label>
<input name="billing_company" type="text" onchange="clearContent(this);" id="billing_company" value="[billing_company]" size="25" tabindex="4" class="txtBoxStyle" />
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_state">[CustomerInfo_state]</label>
<select id="billing_state" onchange="this.form.billing_zip.value='';check_address('billing');" name="billing_state" tabindex="9" class="txtBoxStyle">
</select>
<!--START: req_billing_state-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_state-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_country">[CustomerInfo_country]</label>
<select name="billing_country" onchange="check_address('billing');" tabindex="8" class="txtBoxStyle" id="billing_country">
</select>
<!--START: req_billing_country-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_country-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_address">[CustomerInfo_address]</label>
<input name="billing_address" type="text" onchange="clearContent(this);[po_box_disabled_billing]" id="billing_address" value="[billing_address]" size="25" tabindex="5" class="txtBoxStyle" />
<!--START: req_billing_address-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_address-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_address2">[CustomerInfo_address2]</label>
<input name="billing_address2" type="text" onchange="clearContent(this);" id="billing_address2" value="[billing_address2]" size="25" tabindex="6" class="txtBoxStyle" />
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_city">[CustomerInfo_city]</label>
<input name="billing_city" type="text" onchange="clearContent(this);" id="billing_city" value="[billing_city]" size="25" tabindex="7" class="txtBoxStyle" />
<!--START: req_billing_city-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_city-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_zip">[CustomerInfo_zip]</label>
<input name="billing_zip" maxlength="15" type="text" id="billing_zip" value="[billing_zip]" size="10" tabindex="10" class="txtBoxStyle" onchange="clearContent(this);check_address('billing');" />
<!--START: req_billing_zip-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_zip-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_phone">[CustomerInfo_phone]</label>
<input name="billing_phone" type="text" onchange="clearContent(this);" id="billing_phone" value="[billing_phone]" size="25" tabindex="5" class="txtBoxStyle" />
<!--START: req_billing_phone-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_phone-->
<div class="clear"></div>
</div>
<div class="clear"></div>
I'm getting the following error.
Uncaught TypeError: $ is not a function
at window.onbeforeunload
new error
Uncaught TypeError: $ is not a function
at checkout_one.asp:1903
at dispatch (jquery.min.js:2)
at y.handle (jquery.min.js:2)
After adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have not called the script from anywhere in my code as of yet.
<script>
$( window ).load(function() {
if (sessionStorage.getItem('billing_firstname') == "billing_firstname")
{
return;
}
// If values are not blank, restore them to the fields
var billing_firstname = sessionStorage.getItem('billing_firstname');
if (billing_firstname !== null) $('#billing_firstname').val(billing_firstname);
var billing_state= sessionStorage.getItem('billing_state');
if (billing_state !== null) $('#billing_state').val(billing_state);
var billing_country= sessionStorage.getItem('billing_country');
if (billing_country!== null) $('#billing_country').val(billing_country);
}
});
$( window ).unload(function() {
sessionStorage.setItem("billing_firstname",
$('#billing_firstname').val());
sessionStorage.setItem("billing_state", $('#billing_state').val());
sessionStorage.setItem("billing_country", $('#billing_country').val());
});
</script>
and include jquery before any script library included or before this code ... first script should be jquery :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
and please post error after this since u r using jquery $(" ") without jquery i think you are mixing js and jquery in bad way . please check this once .
Related
I have this code for a newsletter block in my site, a specific CMS:
<!-- newsletter block -->
{if $tpl_settings.type == 'responsive_42'}{strip}
<div class="subscribe{if $block.Side != 'left' && $block.Side != 'right'} light-inputs{/if}">
<div id="nl_subscribe">
<input placeholder="{$lang.massmailer_newsletter_your_name}" type="text" id="newsletter_name" maxlength="50" />
<input placeholder="{$lang.massmailer_newsletter_your_e_mail}" type="text" id="newsletter_email" maxlength="100" />
<br />
<label><input type="checkbox" id="newsletter_privacy" /></label> Privacy Policy.
<br />
<br />
<input class="low" onclick="xajax_subscribe('subscribe', $('#newsletter_name').val(), $('#newsletter_email').val());$(this).val('{$lang.loading}');" type="button" value="{$lang.massmailer_newsletter_subscribe}" />
<div class="nav-link"><span id="unsubscribe_link" class="link">{$lang.massmailer_newsletter_unsubscribe}</span></div>
</div>
<div id="nl_unsubscribe" class="hide">
<input placeholder="{$lang.massmailer_newsletter_your_e_mail}" type="text" id="un_newsletter_email" maxlength="50" />
<input class="low" onclick="xajax_subscribe('unsubscribe', '', $('#un_newsletter_email').val());$(this).val('{$lang.loading}');" type="button" value="{$lang.massmailer_newsletter_unsubscribe}" />
<div class="nav-link"><span id="subscribe_link" class="link">{$lang.massmailer_newsletter_subscribe}</span></div>
</div>
</div>
{/strip}{else}
<div id="nl_subscribe">
{$lang.massmailer_newsletter_your_name}
<div style="padding: 0 0 5px;"><input type="text" id="newsletter_name" maxlength="150" style="width: 80%;" /></div>
{$lang.massmailer_newsletter_your_e_mail}
<div><input type="text" id="newsletter_email" maxlength="100" style="width: 80%" /></div>
<div style="padding: 10px 0 0;">
<input onclick="xajax_subscribe('subscribe', $('#newsletter_name').val(), $('#newsletter_email').val());$(this).val('{$lang.loading}');" type="button" value="{$lang.massmailer_newsletter_subscribe}" />
</div>
<div style="padding: 5px 0">
<a id="unsubscribe_link" href="javascript:void(0);" class="static">{$lang.massmailer_newsletter_unsubscribe}</a>
</div>
</div>
<div id="nl_unsubscribe" class="hide">
{$lang.massmailer_newsletter_your_e_mail}
<div><input type="text" id="un_newsletter_email" maxlength="150" style="width: 80%" /></div>
<div style="padding: 10px 0 0;">
<input onclick="xajax_subscribe('unsubscribe', '', $('#un_newsletter_email').val());$(this).val('{$lang.loading}');" type="button" value="{$lang.massmailer_newsletter_unsubscribe}" />
</div>
<div style="padding: 5px 0">
<a id="subscribe_link" href="javascript:void(0);" class="static">{$lang.massmailer_newsletter_subscribe}</a>
</div>
</div>
{/if}
<script type="text/javascript">
{
literal
}
$(document).ready(function() {
$('#unsubscribe_link').click(function() {
$('#nl_subscribe').slideUp('normal');
$('#nl_unsubscribe').slideDown('slow');
});
$('#subscribe_link').click(function() {
$('#nl_unsubscribe').slideUp('normal');
$('#nl_subscribe').slideDown('slow');
});
}); {
/literal}
</script>
<!-- newsletter block end -->
I can't enforce the "required" checkbox via JavaScript/Ajax, can you please help me to change the code correctly?
I'm not managing to make it work because the "form" tag is missing like any normal form.
Thanks!
You only need to check the entered value before the ajax request is started:
function xajax_subscribe(subscribe,name,email) {
if(email = '') {
alert('Please enter an E-Mail Address')
} else {
// your ajax request
}
}
Be aware that you have to check again when request started respectively the entered values posted to your php file, learn how to check validate email and so on...
I'm currently working on a web app I'm stuck on deleting the elements that I have created.
I'm using jQuery to display thumbnail pictures and I'm trying to include a hovering X to the top right corner that will on-click delete the thumbnail and the original file upload before sending the form.
This is my code:
$(document).ready(function() {
// This is where I create the thumbnail:
$('#uploadImage').on('change', function() {
resizeImages(this.files[0], function(dataUrl) {
$('#photo1').val(dataUrl);
document.getElementById("uploadPreview").src = dataUrl;
});
});
// This is where I am attempting to delete it:
$('.hiddenImages .close').on('click', function() {
var id = $(this).closest('.hiddenImages').find('img').data('id');
alert('remove picture: ' + id);
document.getElementById(".hiddenImages").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictureHolders">
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview" data-id="photo-1" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview2" data-id="photo-2" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview3" data-id="photo-3" style="width:
100px; height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview4" data-id="photo-4" style="width: 100px;
height: 100px;" />
</div>
</div>
<div class="inputs">
<div> Photo 1:
<input type="text" id="desc1" name="desc1" />
<input id="uploadImage" type="file" />
</div>
<input type="hidden" class="photos" id="photo1" name="photo1" value="" />
<br/>
<div> Photo 2:
<input type="text" id="desc2" name="desc2" />
<input id="uploadImage2" type="file" />
</div>
<input type="hidden" class="photos" id="photo2" name="photo2" value="" />
<br/>
<div> Photo 3:
<input type="text" id="desc3" name="desc3" />
<input id="uploadImage3" type="file" />
</div>
<input type="hidden" class="photos" id="photo3" name="photo3" value="" />
<br/>
<div> Photo 4:
<input type="text" id="desc4" name="desc4" />
<input id="uploadImage4" type="file" />
</div>
<input type="hidden" class="photos" id="photo4" name="photo4" value="" />
<br/>
</div>
Any help would be appreciated.
You are trying to get a handle to an identifier by using a class name inside getElemlementById
You should be able to simply remove the container of the clcked x, similar to this: $(this).closest('.hiddenImages').remove();
In addition your selector for the click event on the x might need to change as you are removing the container your binding to and as such any new .hiddenImages container will not have that click event bound.
You might need to update $('.hiddenImages .close').on('click', function... to $('.pictureHolders').on('click', '.hiddenImages .close', function...
$(document).ready(function() {
// This is where I create the thumbnail:
$('#uploadImage').on('change', function() {
resizeImages(this.files[0], function(dataUrl) {
$('#photo1').val(dataUrl);
document.getElementById("uploadPreview").src = dataUrl;
});
});
// This is where I am attempting to delete it:
$('.pictureHolders').on('click', '.hiddenImages .close', function() {
$(this).closest('.hiddenImages').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictureHolders">
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview" data-id="photo-1" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview2" data-id="photo-2" style="width: 100px;
height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview3" data-id="photo-3" style="width:
100px; height: 100px;" />
</div>
<div class="hiddenImages">
<span class="close">×</span>
<img id="uploadPreview4" data-id="photo-4" style="width: 100px;
height: 100px;" />
</div>
</div>
<div class="inputs">
<div> Photo 1:
<input type="text" id="desc1" name="desc1" />
<input id="uploadImage" type="file" />
</div>
<input type="hidden" class="photos" id="photo1" name="photo1" value="" />
<br/>
<div> Photo 2:
<input type="text" id="desc2" name="desc2" />
<input id="uploadImage2" type="file" />
</div>
<input type="hidden" class="photos" id="photo2" name="photo2" value="" />
<br/>
<div> Photo 3:
<input type="text" id="desc3" name="desc3" />
<input id="uploadImage3" type="file" />
</div>
<input type="hidden" class="photos" id="photo3" name="photo3" value="" />
<br/>
<div> Photo 4:
<input type="text" id="desc4" name="desc4" />
<input id="uploadImage4" type="file" />
</div>
<input type="hidden" class="photos" id="photo4" name="photo4" value="" />
<br/>
</div>
$('.hiddenImages .close').on('click', function() {
var id = $(this).closest('.hiddenImages').find('img').data('id');
alert('remove picture: ' + id);
document.getElementById(".hiddenImages").remove();
});
become:
$('.hiddenImages .close').on('click', function() {
var img = $(this).closest('.hiddenImages').find('img');
img.remove()
});
i can not see anything please help me.
How can i parse this code .
I can build cordova app .
i can parse everything app.js file but login doesnt work any ideas?
I think my js code wrong but where am i wrong ?
Cordova is new for me i have no experience for this
$('#submmit-register').on('click', function () {
console.log('login');
var username = $$('#register-username').val();
var email = $$('#register-email').val();
var password = $$('#register-password').val();
if (!username || !password || !email){
myApp.alert('Please fill in all Registration form fields');
return;
}
});
var query = 'http://-------/users/signup';
///'http://-------/users/login'
var postdata = {};
postdata.username = name;
postdata.email = email;
postdata.password = password;
myApp.showIndicator();
$.ajax({
url: query,
headers: {"X-Parse-Application-Id":applicationId,"X-Parse-REST-API-Key":restApiKey},
type: "POST",
contentType: "application/json",
data: JSON.stringify(postdata),
statusCode: {
201: success201,
400: notsuccess,
500: notsuccess
}
});
<div class="popup popup-login">
<div class="content-block-login">
<h4>LOGIN</h4>
<div class="loginform">
<form id="LoginForm" method="post">
<div class="form_row">
<div class="form_row_icon"><img src="images/icons/white/user.png" alt="" title="" /></div>
<input type="text" name="username" value="" class="form_input required" placeholder="username" />
</div>
<div class="form_row">
<div class="form_row_icon"><img src="images/icons/white/lock.png" alt="" title="" /></div>
<input type="password" name="password" value="" class="form_input required" placeholder="password" />
</div>
<div class="forgot_pass">
Forgot Password?</div>
<input type="submit" name="submit" class="form_submit" id="submit" value="LOGIN" />
</form>
<div class="signup_social">
<!--a href="http://www.facebook.com/" class="signup_facebook external">FACEBOOK</a>
<!--a href="http://www.twitter.com/" class="signup_twitter external">TWITTER</a->
LINKEDIN
<!--a href="http://www.twitter.com/" class="signup_googleplus external">GOOGLE+</a-->
</div>
<div class="signup_bottom">
<p>Don't have an account?</p>
LOGIN </div>
</div>
<div class="close_loginpopup_button"><img src="images/icons/white/menu_close.png" alt="" title="" /></div>
</div>
</div>
<!-- Register Popup -->
<div class="popup popup-signup">
<div class="content-block-login">
<h4>REGISTER</h4>
<div class="loginform">
<form id="RegisterForm" method="post">
<div class="form_row">
<div class="form_row_icon"><img src="images/icons/white/user.png" alt="" title="" /></div>
<input type="text" name="username" value="" class="form_input required" placeholder="username" />
</div>
<div class="form_row">
<div class="form_row_icon"><img src="images/icons/white/contact.png" alt="" title="" /></div>
<input type="text" name="email" value="" class="form_input required" placeholder="email" />
</div>
<div class="form_row">
<div class="form_row_icon"><img src="images/icons/white/lock.png" alt="" title="" /></div>
<input type="password" name="password" value="" class="form_input required" placeholder="password" />
</div>
<input type="submit" name="submit" class="form_submit" id="submit" value="REGISTER" />
</form>
<!--div class="signup_social">
FACEBOOK
<!--a href="http://www.twitter.com/" class="signup_twitter external">TWITTER</a->
LINKEDIN
<!--a href="http://www.twitter.com/" class="signup_googleplus external">GOOGLE+</a-->
</div-->
</div>
<div class="close_loginpopup_button"><img src="images/icons/white/menu_close.png" alt="" title="" /></div>
</div>
</div>
<!-- Login Popup -->
<div class="popup popup-forgot">
<div class="content-block-login">
<h4>FORGOT PASSWORD</h4>
<div class="loginform">
<form id="ForgotForm" method="post">
<div class="form_row">
<div class="form_row_icon"><img src="images/icons/white/contact.png" alt="" title="" /></div>
<input type="text" name="Email" value="" class="form_input required" placeholder="email" />
</div>
<input type="submit" name="submit" class="form_submit" id="submit" value="RESEND PASSWORD" />
</form>
<div class="signup_bottom">
<p>Check your email and follow the instructions to reset your password.</p>
</div>
</div>
<div class="close_loginpopup_button"><img src="images/icons/white/menu_close.png" alt="" title="" /></div>
</div>
</div>
<!-- Social Popup ->
First of all there is no submmit-register button or id found in your html code
You have used var username = $$('#register-username').val(); double dollar sign, which is not valid in javascript
I am not sure if what is myApp
myApp.showIndicator(); is a function then call it just like showIndicator();
myApp.alert is invalid
Replace this with success function to get result in just single function
statusCode: {
201: success201,
400: notsuccess,
500: notsuccess
}
success function
success: function(data){
console.log(data);
}
I have the current code below, which is working. The problem is this code will be in a form and i can't have nested forms. How do i change the code, so this works with a div parent element instead of a form?
<form>
<script type="text/javascript">
function inmet(form){
form.in2met.value = ((form.inch.value -0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches:
<input class="box1" type="text" name="inch" />
</div>
<div class="singsubmit">
<input onclick="inmet(this.form)" type="button" value="GO" />
</div>
<div class="singcalcanswer">Equals in Millimetres:<br />
<input class="calcbox2" type="text" readonly="readonly" name="in2met" />
</div>
</div>
</form>
One option would be to use Element.getElementsByClassName() or a similar method to get the input field you want:
<div id="form-root">
<script type="text/javascript">
function inmet(calcRoot){
calcRoot.getElementsByClassName('calcbox2')[0].value = ((form.inch.value -0) * 25.4).toFixed(2);
}
// example: inmet(document.getElementById('form-root'))
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches: <input class="box1" type="text" name="inch" /></div>
<div class="singsubmit"><input onclick="inmet(document.getElementById('form-root'))" type="button" value="GO" /></div>
<div class="singcalcanswer">Equals in Millimetres:<br /><input class="calcbox2" type="text" readonly="readonly" name="in2met" /></div>
</div>
</div>
Not the cleanest solution, but it should do the job:
<div>
<script>
function inmet() {
document.getElementById('in2met').value = ((document.getElementById('inch').value - 0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br/>Inches to Millimetres</div>
<div class="singcalcquestion">
<label for="inch">Enter the Inches:</label>
<input class="box1" type="text" name="inch" id="inch"/>
</div>
<div class="singsubmit">
<input onclick="inmet()" type="button" value="GO"/>
</div>
<div class="singcalcanswer">
<label for="in2met">Equals in Millimetres:</label>
<input class="calcbox2" type="text" readonly="readonly" name="in2met" id="in2met"/>
</div>
</div>
</div>
I am trying to add a time picker to my HTML page. It is added successfully but the problem is that when I click time text box, the time picker appears at the bottom of the page. IS there anything wrong with my CSS?
<head>
<link rel="stylesheet" type="text/css" href="css/clockpicker.css" />
<script type="text/javascript" src = "js/clockpicker.js"> </script>
</head>
<body>
<div class="head_bg clearfix"><!--start head_bg-->
<div class="outer_div clear_both"><!--start outer_div-->
<div class="head_left"><!--start head_left-->
<img src="img/logo.png" width="94" height="142" alt="" /><!--Logo here-->
</div><!--end head_left-->
<div class="head_right"><!--start head_right-->
<div class="head_sub01"><!--start head_sub01-->
<img src="img/text_img.png" width="397" height="20" alt="" />
</div><!--end head_sub01-->
<div class="head_sub02"><!--start head_sub02-->
<div class="ul"><!--start ul div-->
<ul><!--start ul-->
<li><img src="img/signout_icon.png" width="42" height="46" alt="" /></li>
<li><img src="img/seperator.png" width="1" height="39" alt="" class="img_padding" /></li>
<li>Sign Out</li>
</ul><!--end ul-->
</div><!--end ul div-->
</div><!--end head_sub02-->
</div><!--end head_right-->
</div><!--end outer_div-->
</div><!--end head_bg-->
<div class="clear_both height_20px"> </div>
<div class="outer_div clearfix"><!--start outer_div-->
<div class="clear_both height_10px"> </div>
Back
<input type="submit" value="Check Availability and Save" class="btn_all" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />
<input type="submit" disabled value="Delete" class="btn_all" />
<div class="clear_both height_5px"> </div>
<hr />
<div class="clear_both height_5px"> </div>
<span class="font_15px color_official"><b>Subject</b></span>
<input type="text" required class="txt_input02" name = "abc" /> <!-- imam -->
<span class="font_15px color_official"><b>Name</b></span>
<input type="text" required class="txt_input07" name = "name" value = "<?php echo htmlentities($_SESSION['fullName']); ?>"/>
<span class="font_15px color_official"><b>Dept</b></span>
<input type="text" required class="txt_input06" name = "dept" value = "<?php echo htmlentities($_SESSION['dep']); ?>"/>
<div class="clear_both height_10px" > </div>
<span class="color_official"><b>From</b></span>
<input type="text" required name="date_txt" id="datepicker-example1" class="txt_input03" />
<span class="color_official"><b>To</b></span>
<input type="text" required name="date_txt1" id="datepicker-example2" class="txt_input03" />
<span class="color_official"><b>Time In</b></span>
<input type = "text" required class="txt_input03" name ="timeIn" id = "timeIn" placeholder="00:00"/>
<script type="text/javascript">
var input = $('#timeIn');
input.clockpicker({autoclose: true});
</script>
</body>
It shows up like this:
Bootstrap Timepicker jsfiddle
Need to import CSS
#import url('//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css');
#import url('http://jdewit.github.io/bootstrap-timepicker/css/bootstrap-timepicker.min.css');