I am pretty sure that there is a way to do this with onChange, but in the example: http://redux-form.com/6.0.0-alpha.4/examples/simple/ here provided by redux form when you click the drop down and hit a value it automatically submits the value without having to hit submit.
I copied the exact code and everything works except for the fact that I have to choose all the values I want then hit submit. How do we make it to where we can just start typing in a field or select a value and it automatically get submitted as they have.
I will put the code below incase you do not want to visit the link.
import React from 'react'
import { Field, reduxForm } from 'redux-form'
const { DOM: { input, select, textarea } } = React
const SimpleForm = (props) => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
<Field name="firstName" component={input} type="text" placeholder="First Name"/>
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field name="lastName" component={input} type="text" placeholder="Last Name"/>
</div>
</div>
<div>
<label>Email</label>
<div>
<Field name="email" component={input} type="email" placeholder="Email"/>
</div>
</div>
<div>
<label>Sex</label>
<div>
<label><Field name="sex" component={input} type="radio" value="male"/> Male</label>
<label><Field name="sex" component={input} type="radio" value="female"/> Female</label>
</div>
</div>
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component={select}>
<option></option>
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
</div>
<div>
<label htmlFor="employed">Employed</label>
<div>
<Field name="employed" id="employed" component={input} type="checkbox"/>
</div>
</div>
<div>
<label>Notes</label>
<div>
<Field name="notes" component={textarea}/>
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
)
}
export default reduxForm({
form: 'simple' // a unique identifier for this form
})(SimpleForm)
Related
My registration script has 2 hidden input fields that change to two set variables based on the user input. The form button is disabled by default. My issue is getting the button to be enabled once the two hidden input fields match the set variable.
<form id="register_form" autocomplete="off" method="post" action="">
<h1>Register</h1>
<div id="error_msg"></div>
<div id="pass"><span id='user'></span></div>
<div id="pass"><span id='message'></span></div>
<div id="pass"><span id='message2'></span></div>
<div>
<input type="text" name="username" placeholder="Username" id="username" autocomplete="off" required>
</div>
<div>
<input type="email" name="email" placeholder="Email" id="email" autocomplete="off" required>
</div>
<div class="radio">
<input type="radio" name="opt" value="Yes" checked> Receive Emails for Promotions and Newsletters
<br>
<input type="radio" name="opt" value="No"> Don't Receive Emails for Promotions and Newsletters
</div>
<div>
<input type="password" name="new_password" placeholder="Enter Password" id="new_password" autocomplete="off" required>
</div>
<div>
<input type="password" name="new_password2" id="new_password2" placeholder="Confirm Password" autocomplete="off" required>
</div>
<div>
<input type="text" name="user-response" id="user-response">
</div>
<div>
<input type="text" name="pass-response" id="pass-response">
</div>
<div>
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
</div>
<div>
<button type="submit" id="reg_btn" class="button" name="register" disabled="disabled">Register Account</button>
</div>
</form>
$(function(){
var user = $('#user-response').val();
var pass = $('#pass-response').val();
if(user === 'available' && pass === 'match'){
$("#reg_btn").prop("disabled", false);
} else {
$("#reg_btn").prop("disabled", true);
}
});
When a user enters a username that doesn't exist the 1st "hidden" input field will display available. When a user enters a matching password that meets the requirements it displays match. When those two fields say available and match the button should switch to enabled but it remains disabled.
I want to show form when click on radio button using redux-from, here is i following tutorial link, (implements using checkbox)
selectingformvalues but i cant implement it on radio button,
i have 2 radio button
radio button x click, shows a form
radio button y click, shows b form and hide a form
<label htmlFor="hasEmail">percentage</label>
<div>
<Field
name="taxtype"
component="input"
type="radio"
value="percentage"
/>
</div>
</div>
<div>
<label htmlFor="hasEmail">usd</label>
<div>
<Field
name="taxtype"
component="input"
type="radio"
value="usd"
/>
</div>
</div>
{usd && (
<div>
<label>Email</label>
<div>
<Field
name="email"
component="input"
type="email"
placeholder="Email"
/>
</div>
</div>
)}
{percentage && (
<div>
<label>Email 2</label>
<div>
<Field
name="email"
component="input"
type="email"
placeholder="Email"
/>
</div>
</div>
)}
const percentage = selector(state, 'percentage')
const usd = selector(state, 'usd')
Here is the example you referred you rewritten to include two radios
https://codesandbox.io/s/koz449qo6o
How to make associated labels for form elements in below code?
render() {
return (
<section className="col">
<div className="input-group">
<input type="text"
id="search-input"
ref="searchInput"
className="form-control"
placeholder="Filter location..."
onChange={this.handleChange} />
<span className="input-group-addon">Filter</span>
</div>
</section>
)
}
Use below.
<section className="col">
<div className="input-group">
<label for="search-input">Filter</label>
<input type="text"
id="search-input"
ref="searchInput"
className="form-control"
placeholder="Filter location..."
onChange={this.handleChange} />
</div>
</section>
Create label and give input elements id to label's for attribute
Below is the snapshopt of the form which i am rendering, everything works fine except that i am not able to make form fields compulsory.I am rendering this form by means of react component.
Code:-
return <div className="panel alignment div-background" id="new-trade-form">
{this.props.store.newTradeRender}
<div className="panel panel-default">
<div className="panel-heading center-align" ><strong>New Trade</strong></div>
</div>
<div className="panel-body">
<fieldset>
<form name="myForm" id="newForm" ref="newForm" data-toggle="validator" >
Trade Date:
<div className='input-group date'>
<input type='date' className="form-control" id="date" required />
<span className="input-group-addon">
<span className="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br />
<div className="form-group">
Commodity:
<select className="form-control" id="commodity" ref="commodity" required>
<option disabled selected value=""> -- select a commodity -- </option>
{commodity}
</select>
</div>
Side:
<input type="radio" id="side" name="side" value="BUY" ref="side" />Buy
<input type="radio" id="side" name="side" value="SELL" ref="side" />Sell
<br />
<br />
<div className="form-group">
Counterparty:
<select className="form-control" id="counterparty" ref="counterparty" required>
<option disabled selected value=""> -- select a counter party -- </option>
{counterParty}
</select>
</div>
<br />
<div className="form-group">
Price($):<input id="price" name="price" type="number" step="any" className="form-control" ref="price" required />
</div>
<br />
<div className="form-group">
Quantity(MT):<input id="qty" name="qty" type="number" step="any" className="form-control" ref="qty" required />
</div>
<br />
<div className="form-group">
Location:
<select className="form-control" id="location" ref="location" required>
<option disabled selected value=""> -- select a location -- </option>
{location}
</select>
</div>
<br />
<button type='submit' className="btn btn-css btn-size" onClick={this.onSave} >SAVE</button>
</form>
</fieldset>
</div>
</div>
Note i am not getting any errors and everything works fine.
Below is the snapshot of the form:-
Try moving the handler from the button to the 's onSubmit:
<form name="myForm" id="newForm" onSubmit={this.onSave} data-toggle="validator" >
<input type='date' className="form-control" id="date" required />
<button type='submit'>SAVE</button>
</form>
remove onclick() and use submit only
#Shivendra Gupta, I have removed form tag and using refs object and assigning formRefs object when the user clicks save button a loop will run for formRefs objects and if the objects value is empty then you can show the particular filed is required. For reference I am logging the message. Hope that helps.
class Form extends Component {
constructor(props) {
super(props);
this.formRefs = {};
}
onSave = () => {
for(let key in this.formRefs) {
console.log(this.formRefs[key].value);
if(!this.formRefs[key].value) {
console.log(this.formRefs[key].getAttribute('id'), ' is required!');
}
}
}
onCancel = () => {
console.log('onCancel');
}
render() {
return (
<div className="panel alignment div-background" id="new-trade-form">
<div className="panel panel-default">
<div className="panel-heading" ><strong>Trade id: 0001 </strong></div>
</div>
<div className="panel-body">
<fieldset>
<div>
Trade Date:
<div className='input-group date'>
<input type='date' className="form-control" id="date" ref={(input) => {this.formRefs.date = input}} />
<span className="input-group-addon">
<span className="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br />
<div className="form-group">
Commodity:
<select className="form-control" id="commodity" ref={(input) => {this.formRefs.commodity = input}}>
<option selected value=""> -- select a commodity -- </option>
</select>
</div>
Side:
<input type="radio" id="side" name="side" value="BUY" ref={(input) => {this.formRefs.side = input}} />Buy
<input type="radio" id="side" name="side" value="SELL" ref={(input) => {this.formRefs.side = input}} />Sell
<br />
<br />
<div className="form-group">
Counterparty:
<select className="form-control" id="counterparty" ref={(input) => {this.formRefs.counterparty = input}} >
<option disabled selected value=""> -- select a counter party -- </option>
</select>
</div>
<br />
<div className="form-group">
Price($):<input id="price" name="price" type="number" step="any" className="form-control"
ref={(input) => {this.formRefs.price = input}} />
</div>
<br />
<div className="form-group">
Quantity(MT):<input id="qty" name="qty" type="number" step="any" className="form-control"
ref={(input) => {this.formRefs.qty = input}} />
</div>
<br />
<div className="form-group">
Location:
<select className="form-control" id="location" ref={(input) => {this.formRefs.location = input}}>
<option disabled selected value="">-- select a location -- </option>
</select>
</div>
<br />
<button className="btn btn-css btn-size btn-spacing" onClick={this.onSave} >SAVE </button>
<button className="btn btn-css btn-size btn-spacing" onClick={this.onCancel} >CANCEL </button>
</div>
</fieldset>
</div>
</div>
)
}
}
I am working on my React project. I have a question on how to capture entire form object when user submit all the inputs information. For example, in Node.js Mongoose, req.body returns entire object.
How can I get the entire form submit object in react? Thanks.
This is my form code in React:
return (
<div>
<ol>
{listItems}
<div style={styles.input}>
<form>
<input onChange={this.updateUsername.bind(this)} id='image' className='form-control' type='text' placeholder='image'/><br />
<input onChange={this.updateUsername.bind(this)} className='form-control' type='text' placeholder='Username'/><br />
<input className='form-control' type='text' placeholder='Age'/><br />
<input className='form-control' type='text' placeholder='Gender'/><br />
<input className='form-control' type='text' placeholder='Activity'/><br />
<input className='form-control' type='text' placeholder='Location'/><br />
<input className='form-control' type='text' placeholder='ZipCode'/><br />
<button onClick={this.submitComment.bind(this)} className='btn btn-primary'>Submit Activity</button>
</form>
</div>
</ol>
</div>
)
function wr(e,v){e.innerHTML=v;}
wr(document.body,"
<div>
<ol>
{listItems}
<div style={styles.input}>
<form>
<input onChange={this.updateUsername.bind(this)} id='image' className='form-control' type='text' placeholder='image'/><br />
<input onChange={this.updateUsername.bind(this)} className='form-control' type='text' placeholder='Username'/><br />
<input className='form-control' type='text' placeholder='Age'/><br />
<input className='form-control' type='text' placeholder='Gender'/><br />
<input className='form-control' type='text' placeholder='Activity'/><br />
<input className='form-control' type='text' placeholder='Location'/><br />
<input className='form-control' type='text' placeholder='ZipCode'/><br />
<button onClick={this.submitComment.bind(this)} className='btn btn-primary'>Submit Activity</button>
</form>
</div>
</ol>
</div>
");
I suggest referring to this question when working with forms in React.
However, to your actual question, I don't think there is a way to receive the entire object from the form. What you should do, is set the state of each input field's value, and use the state in the submit function.
We can use onSubmit to get the "form submit object". .target of the event references to the form, and input elements can be found in form.elements.
function submitData(form) {
return [].slice.call(form.elements).reduce((data, {name, value}) => {
if (name) data[name] = value
return data
}, {})
}
class App extends React.Component {
handleSubmit(event) {
event.preventDefault()
this.setState(submitData(event.target))
}
render() {
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<input name="username" placeholder="Username" />
<input name="age" placeholder="Age" />
<button type="submit">Submit</button>
<pre>{JSON.stringify(this.state || {}, null, 2)}</pre>
</form>
)}
}
ReactDOM.render(<App />, document.querySelector('#app-root'))
<div id="app-root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>