i have a code that allows the user to input time (i require only time and not date) from html form and it gets saved in database using php code
<form>
Select a time:
<input type="time" name="usr_time">
</form>
But it does not support firefox browser, can anyone tell how to allow user to input time in am and pm format through a form
you can do this using javascript or jquery
there are alot of libraries you can use easily
check out http://jqueryvalidation.org/documentation/
,,
or you can do this by adding more inputs like this
<input type="text" name="hours" placeholder="hours" /><br /><input type="text" name="minutes" placeholder="minutes" />
You can use a jQuery Timepicker library to provide input contraints.
HTML
<link href="http://wvega.github.io/timepicker/resources/jquery-timepicker/jquery.timepicker.min.css" style="text/css" rel="stylesheet" />
...
<form>
<input type="text" class="timepicker" name="time"/>
</form>
...
<script src="http://wvega.github.io/timepicker/resources/jquery-timepicker/jquery.timepicker.min.js"></script>
JS
(function($) {
$(function() {
$('input.timepicker').timepicker();
});
})(jQuery);
FIDDLE
Related
I'm very new to JS. But basically, I'm creating a form. Using JavaScript, how do I take a form so that you must fill in form data?
Thanks!
HTML:
<form>
<p>First Name:</p>
<input type="text" name="firstname" class="form">
<p>Last Name:</p>
<input type="text" name="lastname" class="form">
<p>Email:</p>
<input type="text" name="email" class="form">
<p>Questions / Concerns:</p>
<textarea name="concerns" rows="5" cols="30"></textarea>
<br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>
There are multiple ways of solving this particular problem.
The easiest way would be to use the required tag in elements:
<input type="text" name="firstname" class="form" required>
Edit: This may not work in very old browsers.But I don't believe you need to worry about that now.
Use required tag in all of your input elements which you need filling compulsorily.
Once you have your basic problem solved, look at using javascript functions for validation. Ref: https://www.w3schools.com/js/js_validation.asp
Once you know this, you can safely progress to reading on how validation is done on large projects- https://validatejs.org/
use document.getElementByTagName to get the input tag
Use addEventListner with first parameter as blur to detect input leave
Use this.value within if statement to check if empty
Alert something
var element=document.getElementByTagName(input);
element.addEventListner("blur",myFunction);
function myFunction(){
if(this.value==''){
alert ("write something");
}
}
I previously had a an old autocomplete script running with an older jQuery on an input form. I wanted to add markItUp to my text entry form and the autocomplete version I was using was no longer working with the newer jQuery.
I saw that the latest autocomplete was available in jquery-ui.js, but after installing that I started getting the following warning:
Error: cannot call methods on autocomplete prior to initialization;
attempted to call method '/include/suggest.php'
I looked up initialization and added this after $(document).ready(function():
$(this.target).find('input').autocomplete();
Same error message. So I tried making it more specific to the input field that's being autocompleted:
$(this.target).find("input[id^='last_']").autocomplete();
I'm sort of flying blind here. The autocomplete stuff for this page was done by someone I no longer have access to and I've never really written jQuery stuff myself. I'm trying to understand this but right now, I'm stumped.
Here's a skeleton of the page:
<script src="/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="/inc/auto/main.css" type="text/css" />
<link rel="stylesheet" href="ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="/js/markitup/jquery.markitup.js"></script>
<script src="/js/markitup/sets/default/set.js"></script>
[markitup styles]
<script>
function html_entity_decode(str)
{
var ta=document.createElement("textarea");
ta.innerHTML=str.replace(/</g,"<").replace(/>/g,">");
return ta.value;
}
$(document).ready(function() {
$("#markItUp").markItUp(mySettings);
$(this.target).find('input').autocomplete();
$("input[id^='last_']").autocomplete('/include/suggest.php',{
matchCase:true,
formatItem: function(data, i, total)
{
var s=data[0].split(",")
return s.join(" ");
}
});
$("input[id^='last_']").result(function(event, data, formatted){
var ids=this.id.split('_')
var id=ids[1]; // from last_xx got xxx
var s=html_entity_decode(data[0]).split(",");
$(this).next().focus();
$(this).next().select();
//have only last value -- TAB pressed
if(s.length==1)return;
$('#first_'+id).val(s[0]);
$('#middle_'+id).val(s[1]);
$('#last_'+id).val(s[2]);
});
});
</script>
</head>
<body>
<h1>News Inserter</h1>
<form action="/forms/cronkite.shtml" accept-charset="UTF-8" method="POST">
Reporter (Last, First Middle):<br />
<input type="text" id="last_1" name="lastreporters" size="15" maxlength="30" value="" />, <input type="text" id="first_1" name="firstreporters" size="15" maxlength="30" value="" /><input type="text" id="middle_1" name="middlereporters" size="15" maxlength="30" value="" /><br />
Story:<br />
[markitup text area]
<input type="SUBMIT" value="Insert Data" /><input type="RESET" value="Reset" /><br />
</form>
Is the problem solely in my initialization call? One additional point: the autocomplete version I was using was Autocomplete - jQuery plugin 1.1pre Copyright 2007. Has the jQuery-ui version of autocomplete changed enough that I need to update my forms?
I Have Faced Same Problem Due to Older Version Of Jquery, Then I Have added "http://code.jquery.com/jquery-migrate-1.0.0.js" Js Now All Works Fine.
After digging through tutorials, I see that jquery-ui has changed things quite a bit. Off to the tutorials!
I did a javascript is working fine and translating numbers to words.
But is doing the action only when I do click on "CALCULATE" and want to show the translation without typing or doing click just assing the value
Here is the view
<form>
Number to words<BR>
<BR>Number/Número
<INPUT NAME="Number" TYPE="text" SIZE="60" value="123"><BR>
<INPUT NAME="Calc" TYPE="button" VALUE="Calculate" ONCLICK="Calculate(this.form)">
<INPUT NAME="Reset" TYPE="button" VALUE="Reset" ONCLICK="ClearForm(this.form)">
<BR>
Spanish<BR><TEXTAREA NAME="Spanish" ROWS="5" COLS="90"></TEXTAREA><BR>
</form>
Here is the demo http://jsfiddle.net/RQ7R4/13/
Somebody can help me with this?
The following will both 'translate' on load AND while you type -- but be careful, it can keep your browser too busy if you have a high number of form elements that have to be read:
$(function() {
$('input[name=Number]').on('keyup change blur',function() {
Calculate( this.form );
});
Calculate( $('form')[0] );
});
AMAZINGLY WORKING DEMO
I had to change the input element type from text to number so it can only respond to number -- some auto-validation of sorts:
<INPUT NAME="Number" TYPE="number" SIZE="60" value="123"><BR>
<INPUT NAME="Number" TYPE="text" SIZE="60" value="123" onchange="Calculate(this.form)">
If you tab out of the field it will call the Calculate function. I would suggest you explore jQuery or AngularJS if you require something advanced.
I am building and web page in php and all the content is laid out like so ..
<div>
<form>
<input type='text' id='datepick' />
</form>
</div>
<div>
<form>
<input type='text' id='datepick' />
</form>
</div>
<div>
<form>
<input type='text' id='datepick' />
</form>
</div>
Its layout is a bit more complex really but basically the problem I am having is that the datepick id calls the datpick function but it only works on the first input and ignores the rest. I cant give them there own ids all the inputs must be called the same.
This is the function
<script type="text/javascript">
new datepickr('datepick', {
'dateFormat': 'd-m-Y'
});
</script>
Can any one tell me how to make the datepick work on all input fields.
Thanks in advance, I am proper struggling with this one ....
Look at the example here on how to use it:
http://www.joshsalverda.com/sandbox/date_pick/datepickr.html (from https://code.google.com/p/datepickr/)
You must give them all their own id.
HTML spec requires id to be unique but it will still render the page for you. Which element will be found when you look for a non-unique id in undefined. It might be the first, it might be the last, you might get an error.
or just change the id to class like mentioned:
<script> $(function() {
$( ".datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" class="datepicker" /></p>
<p>Date: <input type="text" class="datepicker" /></p>
<p>Date: <input type="text" class="datepicker" /></p>
works fine.
I'm cleaning up a simple form that has a Start Date textbox and an End Date textbox. I want to add a checkbox in between these fields that the user can check if the End Date is the same as the Start Date, so when they check it, the Start Date input value (e.g., 04/01/09) will automagically appear in the End Date textbox, so they don't have to type in the same date twice. Does that make sense?
BTW, I'm using the sexy jquery datepicker UI, and it's sweet, but I just can't figure out the above problem.
I know there's a simple solution (event handler?) but I'm stumped.
Try this code:
$("#checkboxId").click(copyDate);
function copyDate()
{
var start=$("#startDate").val();
if (this.checked==true)
$("#endDate").val(start);
}
Replace the 'id's with your own field ids.
Simple hack to solve your problem.
<html>
<head>
<script src="js/jquery.js" ></script>
</head>
<body>
<form>
<input type="text" name="startdate" id="startdate" value=""/>
<input type="text" name="enddate" id="enddate" value=""/>
<input type="checkbox" name="checker" id="checker" />
</form>
<script>
$(document).ready(function(){
$("input#checker").bind("click",function(o){
if($("input#checker:checked").length){
$("#enddate").val($("#startdate").val());
}else{
$("#enddate").val("");
}
});
}
);
</script>
</body>
</html>