Develop Reference

How to add an onclick jquery function in an input area

I am a newbie in Javascript and jquery I have a jquery function
$('.input-group .date').datepicker({
});
for
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="">
</div>
I want to add this inside input tag using onclick="" can you please tell me how to do this ?

If I'm thinking what your thinking then it's wrong.
.datepicker() already assigns an onClick event so you don't have to create an extra one.
You have to make sure you are using jQuery and jQuery UI in order for datepicker to work.
Then you either have to put your script before you close body or in the head and use
$(document).ready(function(){ ... });
I also think you are using the wrong selector here.
. is class
# is ID
So it should be
$('.input-group .form-control').datepicker();
Example: http://jsfiddle.net/Spokey/AjRm3/

For those coming to this question because they want to know how to bind to the event that happens when someone clicks on an input box, then this is useful:
$('input.your-input-box-class').focus(function(e){
// do something
});
For those who want to use datepicker like the original question asks, then remember that jQuery UI abstracts away from these types of details. So just use the widgets like they were meant to be used. In this case, create the datepickers for all your input boxes that have a certain class (say date maybe) when the DOM is done loading:
$(document).ready(function(){
$('input.datepicker').datepicker({ /*... pass options here ...*/ });
});
And for options, you read the documentation, they include handling all the events you need:
http://api.jqueryui.com/datepicker/

Call a function:
onclick="someFunction(this);"
Set function:
function someFunction(this) {
$(this).prev('.input-group.date').datepicker({});
}

You bind datepicker to DOM element, not onClick.
$(document).ready(function(){
$('.form-control').datepicker({});
});
Or add it in function, so you can call it dynamically.

put the set of code inside a javascript function say clickMe()
function clickMe(){
$('.input-group .date').datepicker({
});
}
now call the function in click method.
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="" onclick="clickMe()">
</div>

clear value in an input field with jQuery

Hi I have a number of inputs for telephone numbers, they use the same class and the same show/hide techinque.
I want to be able to clear the contents of the phone number in the input box, i.e. with the class name of input_tel.
However it seems to clear all inputs which I assume is because I am using the following line; input:text , when I put in a class it just fails to work.
My JS and some of my html is below or view a jsFiddle:
$(".contact_numbers").on('click', '.clearnumber', function () {
$(this).siblings('input:text').val('');
});
<div class="telephonetwo contact_numbers">
<input type="text" class="smallinput contactpagelabel" name="faxname" size="10" value="Fax">
<input type="checkbox" class="contact_no" name="showfax" value="Y">
<input type="text" name="fax" size="30" value="016128 13456" class="input_tel">
Hide Clear #
</div>
If you are viewing my JSfiddle click the reveal additional numbers for the clear button to appear.
Update
I want to be able to clear the closest input_tel rather than all of them, as their are multiple numbers.
Thanks in advance

replace:
$(this).siblings('input:text').val('');
with
$(this).siblings('input:text').closest('.input_tel').val('');
JSFIDDLE DEMO

How about targeting the input_tel class then?
$(".contact_numbers").on('click', '.clearnumber', function () {
$(this).parent().parent().find('input.input_tel').val('');
});
Assuming no other input fields have that input_tel class on them.

This should do it...
$(".contact_numbers").on('click', function () {
$(".input_tel").val('');
});

The safe way to clear input fields with jquery
$.fn.noText = function() {/*use the jquery prototype technology to make a chainable clear field method*/
if(this.is('input')){ /*check to c if you the element type is an input*/
this.val('');/*clear the input field*/
}return this;/*means it is chainable*/
};
$('input').noText();

Jquery Setting Value of Input Field

