I need add attribute VALUE for input depending on the state of the parameter isValue
{this.state.isValue ?
<input type="text" id="amount" name="amount" value={this.state.amount} />
:
<input type="text" id="amount" name="amount" />
}
If I use this code - I have emtpy value in html code (if isValue = false)
<input type="text" id="amount" name="amount" value={this.state.isValue ? this.state.amount : null} />
Is it possible to do this in a more elegant way? For example, I try like this, but it doesn't work...
<input type="text" id="amount" name="amount" {this.state.isValue ? value=this.state.amount : null} />
Finally I found a solution. Too bad no one could help me.
<input type="text" id="amount" name="amount" {...(this.state.isValue ? {value: this.state.amount} : {})} />
Related
I am trying to figure out how to take either the TextField component or use the Input and InputLabel components to make it so that I have a label and the textfield is to the right of the label?
You can try this :
<div>
<form onSubmit={this.onSubmitHandler}>
<label htmlFor="name">Name : </label>
<input type="text" id="name" onChange={this.onChangeHandler}/>
<label htmlFor="age">Age : </label>
<input type="text" id="age" onChange={this.onChangeHandler}/>
<label htmlFor="hair">Hair : </label>
<input type="text" id="hair" onChange={this.onChangeHandler}/>
<button>Add New</button>
</form>
</div>
This will give you something like this :
hi I am doing form validation using react-final-form.I also take help from this example
https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/field-level-validation?from-embed
I am trying to do same thing when I click submit button it will show Required error if the field is required.
currently, in my demo, it is not showing this
here is my code
https://codesandbox.io/s/quizzical-hellman-65dy3
<RFField
component={SForm.Input}
label="Name"
name="name"
placeholder="Please Enter full Name"
required={true}
validate={required}
/>
is there any way to show required message ?
The error message is available as a prop, but you actually need to setup the mark-up to display the required message.
You can restructure your SForm like this to have it work with semantic-ui and react-final-form.
<SForm.Group widths="equal">
<RFField
label="Name"
name="name"
validate={required}
>
{({ input, meta }) => (
<div>
<label>First Name</label>
<SForm.Input {...input} type="text" placeholder="First Name"/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</RFField>
<RFField
label="last Name"
name="lastName"
validate={required}
>
{({ input, meta }) => (
<div>
<label>Last Name</label>
<SForm.Input {...input} type="text" placeholder="Last Name"/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</RFField>
</SForm.Group>
See working code: https://codesandbox.io/s/flamboyant-shtern-s1pgj
I'm converting a project to use Semantic-UI-React and a form is triggering on every change. The old form looked like this and worked as intended:
<div className="entryForm">
<form onSubmit={this.handleSubmit}>
<span className="formLabel">Location:</span>
<input type='text' name="location" placeholder="Location"
onChange={this.handleChange} autoComplete="off" /><br/>
Date Activity:
<input type='text' name="activity" placeholder="Activity"
onChange={this.handleChange} autoComplete="off"/><br/>
Cuisine:
<input type='text' name="cuisine" placeholder="Cuisine"
onChange={this.handleChange} autoComplete="off"/>
<button type="submit" value="submit" hidden="hidden"/>
</form></div>
The Semantic form looks like this and displays both SUBMIT and HELP on every change in the form:
<Form onSubmit={console.log("SUBMIT")}
onChange={console.log("HELP")}>
<Form.Field inline>
<label>Location:</label>
<Input name='location'
placeholder='Enter a neighborhood here'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
<Form.Field inline>
<label>Activity:</label>
<Input name='activity'
placeholder='Enter a a fun activity'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
<Form.Field inline>
<label>Cuisine:</label>
<Input name='cuisine'
placeholder='What do you want to eat'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
</Form>
What's going on?
onSubmit={(() => console.log("SUBMIT"))}
That fixed it as well as adding a submit button got it working
In JQuery I can set value for multiple elements at once in this way:
<form action="" id="mainForm">
<input type="text" name="Phone" class="deftext" value="" >
<input type="text" name="Number" class="deftext" value="" >
<input type="text" name="Name" class="deftext" value="" >
<input type="text" name="Lastname" class="deftext" value="" >
<input type="text" name="Middlename" class="deftext" value="" >
<input type="text" name="Age" class="deftext" value="" >
<input type="text" name="Email" class="deftext" value="" >
<input type="text" name="Occupation" class="deftext" value="" >
</form>
$('#mainForm .deftext').val("hello");
// OR
$('#mainForm input:text').val("");
Are there similar approach in ExtJS 4 to modify the following code into single line?
Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');
Ext.getCmp('mainForm').down('[name=Name]').setValue('');
....
Your JQuery code is not really readable, because when looking at the function you can't see that there are multiple fields affected. This is why ExtJS does not support such a syntax. Either you use
Ext.getCmp('mainForm').down('[name=Phone]').setValue('');
Ext.getCmp('mainForm').down('[name=Number]').setValue('');
or you use
Ext.getCmp('mainForm').getForm().setValues({
Phone: '',
Number: ''
});
Unlike your JQuery example, both of these are readable, because I don't have to know which classes have been applied to which fields.
If you want to reset all fields to the value that was set during the last form.loadRecord operation, or the initial value if no form.loadRecord operation has been performed, use form.reset:
Ext.getCmp('mainForm').getForm().reset();
Well, if child components get something in common (xtype for example) you can do something like
Ext.getCmp('mainForm').query('textfield').each(function(component){component.setValue('')});
but no, you cant use component methods on array of components.
I'm trying to update a database from a form without using any php, I'm using angularjs with MySql
If I use the following with the put method I can insert a user into the data base, I've
http://localhost:8080/CyberSolution/rest/user/register?u=tester&pw=fred&fname=Fred&lname=Smith&email=fred#localhost.com
I've made a basic html form
<form method="POST" action="">
Username: <input type="text" name="username" size="15" /><br />
Password: <input type="password" name="password" size="15" /><br />
email: <input type="text" name="email" size="15" /><br />
First name: <input type="text" name="first_name" size="15" /><br />
Last name: <input type="text" name="lirst_name" size="15" /><br />
<p><input type='submit' name='Submit' value='Submit' /></p>
</form>
I'm working with AJS for the first time and also REST for the first time, I'm unsure on how to link the form to the database to update. I'm unsure what needs to go in the controllers.js as well
Thanks
You could simply use the $http service.
First use ng-model to store fields value in an object :
<form ng-submit="send_form()" action="">
Username: <input type="text" name="username" size="15" ng-model="form.username" /><br />
Password: <input type="password" name="password" size="15" ng-model="form.password"/><br />
email: <input type="text" name="email" size="15" ng-model="form.email"/><br />
First name: <input type="text" name="first_name" size="15" ng-model="form.first_name"/><br />
Last name: <input type="text" name="lirst_name" size="15" ng-model="form.last_name"/><br />
<p><input type='submit' name='Submit' value='Submit' /></p>
</form>
And then use in your controller (or even better, through a service) :
function myController($scope, $http) {
$scope.send_form = function () {
$http.put('http://localhost:8080/CyberSolution/rest/user/register', $scope.form).success(successCallback);
}
}