I am creating a mobile app using HTML5 and jQuery mobile.
I have a form containing a field of the type "date":
<form id="registrationForm">
<div data-role="fieldcontain">
<input type="date" name="dateOfBirth"/>
</div>
<img id="calendar_logo"/>
</form>
When the user taps the field, the browser native calender shows.
What i need, is for that calender to show upon a click on the calender_logo image.
I tried setting the focusin with jQuery, but it does'nt work:
$('#calendar_logo').click(function(){
$("#registrationForm input[name='dateOfBirth']").focusin();
});
Can anybody please help?
thank you!
Your calendar logo could be wrapped in a label tag that points to the field. You just need to give the field an ID.
<form id="registrationForm">
<div data-role="fieldcontain">
<input type="date" id="dateOfBirth" name="dateOfBirth"/>
</div>
<label for="dateOfBirth">
<img id="calendar_logo"/>
</label>
</form>
Most browsers will focus the field if the user clicks on the label.
Related
I am trying to remove the button on the bottom of the HTML default date picker. I can't seem to find a way. The Button says: "Today"
<div class="form-group" id="datepicker">
<label id="WinterStart:" for="usr">Winter: </label>
<input type="date" class="form-control" id="winterStartFrom:" min="2019-11-10">
</div>
It may be your browser delivered setting,
Try with this or this
This will give you a custom date pickers.
I am having trouble disabling Chrome's payment method dropdown that is supposed to appear when you click in the credit card field but it is appearing when you click in a subject input field. Please note, the HTML is generated automatically and cannot be edited directly, I will need to adjust using JS.
<form>
<div id="subject_row" class="form-row form-text eCardFields show">
<div class="form-content">
<span class="field-required"></span>
<label for="ecard_subjectname">Subject: *</label>
<input type="text" name="ecard_subjectname" id="ecard_subjectname" value="" maxlength="50" placeholder="disabled only for this component">
<input type="hidden" name="ecard_subjectsubmit" id="ecard_subjectsubmit" value="true">
</div>
</div>
</form>
This is what I have tried:
//attempt 1
$('#ecard_subjectname').attr('autocomplete', 'new-password');
//attempt 2
$('#ecard_subjectname').attr('autocomplete', 'off');
Try using terrylinooo's disableAutoFill for jQuery: https://github.com/terrylinooo/jquery.disableAutoFill
I coded a simple search form for my website using just a text input for the search term. Also i used the typeahead.js plugin which allows autocomplete while typing.
Everything seems to work fine except when i'm trying to submit the form using the Search button of the ios keyboard. When i tap it nothing happens.
Any ideas about why this is happening?
Here is the form's code:
<form action="[config.site_url]/search/find" method="post" id="main-search-form">
<div class="form-group" id="main-search">
<input id="topnav_search" name="search_text" class="form-control typeahead" placeholder="" type="text" value="">
</div>
<input type="submit" name="submit" style="display: none;" />
</form>
And this is the search ios button that i mean:
Finally, i just changed the css styling of the submit button to this:
style="position: fixed; top: -1000px;"
Solution found here: Getting iPhone GO button to submit form
I am adding some dynamic input controls via Jquery, I append them in the form, its working fine.
But these input controls are part of popup which I show using LightBox_me.js and when ever I open the hidden div with lihgtbox_me.js it puts these controls at the end of body tag and out of the form. Due to which data in these input controls are not being submitted with from.
Here is the html
<div id="attach" style="display:none" class="srpopup">
<input type="text" name="attach_name" id="sr1_name" />
<input type="text" name="attach_serial" id="sr1_serial" />
</div>
here is how i am showing the div as popup using lightbox_me.js
function showAttachment(){
$('#attach').lightbox_me({
centered: true,
onLoad: function() {
}
});
}
Your question is not clear enough. Any way I can't figure out where is your form start! Try to push your form inside the hidden div like below.
<div id="attach" style="display:none" class="srpopup">
<form>
<input type="text" name="attach_name" id="sr1_name" />
<input type="text" name="attach_serial" id="sr1_serial" />
</form>
</div>
This is a form validation for jquery:
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
I need something like that but the tips has to appear when I select the input text form by clicking on it and has to dissapear when I select another input text form.
Is there a way to do this with jquery, mootools, scriptaculus or any other library ?
Thanks ^_^
In jquery, I'd do something like this:
$('input').focus(function(){
$(this).sibling('div.form_tooltip').show();
});
$('input').blur(function(){
$(this).sibling('div.form_tooltip').hide();
});
corresponding html:
<div class="form_input">
<label for="..">label</label>
<input type="text" name="" id="" value="" />
<div class="form_tooltip" style="display: none;">
Here goes the html that appears in the tooltip, you probably want this div to be positioned relatively to the div.form_input.
</div>
</div>