score:0
this is the key in your question,
but for some reason react.js is not updating this value on its core
the main reason is that react works within a 'shadow dom', and your
document.getelementbyid("cntctfrm2emailfield").value = "testing@gmail.com";
inst updating the reacts value in any way just the window dom object.
react has built in functions to update the value of the input. try that way.
check this page for more info about react forms: https://facebook.github.io/react/docs/forms.html#controlled-components
score:0
if the input is not in a html form, then you should do it this way:
document.getelementbyid("cntctfrm2emailfield")[0].value = "testing@gmail.com";
this should work
score:0
<button onclick={ async () => {
await setshowmodal(true);
document.getelementbyid('name').value = e.location_name;
document.getelementbyid('province_id').value = e.province_id;
document.getelementbyid('id').value = e.id;
}}
classname="btn-round" color="success" type="button">
edit
</button>
score:1
first of all, you should never ever work with "document" object in react.js. it is a big no no. you should not access dom element neither, but if you know what you are doing(like animations) you should create "ref" object, which is off the topic, to access dom element.
first thing you should have an object inside the state object for your form. lets say you have "username" and "password" fields in your form.
state={form:{username:"","password:""}
because input fields have their own state, whatever we type in there will be stored in the input field. we should get rid of the state of input field and only rely on the state object. we want to have single source of truth so convert "input" to “controlled element”. controlled elements do not have their own state, they get all data, via props and they notify changes to the data by raising events. we are using "value" prop to set inputs value. since input fields are initialized as empty strings, we will not be able to type something inside input field. solution is we have to handle the change event for input fields dynamically.
handlechange=e=>{
const form={...this.state.form}
form[e.currenttarget.name]=e.currenttarget.value
this.setstate({account})}
<input value={this.state.form.username} change={this.handlechange} name="username"/>
<input value={this.state.form.password} change={this.handlechange} name="password" />
score:3
i had a form that i needed to submit for some monitoring. i did it like this:
$("input[type=email]").value = "me@something.com"
$("input[type=email]").defaultvalue = "me@something.com"
$("input[type=password]").value = "mystellarpassword"
$("input[type=password]").defaultvalue = "pinpmystellarpasswordss"
$("input[type=email]").dispatchevent(new event('input', {target: $("input[type=email]"), bubbles: true} ));
$("input[type=password]").dispatchevent(new event('input', {target: $("input[type=password]"), bubbles: true} ));
$("button.login").click()
note that for the website i was logging into, i had to set both value and defaultvalue. there was some extra validation logic bound to the input.value
score:10
you should post your code in order to get a better/ more to your situation suited answer, but one think that will work is just setting the
defaultvalue
instead of value
of the input. take a look at your browsers console, that's what react will log there.
depending on your code, you can set the states
value
onkeyup
or similar with a function or fetch the new inputs value when the form is submitted.
score:16
i have written and use this function to trigger the change state for the field:
function doevent( obj, event ) {
/* created by david@refoua.me */
var event = new event( event, {target: obj, bubbles: true} );
return obj ? obj.dispatchevent(event) : false;
}
use it like this:
var el = document.getelementbyid("cntctfrm2emailfield");
el.value = "testing@gmail.com";
doevent( el, 'input' );
score:34
for react 16, use following code. check this issue.
function setnativevalue(element, value) {
let lastvalue = element.value;
element.value = value;
let event = new event("input", { target: element, bubbles: true });
// react 15
event.simulated = true;
// react 16
let tracker = element._valuetracker;
if (tracker) {
tracker.setvalue(lastvalue);
}
element.dispatchevent(event);
}
var input = document.getelementbyid("id of element");
setnativevalue(input, "value you want to set");
Source: stackoverflow.com
Related Query
- React - setting input value with JavaScript does not trigger 'onChange'
- Working with react input field says synthetic even when i try and save, and setting value instead of defaultValue is rendering [Object, object]
- cant reset input after setting value attribute in react js
- after setting the input field value to a state object with an empty value, now I can't type anything in the input field in the UI. i am using react js
- Not able to change value of input field after setting the initial value manually in react
- React - setting input prop from defaultValue to value triggers infinite loop
- Why can't I change my input value in React even with the onChange listener
- Why can't I change my input value in React even with the onChange listener
- React + Redux - Input onChange is very slow when typing in when the input have a value from the state
- React - clearing an input value after form submit
- React Input Element : Value vs Default Value
- React - useState not setting initial value
- Updating a React Input text field with the value on onBlur event
- Test setting text value with React and Enzyme
- React.js setting value of input
- Set React Input Field Value from JavaScript or JQuery
- DefaultValues of react-hook-form is not setting the values to the Input fields in React JS
- React autoFocus sets cursor to beginning of input value
- semantic ui react Setting dropdown value to state
- Send cursor to the end of input value in React
- how to hold file input value in react
- React change input value onChange
- Focus next input once reaching maxlength value in react without jQuery and accept only numeric values
- How to reload input value in React / Javascript with Virtual DOM?
- Trigger change events when the value of an input changed programmatically React
- Trying to get a React controlled input to have a default value
- Setting the default value inside the input field in the antd library after calling the function in useEffect
- Setting a default value on a react select dropdown that is populated from an API call
- React ref using reactstrap Input Module doesn't have Value prop
- Auto-scaling input to width of value in React
More Query from same tag
- Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'get')
- Uncaught Error: Objects are not valid as a React child (found: object with keys {message})
- React-Router: How to test href of a rendered Link?
- How to use axios in a separated class
- the logout component not rendering after the authenticated is turned to true this is similar code as from react-router docs
- change a string into a list of select in react
- Problem updating parent state from child component in React
- How to position useTransition sidebar to the extreme right
- Null check for mapping an array in react
- Array Shape Error
- react-preloader-icon with redux
- How context API with components made by map function
- Removing element from table - react
- cannot link image in HTML/CSS/REACT stored locally on computer
- Buttons are displayed before the api loads inside the table and loader not working
- Using .map() with useEffect and Api
- Trying to add 'liking' functionality using hooks, but all the photo get liked at the same time
- Serve images using express or send binary data to client
- How to start react app on custom port with CRACO?
- Position Tooltip div with variable height above span (React)
- Javascript .map(...) with React Component
- How to toggle elements with a button press in React?
- React-router history.listen not running in componentWillMount
- JavaScript ecma 6 bulk import
- Trigerring Axios calls after a day/week/month
- Using JSON returned from an API to populate a variable used by a React-Table table component
- React MDBTable render each item in table
- merge array object within array based on same id
- How to use CSS Modules with webpack in React isomorphic app?
- The prop `store.subscribe` is marked as required