Set value attribute in HTML - javascript

I am trying to set value attribute in HTML when it gets changed.
I need this because I export HTML code for importing it later.
I tried the following code:
<input onchange="this.value = value" />
And would like to have the following code so value gets auto-filled after import:
<input onchange="this.value = value" value="some-value" />
There is lots of lines like above but whatever I tried value just doesn't get set.

If you want the attribute to update, you got to set the attribute.
<input onchange="this.setAttribute('value', value)" />

Alternatively, you can add this JavaScript code and omit the onchange HTML attribute:
document.addEventListener("input", e => e.target.setAttribute('value', e.target.value));
<input>
Notes:
the input event triggers with every change, not just when the value is "entered".
this works for all input elements on the page, including textarea and select elements.

Related

How i can pass value vue to hidden textbox

i need to pass value from vue to textbox, doing for one day but still didn't work.
my html input type code
<input type="hidden" id="variation" name="variation" v-model="variation">
second is my is my value is appear on paragraph
<p name fs="paragraph" fw="semi-bold" color="dark">{{ getVariantTitle(variant) }}</p>
its works for passing value to paragraph but not working for passing value into hidden html textbox. i really need value for passing into form post.
As the input type is hidden, instead of v-model just try using v-bind:value, as you don't need two way binding for a hidden input
I am sure there is better way to achieve what you're trying to do but for a quick fix you can try using v-bind instead of v-model
<input type="hidden" id="variation" name="variation" v-bind:value="variation">
This means the hidden text field will always have the same value as this.variation
EDIT:
<input type="hidden" id="variation" name="variation" :value="getVariantTitle(variant)">

How to include form field attributes based on state in React?

I am trying to make an accessible form in React and I need to toggle the attribute aria-describedby based on the state of the field (i.e., if it has an error associated with it).
I know how to toggle the value of the attribute, but with regards to WCAG, a present but empty attribute of this type will fail. The entire attribute needs to be fully present or fully absent. Anything I try in-line throws errors and breaks the render.
To give an example, this is what I've been trying:
<label>
<input type="text" name="someName" ref="someRef" {!this.state.isValid ? aria-describedby="helperText" : ''} required />
<p id="helperText">Helper text for this form field.</p>
</label>
Again though, an empty attribute value for aria-describedby is invalid.
Is there any way to acheive this?
Just spread it like this:
<input type="text"
name="someName"
ref="someRef"
{... !this.state.isValid && {'aria-describedby': 'helperText'} }
required />
This is basically spread operator usage.

File input JS onchange, onclick not firing

I am trying to populate an input, of type text, with the the file name that has been selected. From what I have read sometimes you have to set the value to "" or null onClick then onchange set the place holder.
I have tried many different variations, but it just doesn't seem to fire. What am I overlooking?
My very basic example....
<script type="text/javascript">
getElementById("upFile").onClick = function(){
this.value = "";
}
getElementById("upFile").onchange = function(){
getElementById("uploadName").value = this.value;
}
</script>
<input type="text" name="uploadName" id="uploadName" placeholder="Attachment Title">
<input type="file" id="upFile" name="upFile" enctype="multipart/form-data"><br>
What I have read
Changing the placeholder text based on the users choice
Change placeholder text
Upload files using input type="file" field with .change() event not always firing in IE and Chrome
HTML input file selection event not firing upon selecting the same file
None of which seem to be my issue...
Here you go. You can get rid of the onclick event listener, and watch for changes instead. The file upload element creates an array of files and you can access it like so:
<input type="text" name="uploadName" id="uploadName" placeholder="Attachment Title">
<input type="file" id="upFile" name="upFile" enctype="multipart/form-data">
<script>
document.getElementById("upFile").onchange = function(){
// single file selection, get the first file in the array
document.getElementById("uploadName").value = this.files[0].name;
}
</script>
FYI:
This is what happens if the script tag is before the element. It runs the script once read and says it can't find the element referenced with document.getElementById("upFile")
Uncaught TypeError: Cannot set property 'onchange' of null
at :2:48
You are missing document.getElementById and onClick should be onclick

Setting a hidden field and accessing it in MVC4

I have the need to create a hidden field in of my table. Later upon button click, i need to retrieve the data saved in the hidden field. Below is the code:
<td>
<input id="hdnr<%=RowNumber%>c<%=ColumnNumber%>" type="hidden" value="{{Html.HiddenFor(model => item.Key)}}" />
</td>
Where rownumber and colnumber are variables.
Later in jquery, upon button click, I am attempting to retrieve the value of the hidden field as per the code below:
var value = $('#hdnr'+i+'c'+j).val();
alert(value);
Somewhere something is wrong. Either the value is not getting saved in the html tag or it is not being retrieved correctly.
Please help.
Thanks in advance.
Your value in the input is not correct. You can put the value directly from the model.
<input id="hdnr<%=RowNumber%>c<%=ColumnNumber%>" type="hidden" value="<% model.Key %>" />
if you want to use the helper, but in this case the id will be generated automatically. :
Html.HiddenFor(model => item.Key)
You can still add custom attribute. I'm not sure of the syntax :
Html.HiddenFor(model => item.Key, { #class = "myClass" })

JQuery attribute (empty) value selector, not working

The elements & the code.
HTML
<input value="" name="data[Filter][address]" type="text" />
<input value="" name="data[Filter][client]" type="text" />
<input value="" name="data[Filter][tenant]" type="text" />
<input value="" name="data[Filter][contract_end_date]" type="text" />
Javascript
console.log($("[name*='data\\[Filter\\]'][value!='']").serialize());
The problem: even if they are all empty, they are serialized.
Why?
You're looking at the value attribute. You can filter off of the value property instead:
http://jsfiddle.net/Y2P6w/
var $filledElems = $("[name*='data\\[Filter\\]']").filter(function () {
return $.trim(this.value).length;
});
The point is when the input tag gets inserted to the page, no matter it is in the page load or in your dynamic JavaScript codes, if it has the value attribute your selector query would use it or if you change your input's value using setAttribute in JavaScript or .attr() in jQuery, their value attribute actually gets changed, but if you change it with .value in JavaScript or .val() in jQuery or simply change the value in the page as a textbox, the attribute won't change, so you better not use value attributes in your selectors, because they are not reliable, an instead use $("[name*='data\\[Filter\\]']") and filter it as #JasonP has pointed out.

Categories