Jquery Setting Value of Input Field

Question

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.

What's the actual HTML that's produced? As opposed to whatever server-side script you're working with? — David Thomas
– David Thomas, Commented Oct 21, 2012 at 3:25
the actual html is <input id="userName" name="userName" title="Choose A Unique UserName" class="formData" type="text" value=""/> — devdar
– devdar, Commented Oct 21, 2012 at 3:27
I am trying to set the value in this field to null when i click on a reset button — devdar
– devdar, Commented Oct 21, 2012 at 3:27
"trying to set the value in this field to null" - To null? Or to an empty string? $(".formData").val("") should do it. — nnnnnn
– nnnnnn, Commented Oct 21, 2012 at 3:28

Chirag Jain · Accepted Answer · 2019-04-30 10:41:11Z

79

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>

edited Apr 30, 2019 at 10:41

Chirag Jain

1,3971 gold badge11 silver badges27 bronze badges

answered Oct 21, 2012 at 3:28

Maktouch

3,24723 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

devdar Over a year ago

This does not work its a Spring tag i am using so i am not sure if its different but it renders normal html so i am not sure whats the problem

MItrajyoti · Accepted Answer · 2015-02-20 09:52:58Z

6

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

answered Feb 20, 2015 at 9:52

MItrajyoti

5789 silver badges15 bronze badges

Comments

palerdot · Accepted Answer · 2012-10-21 04:27:11Z

1

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

answered Oct 21, 2012 at 4:27

palerdot

7,6625 gold badges45 silver badges47 bronze badges

2 Comments

devdar Over a year ago

So why is it my code isnt working i have this in the document.ready??

palerdot Over a year ago

u had ur initial setting to nowrap (head) . . .it works on domREADY ... i can't figure what is the problem with nowrap head setting

Flexo - Save the data dump · Accepted Answer · 2014-10-31 23:12:33Z

1

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

edited Oct 31, 2014 at 23:12

Flexo - Save the data dump♦

89.1k22 gold badges205 silver badges286 bronze badges

answered Sep 10, 2014 at 10:55

sanjay sonule

211 bronze badge

Comments

Stanislav Potapenko · Accepted Answer · 2016-07-14 14:53:45Z

1

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

answered Jul 14, 2016 at 14:53

Stanislav Potapenko

3974 silver badges7 bronze badges

Comments

Adrian Wragg · Accepted Answer · 2014-09-10 11:54:07Z

0

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

edited Sep 10, 2014 at 11:54

Adrian Wragg

7,4193 gold badges29 silver badges52 bronze badges

answered Sep 10, 2014 at 10:46

sanjay sonule

211 bronze badge

Comments

sanjay sonule · Accepted Answer · 2014-09-10 12:26:34Z

-5

Put your jQuery function in

$(document).ready(function(){

});

It's surely solved.

edited Sep 10, 2014 at 12:26

user1907906

answered Sep 10, 2014 at 11:12

sanjay sonule

211 bronze badge

1 Comment

Qantas 94 Heavy Over a year ago

Please edit your other answer instead of posting a new answer. Also take a look at the formatting help: stackoverflow.com/editing-help

Collectives™ on Stack Overflow

Jquery Setting Value of Input Field

7 Answers 7

1 Comment

Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related