I have an input field and i am trying to set its value using its class
<form:input path="userName" id="userName" title="Choose A Unique UserName" readonly="${userNameStatus}" class="formData"/>
Which renders as:
<input id="userName" name="userName" title="Choose A Unique UserName" class="formData" type="text" value=""/>
I am using the following jquery but this does not seem to work. Can someone tell me where i am going wrong.
$(".formData").html("");
Edited JQuery Function that handles the event
$('#reset').click(function (){
$("#userNameErr").text("");
$('#badgeNoErr').text("");
$(".errors").html("");
$(".formData").val("");
});
nor is $(".formData").text("") or $(".formData").val("") working.

This should work.
$(".formData").val("valuesgoeshere")
For empty
$(".formData").val("")
If this does not work, you should post a jsFiddle.
Demo:
$(function() {
$(".resetInput").on("click", function() {
$(".formData").val("");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="formData" value="yoyoyo">
<button class="resetInput">Click Here to reset</button>

If the input field has a class name formData use this :
$(".formData").val("data")
If the input field has an id attribute name formData use this :
$("#formData").val("data")
If the input name is given use this :
$("input[name='formData']").val("data")
You can also mention the type. Then it will refer to all the inputs of that type and the given class name:
$("input[type='text'].formData").val("data")

change your jquery loading setting to onload in jsfiddle . . .it works . . .

use this code for set value in input tag by another id.
$(".formdata").val(document.getElementById("fsd").innerHTML);
or
use this code for set value in input tag using classname="formdata"
$(".formdata").val("hello");

You just write this script. use input element for this.
$("input").val("valuesgoeshere");
or by id="fsd" you write this code.
$("input").val(document.getElementById("fsd").innerHTML);

$('.formData').attr('value','YOUR_VALUE')

Put your jQuery function in
$(document).ready(function(){
});
It's surely solved.

How to name inputs when having several jquery raty in one form?

I'm using the jquery raty plugin http://www.wbotelhos.com/raty/ to make a form with star rating.
The plugin generates a hidden field for each star rating input like this :
<input id="question8-score" type="hidden" name="score">
<input id="question6-score" type="hidden" name="score">
<input id="question5-score" type="hidden" name="score">
The is when I validate the form (I use codeigniter) It just get confused with 3 input with the same name. So I want to make a script that do something like :
For each input with name="score", put the id attribute value as the name attribute value.
I think it's probably possible with jQuery but I don't know how to do that. Could someone help me? Thanks!!

$("input[name=score]").each(function () {
this.name = this.id;
});
Edited the selector

$(document).ready(function() {
$('input[name^="score"]').each(function() { // starts with score
this.name=this.id;
});
}

$('input[name=score]').each(function(){
$(this).attr("name", $(this).attr("id"));
});

Add custom information to text fields to use with javascript

I´m making a google instant-type of remote suggestion script with ajax on a site I'm making.
now I have this:
<input type="text" name="spanishtitle" onkeyup="suggest(this, 'title_es');" onblur="fill();" />
and I would like to move that onkeyup script to a jquery call, so I added this
$('.suggestable').live('keyup', ( function() { suggest(this); } ));
and changed the above to this
<input class="suggestable" type="text" name="spanishtitle" onblur="fill();" />
but I'm missing the 'title_es' parameter which tells the ajax handler what am I looking for.
So what I want to know, basically, is if there's a way to add this parameter to the object, so I can access it from suggest() somehow.

You can add it to your HTML...
<input type="text" name="spanishtitle" onblur="fill();" data-title="title_es" />
And then access it in jQuery...
$('.suggestable').live('keyup',
function() { suggest(this, $(this).attr('data-title')); }
);
The data- prefixed attributes are in the HTML5 spec, and are going to be very useful.
At last, no further excuses for using inline event attributes :)

Assign it as the id of the element and then
$('.suggestable').live('keyup', function() {
suggest(this, $(this).attr("id"));
});
The data-* attribute is html5 as far as I know

You can add it as an attribute to the input, something like:
<input data-lookfor='title_es' class="suggestable" type="text" name="spanishtitle" onblur="fill();" />
then you can access it in jQuery with .attr()
var look_for = $(this).attr('data-lookfor');