Want to set default value of Input field via JavaScript

Question

I am making a form and making input field to read only using JavaScript. I change the default color for read only attribute. I want to display a default value when the field is readonly i-e "NIL"

HTML

<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

JS

$("input[name='sex']").change(function() {
if($(this).val() == "female") {
    $("#age,#phone").attr("disabled", true).css("background-color","#0F0");
} else if($(this).val() == "male") {
    $("#age,#phone").attr("disabled", false).css("background-color","#FFF");;
}
});

I want add the default value "Nil" if the field is readonly. Kindly guide me how to add this property to my script.

@Ashish You should stop asking people to see your answers.. what else do you think they are doing here except seeing answers?! — Lipis
– Lipis, Commented Oct 16, 2014 at 9:00
@Lipis Thanks for your valuable comment. I take a note of it. — Ashish
– Ashish, Commented Oct 16, 2014 at 9:03
The title of the question is about setting default value, its text refers to setting color for readonly elements, but the code included has no such elements and no attempt at setting content color, only background color. Please edit your question to be consistent and clear. — Jukka K. Korpela
– Jukka K. Korpela, Commented Oct 16, 2014 at 11:23

James Donnelly · Accepted Answer · 2014-10-16 08:50:34Z

4

To give all elements with a readonly attribute a value of "Nil", you can use the [readonly] attribute selector like this:

$('[readonly]').val('Nil');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" readonly />
<input type="text" />

You may want to first ensure that your element's value is empty before doing this. To do that, you'd introduce a filter() like this:

$('[readonly]').filter(function() {
  return this.value == ""
}).val('Nil');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" readonly />
<input type="text" value="Has a value" readonly />
<input type="text" />

answered Oct 16, 2014 at 8:50

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

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

Comments

Ashish · Accepted Answer · 2014-10-16 08:52:10Z

-1

$("input[name='sex']").change(function() {
if($(this).val() == "female") {
     $("#age,#phone").val('Nil');
    $("#age,#phone").attr("disabled", true).css("background-color","#0F0");

} else if($(this).val() == "male") {
    $("#age,#phone").val('');
    $("#age,#phone").attr("disabled", false).css("background-color","#FFF");
}
});

Working Fiddle - http://jsfiddle.net/Ashish_developer/hpee0w0d/

answered Oct 16, 2014 at 8:52

Ashish

7434 silver badges9 bronze badges

6 Comments

Lipis Over a year ago

I think we should stop using JSFiddle links.. blog.stackoverflow.com/2014/09/…

James Donnelly Over a year ago

@MuhammadRizwan based on the code provided in your question, #age and #phone aren't readonly. This answer does not answer the question you've asked.

Ashish Over a year ago

@JamesDonnelly In the code provided in question 'disable' attribute is used, so in my answer. I believe the objective as it is evident from question was to set a default value 'Nil' to #age and #phone fields that change into not-editable fields once radio button (that holds the value 'female') is clicked. Non-editable fields are read-only. 'read-only' and 'disabled' are used to make fields non-editable.

Ashish Over a year ago

@JamesDonnelly Difference between 'readonly' and 'disabled' attributes is - elements with 'readonly' attribute can receive focus, and are sent on submit whereas 'disabled' element can't receive focus and can not be sent on submit. My answer corresponds to the code given in the question.

James Donnelly Over a year ago

@Ashish readonly and disabled are completely different attributes, so my point still stands. You've answered what the user wanted, but you've not answered the question given.

|

Collectives™ on Stack Overflow

Want to set default value of Input field via JavaScript

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related