the following is my HTML DOM element...
<input type="text" style="width: 200px;" id="input1"/>
I want to keep the date value in it..But somewhere i need to specify that it is going to hold date value in the Dom element..
How can i do so..Please suggest me
JQuery is returning the runtime type of the input element from the DOM. Since "date" isn't a valid type for a form input, it is returning the default value : "text".
These are the valid input types:
* "text"
* "password"
* "checkbox"
* "radio"
* "submit"
* "reset"
If you try the same code snippet with one of the above instead of "date", it works fine.
Looks like you are trying to hide data inside the control.
An easier way would be to assign a css class to the element.
and jquery has lots of methods for retrieving the class names out of an element.
Or you could go with the html 5 standard for adding data like this:
<input id='ctrl' type='text' data-attr='date' />
Then you can retrieve the attribute value like this:
var value = $("#ctrl").attr("data-attr");
According to w3c standard there are no input controls with "date" type. Check it on W3C Forms in HTML documents
What does it display instead?
It could be that date is a non standard form type. I think it is coming in HTML 5, but currently it is not supported.
Could you accidentally have 2 elements with that Id ? That code looks like it should work.
Try this
$("#input1").css( {border: '1px solid red'} );
To ensure it is matching the right element. If the correct element doesn't gain a red border, then your selector is probably incorrect.
Related
I need to append 'kg' string in my ngModel type number?
How to do it?
<input (click)="singleClickForTraining(set)"
[ngClass]="{ currentExe : currentSet === set }"
[(ngModel)]="set.reps" class="input-invisible-for-sets" type="number">
Your input control is of "type" number. meaning it only accepts numeric values eg. 01234... etc.
to have your input control accept alpha-numeric(text and number) values you need to change the type to text. You should only consider doing this if 'kg' is part of the value of the input and not a description of what the value of the input is.
if the meaning or the context of your input control is a number or an entity that represents a number-value then you should always keep the type as a number and not text.
this protects you or other pieces of code and/or other developers using that field, such that they don't need to do any string manipulation to acquire/use the value of the input, considering there might be a need to sum the input in a calculation. eg. [100kg - 20kg] is incorrect and will fail.
if 'kg' is a description of the input then consider putting it in the label control to tell the user what exactly the input is for. eg. "Please enter your weight in 'kg'"... you can take this further and add a placeholder to the input
eg. <input type='number' placeholder='eg. 100kg' />"
you can even be fancy and use a :before or :after pseudo class on the input wrapper and give the content property a value of 'kg' and then style it appropriately to overlap onto the input.
this is inline with best practices from a ui/ux perspective as well as a back-end consideration.
theres many ways to put the 'kg' in there but lets create good code...
UPDATE:
I dont unserstand why you dont want to use a pseudo class, theres still many way it can be done. also have you considered using a range element.
check out this fiddle
You need to quote the string 'kg' in ngModel or it will be evaluated as another scope variable.
<input [(ngModel)]="'kg' + set.reps" type="number">
or if type="number" is not necessary then you can do something like this as well:
<input type="text" pattern="[0-9]" [(ngModel)]="'kg' + set.reps" />
Hope it helps, if not feel free to ask further questions
I have following dynamically created form inputs:
<input class='dr-currency-rate form-control' type='text' name='dr_entry[][dr_rate]' id='dr_entry[][dr_rate]'>
What I'm trying to do is get the value from each input field with javascript fro rate calculation.
Following is not working:
.find("input[name^='dr_entry[][dr_rate]']").val();
Alternatively you can find it in document as below, since its a dynamic element:
$(document).find("input[name^='dr_entry[][dr_rate]']").val();
If the ids are generated with the same value as the name attribute, it's much faster to look up an element by id than to perform a find on an attribute value.
$('#dr_entry[][dr_rate]').val();
I am using localStorage where in I am able to store in previous page and retrive it in this page. (Checked it using alert).
name12=localStorage.getItem("content");
Now my requirement is to display it into the input field and make it non-editable.
Please help me out with it. I have tried different things but I am not able to get it right.
Used onblur="localStorage.setItem(this.name, this.value) in the input tag
and also tried to use
if name_2.value = name12; in script tag
To make a field uneditable, you can use the html attribute disabled on the input field. http://www.w3schools.com/tags/att_input_disabled.asp
To set a default value for a field, you can use the html attribute value. In your case since the value is dynamic, you probably want do not want to do that inline in the html. One possible solution is to set the value attribute through javascript like below.
<script type="text/javascript">
var name2 = document.getElementById("name_2");
name2.value = localStorage.getItem("content");;
</script>
Set the value of an input field
You have to assign the value to input using javascript.
<input username" id="name_2" type="text" placeholder="name" name="name_2" required="required" autofocus="autofocus">
<script>
var n = "5"; // read from storage here
var inpt = document.getElementById("name_2");
inpt.value = n;
inpt.disabled = true;
</script>
There are many places to find this information. Try reading the jquery documentation when you get stuck. For example, here is a page that describes how to set the value of an input element. StackOverflow also has many questions about this topic. A quick google search brings up this question about setting the value of input elements. We can also find SO questions about disabling input elements easily, like this one.
I encourage that you attempt to use more resources to find what you need before bringing your questions here.
Based on the answers to the questions I linked, we can set the input and then disable it to keep the value from changing:
$('#input').val(name12);
$('#input').prop('disabled', true);
I'm very new to jQuery and have been stumped by particular issue. I am dynamically adding 2 checkbox fields to a screen form using the code below:
var summon_search = "<br><br><br><label for='summon_search'>Search this resource from compatible products*</label><input type='checkbox' id='summon_search' >";
var summon_link = "<br><br><label for='summon_link'>Link direct from content items in compatible products*</label><input type='checkbox' name='summon_link'>";
$(summon_search+summon_link).insertAfter("#jstor_selection");
However I have had limited success when I want to remove these fields AND labels (which is dependant on another value) and replace them with new fields. The code below shows my best attempt so far. It does appear to remove the labels and first field, but for some reason the last field remains. Could someone please advise if they can spot anything I've done wrong, or perhaps supply a better example of handling this ?
if ($("#summon_search").length > 0 ) {
//Removal of Label and Field (Attempted)
$("label[for=summon_search]").remove();
$("label[for=summon_link]").remove();
$("#summon_search").remove();
$("#summon_link").remove();
Any feedback much appreciated.
Change name='summon_link' to id='summon_link', because #summon_link expects an id.
if you see your code the summon_link variable give it a id instead of name like in the summon_search variable
name=summon_link change it to id='summon_link'
if your intention is to add these HTML string after object with Id 'jstor_selection', you can use like this
$("#jstor_selection").append(summon_search+summon_link);
you should give the for= value in quotes.
EDIT: to remove extra <br>, normally it is suggested not to use <br>
$("label[for='summon_search']").prev('br').remove()
$("label[for='summon_link']").prev('br').remove()
$("label[for='summon_search']").remove();
$("label[for='summon_link']").remove();
also in the suman_link input element you have given as name
<input type='checkbox' name='summon_link'>
either change this to
<input type='checkbox' id='summon_link'/>
or
$("#summon_link").remove();
to
$("input[name='summon_link']").remove();
Assume you have input element:
<input id="aaa" type="text" value="unchanged" />
Then launch js script:
var e = document.getElementById("aaa");
e.value = "changed";
alert(e.defaultValue + "/" + e.value);
Result will be "unchanged/changed". Unfortunately, when your input element is hidden:
<input id="aaa" type="hidden" value="unchanged" />
...the same js script seem not to be working any more. Result is "changed/changed".
Is this a proper way? If so, why only hidden form elements act different?
The "defaultValue" property is only maintained in a way you apparently expect for "text", "file", and "password" fields.
Here is the relevant portion of the DOM spec.
I suspect the reason for this is that user activity on its own cannot change the value of hidden elements. If you want to preserve the initial values, run something at "load" or "ready" to stash the value somewhere.
For hidden input elements, defaultValue isn't actually implemented. The reason why you get the same result ast .value is because the browser your using is just defaulting.
See here for a discussion of this with Firefox.