Jquery Setting Value of Input Field - javascript

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.

Related

Id from img inserted into input on click

So let's say I got an image called Feelsbadman
And I also got an input called #type
Then what I want to achieve is to insert the id of my image into my input on click.
Like this non working example:
$("#Feelsbadman").click(function(){
$("#type").val(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id = "Feelsbadman" src='https://cdn.betterttv.net/emote/566c9fc265dbbdab32ec053b/1x' class = "emotes">
<input type="text" name="message" id = "type" autocomplete="off" placeholder="type your chat message" required>
prefer jquery solution, but javascript is ok too :)
You just have to set the value of the input with the id of the click handler.
$("#Feelsbadman").click(function(){
$("#type").val(this.id);
});
use jquery method val() to insert value:
$("#Feelsbadman").click(function(){
$("#type").val($(this).attr('id'));
});
If you want to set the image tag id as value of input then use like this
$("#Feelsbadman").click(function(){
$("#type").val($(this).attr('id'));
});

How to put a degree symbol in an html input field through javascript

I have a text box as
HTML
<input type="text" id="lat" placeholder="Latitude" ng-lat value="9°">
which works fine as it displays the degree sign perfectly, but when I try to set the value through jquery like
Jquery
$("#lat").val("9°")
Its displaying the entire text instead of the degree symbol.
You can target the value attribute:
$("#lat").attr('value',"101"+String.fromCharCode(176))
it is also better to use .text() to set the text because .val() is used to retrieve the value of an element
You can use HEXCode,
e.g
<a href id="my">Here</a>
<script>
$('#my').click(function()
{
alert('9\xB0');
});
</script>
Also go through this link
$("#test").click(function(){
$("#lat").val("29" + ascii(176))
});
function ascii (a) { return String.fromCharCode(a); }
Updated JSFiddle for further help: http://jsfiddle.net/zkh2of12/1/
Use the special tag besides the input field, it will be clear for the user:
<input type="text" id="lat" placeholder="Latitude °" value=""> °
What about just setting the symbol directly in JavaScript instead of the HTML code?
$(function(){
$("#set").click(function(){
$("#lat").val("°");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="lat" placeholder="Latitude" ng-lat value="9°">
<button id="set">set</button>
If you want to improve those just make a hidden <span> with the html code you like inside and then just pick the html with JavaScript. This will work even for symbols you cannot post in JS
Try this:
$("#lat").attr("val","9"+ascii(176));

jQuery click function on an array of inputs

I try to implement a change function on every input field named plz_von.
<input type="text" name="plz_von[]" class="plz_von" placeholder="10000">
<input type="text" name="plz_von[]" class="plz_von" placeholder="20000">
<input type="text" name="plz_von[]" class="plz_von" placeholder="30000">
<input type="text" name="plz_von[]" class="plz_von" placeholder="40000">
I want to do it this way:
$('input[name="plz_von[]"]').change(function() {
alert("got it");
});
I don't know what's going wrong. Any idea? I tried it with the class name as well.
Because [ ] is an attribute selector. You need to escape it.
$('input[name="plz_von\\[\\]"]')
Since you have a class that is common, you might as well use that instead.
$('input.plz_von')
Thanks all for the support. Finally I found the failure.
I had to put the jQuery code into the ready function! This is quite clear, because the function cannot by added to the inputfield, when the input field isn't already loaded in the DOM.. grrr
$(document).ready(function() {
$('input[name="plz_von[]"]').change(function() {
alert("hu");
});
});
Best regards,
Marco

Setting HTML textbox value using javascript function?

I'm using this code to set the HTML textbox value using Javascript function. But it seems to be not working. Can anyone point out, what is wrong with this code?
Whats your Name?
<input id="name" value="" />
<script type="text/javascript">
function setValue(value){
var myValue=value;
document.getElementsById("name").value = myValue;
}
</script>
the "value" is came from my android java class using this codes
String value = "Isiah";
WebView web = (WebView) findViewById(R.id.web1);
web.getSettings().setJavaScriptEnabled(true);
web.loadUrl("file:///android_asset/www/webpage");
web.loadUrl("javascript:setValue("+ value +")");
function setValue(value) {
var myValue=value; //unnecessary
document.getElementById("name").value= myValue;
}
But then as pointed out in the comments, you need to call setValue(value) somewhere in your code. Right now you just defined the function is never called.
You could either access the element’s value by its name:
document.getElementsByName("textbox1"); // returns a list of elements with name="textbox1"
document.getElementsByName("textbox1")[0] // returns the first element in DOM with name="textbox1"
So:
input name="buttonExecute" onclick="execute(document.getElementsByName('textbox1')[0].value)" type="button" value="Execute" />
Or you assign an ID to the element that then identifies it and you can access it with getElementById:
<input name="textbox1" id="textbox1" type="text" />
<input name="buttonExecute" onclick="execute(document.getElementById('textbox1').value)" type="button" value="Execute" />
You are using document.getElementsById("name") it should be document.getElementById("name")
not Elements it is Element
You are not linking the function to anything. For example, a click:
<input id="name" value="" onclick="javascript:this.value=12;"/>
Replace the onclick attribute for your desired function, whatever it does (you need to be more specific)
Also, there is no language attribute (at least not anymore) use type="text/javascript" instead
Here is a fiddle: http://jsfiddle.net/4juEp/
Click the input to see it working.
Look at this second fiddle. http://jsfiddle.net/4juEp/1/
which loads whatever is defined in the hid input to the name input.
Firstly, you have a typo in your javascript function i.e. you have used getElementsById as compared to getElementById
To set the value of the textbox on page load, I suggest you use an alternative
<body onload="setValue('yourValueToSet');">
<!-- Your usual html code in the html file -->
</body>
I think you are missing the quotes,
try,
web.loadUrl("javascript:setValue('"+ value +"')");
also consider about the typo.
Check this out:
<body onload="setvalue($value);">
Whats your Name?<input id="name" name="name" value=""/>
<script type="text/javascript">
function setValue(value){
document.{formname}.name.value = value;}</script>
It's not Elements
It's Element
You should use document.getElementById('object-id');

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"));
});

Categories

Resources