Input[Type=Select] Doesn't Work for Me

input[type=select] doesn't work for me

There is no input[type=select]. You probably meant select, as in

.editor-field select
{
    margin-left: 250px;
}

Select tag doesn't display on my form

So I put the answer (from Samir) here as well as I guess some other people might come across that issue (it won't change your life, but it might save you some minutes that you want to spend on 'real' issues).

Check the styling! For some reason the select tag was defaulted to {display: none;}

QuerySelectorAll(input[type=select]) not working

Unless I misunderstand the question, you can probably get all the elements you want with one query: document.querySelectorAll("select,input"). Your issue comes from the fact that a select and input element are separate elements and your query selector looks only for input tags. If you want only select tags use document.querySelectorAll("select").

For more information about query selectors, you can read more about css selectors(that's how querySelectorAll works.)

HTML form readonly SELECT tag/input

You should keep the select element disabled but also add another hidden input with the same name and value.

If you reenable your SELECT, you should copy its value to the hidden input in an onchange event and disable (or remove) the hidden input.

Here is a demo:

$('#mainform').submit(function() {    $('#formdata_container').show();    $('#formdata').html($(this).serialize());    return false;});
$('#enableselect').click(function() {    $('#mainform input[name=animal]')        .attr("disabled", true);        $('#animal-select')        .attr('disabled', false)     .attr('name', 'animal');        $('#enableselect').hide();    return false;});

#formdata_container {    padding: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>    <form id="mainform">        <select id="animal-select" disabled="true">            <option value="cat" selected>Cat</option>            <option value="dog">Dog</option>            <option value="hamster">Hamster</option>        </select>        <input type="hidden" name="animal" value="cat"/>        <button id="enableselect">Enable</button>                <select name="color">            <option value="blue" selected>Blue</option>            <option value="green">Green</option>            <option value="red">Red</option>        </select>
        <input type="submit"/>    </form></div>
<div id="formdata_container" style="display:none">    <div>Submitted data:</div>    <div id="formdata">    </div></div>

HTML input file selection event not firing upon selecting the same file

Set the value of the input to null on each onclick event. This will reset the input's value and trigger the onchange event even if the same path is selected.

var input = document.getElementsByTagName('input')[0];

input.onclick = function () {
  this.value = null;
};
  
input.onchange = function () {
  console.log(this.value);
};

<input type="file" value="C:\fakepath">

HTML select form with option to enter custom value

HTML5 has a built-in combo box. You create a text input and a datalist. Then you add a list attribute to the input, with a value of the id of the datalist.

Update: As of March 2019 all major browsers (now including Safari 12.1 and iOS Safari 12.3) support datalist to the level needed for this functionality. See caniuse for detailed browser support.

It looks like this:

<input type="text" list="cars" /><datalist id="cars">  <option>Volvo</option>  <option>Saab</option>  <option>Mercedes</option>  <option>Audi</option></datalist>

Can't type in React input text field

You haven't properly cased your onchange prop in the input. It needs to be onChange in JSX.

<input
  type="text"
  value={this.props.searchString}
  ref="searchStringInput"
  onchange={this.handleChange} <--[should be onChange]
/>

The topic of passing a value prop to an <input>, and then somehow changing the value passed in response to user interaction using an onChange handler is pretty well-considered in the docs.

They refer to such inputs as Controlled Components, and refer to inputs that instead let the DOM natively handle the input's value and subsequent changes from the user as Uncontrolled Components.

Whenever you set the value prop of an input to some variable, you have a Controlled Component. This means you must change the value of the variable by some programmatic means or else the input will always hold that value and will never change, even when you type -- the native behaviour of the input, to update its value on typing, is overridden by React here.

So, you're correctly taking that variable from state, and have a handler to update the state all set up fine. The problem was because you have onchange and not the correct onChange the handler was never being called and so the value was never being updated when you type into the input. When you do use onChange the handler is called, the value is updated when you type, and you see your changes.

Javascript change input value when select option is selected

A few things:

You should use the onchange function, rather than onclick on each individual option.

Use a value attribute on each option to store the data, and use an instance of this to assign the change (or event.target)

You have no ID on your text field

You're missing the end quote for your onclick function

<select name="" onchange="myFunction(event)">
    <option disabled selected>Choose Database Type</option>
    <option value="Green">green</option>
    <option value="Red">red</option>
    <option value="Orange">orange</option>
    <option value="Black">black</option>
</select>

And the function:

function myFunction(e) {
    document.getElementById("myText").value = e.target.value
}

And add the ID

<input id="myText" type="text" value="colors">

Fiddle: https://jsfiddle.net/gasjv4hs/

Selecting all text in HTML text input when clicked

You can use the JavaScript .select() method for HTMLElement:

<label for="userid">User ID</label>
<input onClick="this.select();" value="Please enter the user ID" id="userid" />

Input[Type=Select] Doesn't Work for Me