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>
Related
Say I have this div block:
<div id="some_id" style="display: none;">
<form action="someAction" method="post">
<input type="hidden" name="some-name" value="some-value">
</form>
</div>
I need to the select the form inside this div. I am able to select the div by $('#some_id') but when I try to select the form by $('#some_id').find('form') (or get or $('#some_id:form')) I get this error:
Uncaught TypeError: $(...).find is not a function
Any possible solution?
There is nothing wrong with what you attempted, provided that jQuery is properly included in your page and you are properly referencing it with $ or jQuery if it is in noConflict mode.
console.log(
$('#some_id').find('form').get()
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some_id" style="display: none;">
<form action="someAction" method="post">
<input type="hidden" name="some-name" value="some-value">
</form>
</div>
You don't want a : to select the child you want >
Your selector should look like this:
$('#some_id > form')
Also make sure you are including jQuery, it looks like your code cannot find it.
I'm in ASP.NET MVC. I need to modify an input tag with JQuery to set placeholder="Something"
I have these tags in a form
<div id="searchbox" class="SearchBox SearchInterface state
ComponentState QueryController Debug">
<div>
<input type="text" autocapitalize="off" autocorrect="off"
class="QueryBox" form="dummy-form">
</div>
</div>
I have tried many things such as
$(document).ready(function () {
$("#searchbox > div > input").prop('placeholder', 'Search');
});
But It's always like it can't find the input tag.
What's wrong with that and how I can do that ?
Thanks,
here it is working:
http://fiddle.jshell.net/9dRc8/
Seams you are missing a closing tag for the input or something like this.
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.
Is it possible using jQuery to get whole div content(dynamically generated elements) with values? For example, child element may be a div, span, select, or input?
I am trying to save whole div content(generated on fly) with values as .html file. I tried with one div which has form and input elements.
HTML:
<div id="inputs">
<form class="mainForm">
<div style="height: 100%;" id="div1">
<label>Input1</label>
<input type="text" id="input1" name="input1"/>
</div>
</form>
</div>
<input id="addform" type="button" value="Click to add Input"/>
<input id="getform" type="button" value="Click to get html"/>
jQuery:
$(document).ready(function(){
$("input#addform").click(function(){
$("div#inputs").append($('form.mainForm').clone().html());
});
$("input#getform").click(function(){
alert($("div#inputs").clone().html());
});
});
FIDDLE:
http://jsfiddle.net/UhJfn/
How to get whole div#inputs content with values (entered by user) On click of Click to get html button?
Help would be appreciated.
P.S: Here I used only one input in form. But in my real case, we do have select, span, image, etc.
Try this,
You have to explicitly update the value attribute to achieve your need.
$(document).ready(function(){
$(document).on('keyup','input[type="text"]',function(){
$(this).attr('value',$(this).val());
});
$("input#addform").click(function(){
$("div#inputs").append($('form.mainForm').clone().html());
});
$("input#getform").click(function(){
alert($("div#inputs").clone().html());
});
});
DEMO
<form id="commentform" method="post" action="wp-comments-post.php">
<input type="text" aria-required="true" tabindex="1" size="22" value=""
id="author" name="author">
</form>
I set default value "visitor" to the input box. When focus is in text box or mouose enters it, I want to hide "visitor" string and want to show it when it loses focus or mose moves out.
Try using the HTML5 placeholder attribute:
<input type="text" aria-required="true" tabindex="1" size="22"
placeholder="visitor" id="author" name="author">
While browser support is not 100% there yet, this will give you a standard way to achieve what you're trying to achieve, without going through unnecessary hoops.
Another thing you can try is to overlay the input element over some text and make it transparent/translucent when not in focus and opaque when in focus/filled.
As of today, Tumblr's login page uses this trick:
<div class="input_wrapper" id="">
<label for="user_password">Password</label>
<input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>
Through CSS magic this becomes:
Looks like you are using WordPress, so you have the jQuery library on your site.
You can use my jQuery plugin to achieve this.
Example
jQuery
$('#author').inputLabel({
customLabel: 'Visitor'
});
In this case, I had to specify the label myself, but the plugin works without this by finding the relevant label element to the input, which should be present for accessibility.
jsFiddle.
If you are up to HTML 5 yet then try this:
<script type="text/javascript">
var prompt="visitor";
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
if(txt.value==''){
txt.value=prompt;
}
}
</script>
Ates Goral's answer looks very interesting. please try it first shot. this is an alternative if you do not want to sweat..:)
i would suggest using a watermark plugin. there are many available.
have used this plugin before. worked fine. gives you nice control.
the plugin requires jQuery
Though I too would use jQuery or CSS and a pseudo-class (:focus)....
Here's an easy JS solution that does exactly what you're after. Again, I wouldn't recommend this approach for more than one or two input fields.
<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>