Develop Reference

Reset particular input filed

I want to reset only a specific input field and display the placeholder on an event but not able to do, there are other methods such as initializing the input field with empty string but it do not display the placeholder as well as it is also a value which I don't want. I want to reset it with null value. How to do it?

it was quite easy, I got confused with empty value and spaces. You only have to do is give your input field some id, and create a button to click and reset the value. in the js, store the value in some variable and just initialize it with empty value when you click the button.
const input = document.getElementById("input-value");
const button = document.getElementById("btn");
button.addEventListener("click",()=>{
input.value = ""; //donot use this input.value=" ", use input.value=""
});

Get Text not Value of Dropdown (Select) input with React

Using react I can grab the value of the selected element via target.value
however in my current case I want both the value as its an ID of sorts and the face value of the option. How do I grab that with react? Is that plausible?
By face value I mean the Words in between <option value='123'> TEXT </option>
I want to be able to get the "TEXT"

I would just give this select box an id and grab this value using normal JavaScript function attached to your click handler or whatever function you want to execute within your React component.
// regular javascript way
var yourElement = document.getElementById(elementId);
if (yourElement.selectedIndex == -1)
return null;
return yourElement.options[yourElement.selectedIndex].text;

event.target gives you the HTMLSelectElement, from there you have access to a few other things such as HTMLSelectElement.selectedOptions.
From MDN:
HTMLSelectElement.selectedOptions (Read only)
Returns a live HTMLCollection containing the set of options that are selected.
So from there you can get the HTMLOptionElement and the text
Put it all together and you'll have something like this:
var selectedOption = e.target.selectedOptions[0];
console.log(selectedOption.value); // 123
console.log(selectedOption.text); // TEXT

Not editable,removable part of a textarea

I have a simple textarea and It has a default value. I want to hold this value everytime. User should not remove this value but he can add extra string.
<textarea>This is contstant</textarea>
As you see above. It has a default value. How can I protect this value? But user can add something after default value like below.
<textarea>This is contstant and extra things by user</textarea>
So how can do a partially editable textarea with default value?

You can attach an event handler to the <textarea> that does a simple validation every time it changes. If it tries to change to where your constant is partially destroyed, overwrite the X characters of the string value.
$('#foo').keydown(function () {
if ($(this).val().indexOf("This is constant. ") !== 0) {
var length = "This is constant. ".length;
var current = $(this).val();
var after = current.slice(length);
$(this).val("This is constant. " + after);
}
});
Here is a example on JSFiddle.
I recommend using JQuery for this because <textarea> doesn't actually have a value, or I think even a text attribute that you can check. JQuery just abstracts away <textarea>'s quirks.

I would go this way:
Style the textarea to remove the border.
Put a div on top which contains the constant text.
Wrap both elements in a div to give it a common border.
That way, the constant text will appear as if it was part of the textarea but it's not.
When you submit the form, prepend the static text to the field value.

proper way of adding value to dynamically made input text tag

for(i=0;i<formInfo['elementCount'];i++){
formElement = document.createElement('input');
formElement.type = 'text';
formElement.name = formInfo['elementName'][i];
formElement.setAttribute("value",formInfo['elementValue'][i]); // <-this part
console.log(formElement);
newForm.appendChild(formElement);
}
The above code does not work if I use:
formElement.value=formInfo['elementValue'][i];
console.log() returns <input type="text" name="abc"> (value attr is missing)
but it works if
formElement.setAttribute("value",formInfo['elementValue'][i]);
console.log() returns <input type="text" name="abc" value="123">
Why is the formElement.value method not working?
Checked this with both chrome and ff and both have the same results

Taken from: Properties and Attributes in HTML
The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code.
So if you want to know what's currently inside the text-box, read the property. If you, however, want to know what the initial value of the text-box was, read the attribute.

The HTML value attribute isn’t necessarily the value that is displayed on the page. It is known as the default value – used when the page is first loaded
You have to set the defaultValue.
Try:
var formElement = document.createElement('input');
formElement.type = 'text';
formElement.defaultValue = "test";
formElement.name="test2";
console.log(formElement);
DEMO

Get input value from HTML5 input[type="date"] in chrome

In chrome, a tag like
<input id="picker" type="date">
renders as a text field. However, calling trying to get its value with something like
$("#picker").val()
returns nothing until a valid date is entered or picked from it's dropdown.
I took a look at all of the object's immediate properties on a keypress with
$("#picker").keypress(function() {
var output = ""
for (var i in this) {
output += i +" value:"+ this[i] + "\n";
}
alert(output);
});​
but couldn't see my input in any of these. Check for yourself at http://jsfiddle.net/5cN2q/
My question is: Is it possible to get the text from a input[type="date"] in chrome when the input is not a valid date?

The W3C Date State spec defines the sanitization algorithm:
The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.
Which is invoked whenever setting the value of the input element, as defined in DOM input value spec:
On getting, it must return the current value of the element. On setting, it must set the element's value to the new value, set the
element's dirty value flag to true, invoke the value sanitization
algorithm, if the element's type attribute's current state defines
one, and then, if the element has a text entry cursor position, should
move the text entry cursor position to the end of the text field,
unselecting any selected text and resetting the selection direction to
none.
So the value property will always be an empty string when the date is not valid. There doesn't seem to be any property for "original/dirty/user-typed text value" specified as it is not a text input after all.
IMO it is a good thing, it facilitates form validation as invalid dates are treated as falsy values (empty strings), it also leaves browsers to more freely implement the UI for date inputs.
If you prefer a non-W3C date input, you can use a text input with the good old JS date validation and a datepicker, such as the jQuery UI datepicker. This would allow you to retrieve the actual text value of the input and is a much more cross-browser solution as well.

As the other answer you can't see the original value, you can however handle validation with ValidityState
<script type="text/javascript">
function submitform()
{
var inputdate = document.getElementById("inputdate")
// check if date is valid.
// you can use `inputdate.validity.valid` too.
if(inputdate.validity.badInput) {
// error message from the browser
document.getElementById("message").innerHTML = inputdate.validationMessage
}
//document.myform.submit();
}
</script>
<div>message: </div><div id="message" style="color: red; font-weight:bold;"></div>
<form method=post action="./post">
<input type="date" id="inputdate" value="2016-02-29">
get date!
</form>
If you change the day to 30 and click the link, you'll see an error message.
Enjoy it.