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.
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 want to target any input of text type belonging to a form of a specific name. Because the form will have numerous input fields, I don't want to target a particular input name, but rather, capture the blur (or focusout) event for any input[type="text"] occurring within the form wrap.
My present code, which doesn't work:
$( document ).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
alert($(this).val());
});
});
I answered my own question. Because the code sample is essentially correct, there is no need for multiple people to try to solve the unsolvable. The problem had something to do with where I placed the javascript code, and nothing to do with structure or syntax of the code, itself.
The way the event "change" works is what it sounds like you want. An event handler doesn't actually fire when the input is clicked or if text is keyed in, it fires when text is entered and then the input loses focus.
In the following Snippet the same selector you are using is delegated to the "change" event. You'll notice that the ['tax_form'] has 4 text inputs yet the last one is the only one working. The reason is because if an input isn't assigned a type attribute, then by default type is 'text". So when using a selector based on an input's type="text", you must keep that in mind. So if you are in full control of your HTML, make sure that each input has a type attribute with an explicit value, or use classes which is better IMO.
SNIPPET
$(document).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("change", function() {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='notIt'>
<fieldset>
<legend>Not a Tax Form</legend>
<input>
<input type="text">
<input>
<input type="text">
</fieldset>
</form>
<br/>
<br/>
<form name='stillNotIt'>
<fieldset>
<legend>Still not a Tax Form</legend>
<input type="text">
<input>
<input type="text">
<input>
</fieldset>
</form>
<br/>
<br/>
<form name='tax_form'>
<fieldset>
<legend>Tax Form</legend>
<input class='klass' value='TEXT INPUT BY DEFAULT'>
<input value='TEXT INPUT BY DEFAULT'>
<input name='text' value='TEXT INPUT BY DEFAULT'>
<input type='number'>
<input type='text' value='THIS ONE COUNTS'>
</fieldset>
</form>
Previous commentators were right, that my code was fine as-is. I took my selector code out of a header script file, and placed it at the bottom of my footer script, and it worked as expected.
In the end, it wasn't my code that was the problem, but rather something to do with where I placed it. Possibly other javascript or jQuery code stepping on it.
Your code should work fine. Here's a working example of it to prove it's working. The tax_form fields should console.log() on blur. The another_form should not.
$(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Tax Form</h1>
<form name="tax_form">
<input type="text" name="first" value="first">
<input type="text" name="second" value="second">
<input type="text" name="third" value="third">
</form>
<h1>Another Form</h1>
<form name="another_form">
<input type="text" name="first2" value="first2">
<input type="text" name="second2" value="second2">
<input type="text" name="third2" value="third2">
</form>
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
This form automatically transfers the user to another form. The question i have is that when the script block is placed after the form block the code works. But when I swap them; so that script is above form, then the form doesn't work.
Can anyone tell why?
Works:
<form id="ponyo_form" action="formB.html" method="POST">
<input type="text" name="id" value="10" />
<input type="text" name="transfer_email" value="someone#aol.com" />
</form>
<script type="text/javascript">
document.getElementById("ponyo_form").submit();
</script>
This won't work:
<script type="text/javascript">
document.getElementById("ponyo_form").submit();
</script>
<form id="ponyo_form" action="formB.html" method="POST">
<input type="text" name="id" value="10" />
<input type="text" name="transfer_email" value="someone#aol.com" />
</form>
The reason this doesn't work when you have the code before the form, is that the code is run when as it is parsed along the page. So it is attempting to find a form called ponyo_form, which doesn't yet exist in the DOM.
To fix this, either place it after the form, or wrap it on an onload function.
IE:
window.onload = function()
{
document.getElementById("ponyo_form").submit();
}
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>