I would like to have the yes radiobutton to be optional and not to required the comments. This is what I have . what would it be the easiest way to have this value optional and leave the NO radiobutton as it is ?
<Field
component={RadioGroup}
name="result"
required={true}
options={[
{ title: 'Yes', value: 'yes'},
{ title: 'No', value: 'no' },
]}
/>
</div>
</div>
<hr className="hr-line" />
<div className="txt-area">
<Field
name="comments"
type="text"
component={renderTextField}
label="Enter Comments Here"
validate={[required]}
/>
</div>
<hr className="hr-line" />
<div className="d-flex flex-row-reverse ">
<Button type="submit" className="btn-group w-25" size="sm" color="primary" disabled={pristine || submitting}>Save Changes</Button>
We have checked with the provided code and noticed that Syncfusion Components were not used over here. The functionalities provided in the default Radio Button is also available with our Syncfusion Components.
Refer to the below links to know more about Radio Button component.
Demo: https://ej2.syncfusion.com/react/demos/#/material/button/radio-button
Documentation: https://ej2.syncfusion.com/react/documentation/radio-button/getting-started/
API: https://ej2.syncfusion.com/react/documentation/api/radio-button/
Please check with the above links and provide us an example based upon your requirement. We have also attached a sample here for your reference.
https://www.syncfusion.com/downloads/support/directtrac/general/ze/RadioButton1391065099
Please get back to us if you need further assistance.
Regards,
Keerthana.
Related
I'm working on a search UI where I have quite a few filters which I want as URL parameters when someone selects/checks the options. I've used the technique as advised on the Remix.run docs to come up with multiple forms within the filters. Each time a group of Filters gets submitted, the selected old parameters get disappeared. Heres my code,
<Panel header="Status" key="status">
<Form
name="search"
action='/search'
method="get"
onChange={(e) => submit(e.currentTarget, { replace: false })}
>
<ul>
<li>
<Checkbox
name="status"
value="buy_now"
defaultChecked={status.includes('buy_now')}
>
Buy Now
</Checkbox>
</li>
<li>
<Checkbox
name="status"
value="on_auction"
defaultChecked={status.includes('on_auction')}
>
On Auction
</Checkbox>
</li>
</ul>
</Form>
</Panel>
<Panel header="Price" key="price">
<Form name="search" action='/search' method="get">
<Select
name="blockchain"
value={
blockchain
? options.filter((a) => a.value === blockchain)
: undefined
}
options={options}
placeholder="Blockchain"
type="white"
/>
<div className="d-flex align-center price">
<TextInput
value={min ? min : undefined}
name="min"
placeholder="Min"
/>
<span>to</span>
<TextInput
value={max ? max : undefined}
name="max"
placeholder="Max"
/>
</div>
<button
onClick={(e) => {
e.stopPropagation()
submit(e.currentTarget, { replace: false })
}}
className="btn primary-btn btn-lg w-100"
>
Apply
</button>
</Form>
</Panel>
How Can I get around this to have all the parameters without having to manage them on my own using React state?
Edit:- I want the first filter to be submitted automatically and the latter to be submitted on a button click.
Bit of a UI of what I'm trying to achieve,
Answer: After investing enough time to look through for shortcuts, finally understood that it's not one of the magic that remix.run does. use something like formik and update the state imparatively.
When you submit a form, the only values included are the one under the submitted form. The values from any other form are not included (fortunately!).
So I'd use a single Form with all the inputs under it (checkboxes as well as text inputs).
Then instead of a onChange on the Form, you can add something like an onChange handler on the checkboxes and submit the form inside imperatively (using a ref click on the submit button or something, I think using a ref on the form you need to submit all values in the submit function so a button ref click may be simpler).
Keep in mind that if you want to "restore" the field values after submitting, you need to return them from the loader function like this:
// Loader function
const url = new URL(request.url);
return {
results: [...],
values: Object.fromEntries(url.searchParams.entries())
};
Then in the component, use values from useLoaderData:
<input type="text" name="max" defaultValue={values.max || ""}/>
Added benefit: if you come back to this page (by clicking browser back for example), your search parameters and search results are still there!
I actually put up a stackblitz for you but I lost all my changes :(
It seems like you could just keep all fields in a single form and submit that form when the submit button is pressed.
Then onChange, check if the target's name is 'status', and submit the form anyway.
export default function App() {
const submit = (form) => {
form.submit();
};
return (
<form
name="search"
action="/search"
method="get"
onChange={(e) => {
if (e.target.name === "status") {
submit(e.currentTarget);
}
}}
>
<fieldset>
<legend>status</legend>
<label>
<input type="checkbox" name="status" value="buy_now" />
buy_now
</label>
<label>
<input type="checkbox" name="status" value="on_auction" />
on_auction
</label>
</fieldset>
<fieldset>
<legend>price</legend>
<label>
<div>blockchain</div>
<select name="blockchain">
<option value="option_1">Blockchain Option 1</option>
<option value="option_2">Blockchain Option 2</option>
</select>
</label>
<label>
min <input type="number" name="min" />
</label>
<label>
max <input type="number" name="max" />
</label>
</fieldset>
<button type="submit">Apply</button>
</form>
);
}
demo
Note: not sure what your motivation is to want to separate this into separate forms, but I think the magic you're referring to is that server state, URLSearchParams, FormData and UI are all aligned because they are using the same underlying data using only common web APIs.
Im new to this plugin and could not find any documentation regarding my question.
I want to simply apply a value to the textarea. I started by giving it an id, but there are multiple html components that make up this textarea, ad more that ons instance of the id I added.
The value I enter gets saved, but when I reopen the modal, its suppose to load the text that was saved for that specific area.
<TextField
className="bd_textarea"
id={ `tt_description_text outlined-multiline-static`}
label="Pain description"
multiline
rows={5}
onBlur={ (f)=>(this.textOnBlur({id:answeringPainSpot.spotId, value:f.target.value, doc_name:answeringPainSpot.doc_name})) }
/>
Here are my attempts on both class and id and none worked.
$(".bd_textarea").val(spot_text);
$(".bd_textarea").next().find('textarea').eq(0).val(spot_text);
$('.bd_textarea').find('textarea').val(spot_text);
$("#tt_description_text").val(spot_text);
$("#tt_description_text").next().find('textarea').eq(0).val(spot_text);
$('#tt_description_text').find('textarea').val(spot_text);
This is the code when renderd.
<p class="MuiTypography-root MuiTypography-body1" id="modal-modal-description" sx="[object Object]">
<div class="MuiFormControl-root MuiTextField-root bd_textarea">
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" data-shrink="false" for="tt_description_text outlined-multiline-static" id="tt_description_text outlined-multiline-static-label">Pain description</label>
<div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-multiline MuiInput-multiline">
<textarea aria-invalid="false" id="tt_description_text outlined-multiline-static" rows="5" class="MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline MuiInput-inputMultiline"></textarea>
</div>
</div>
</p>
Can you try setting the value like this:
<textarea
className="form-control"
rows="4"
placeholder="Add a comment"
value={this.state.newComment}
onChange={(e) => {
this.setState({
newComment: e.target.value,
);
}}>
</textarea>
I have following antd form in my React component. Default value comes from props, I'm about to change redux store on submit. But if user doesn't change input value and pushes 'Save', validation fails and in console log i got
util.js:19 async-validator: ["'title' is required"]
<Form name="title" onFinish={this.submitEdit} >
<Form.Item name="title" rules={[{ required: true, message: 'Required field' }]}>
<Input defaultValue={this.props.title} placeholder="Enter entry title"/>
</Form.Item>
<div>
<Button type="primary" htmlType="submit">Save</Button>
<Button onClick={this.cancelEdit}>Cancel</Button>
</div>
</Form>
I hade similar issue with antd calendar control. Tried to write custom validator, but it looks like if nothng had changed, input value is undefined. Do I have any chance to make it work?
Yes according to the doc here you need to use the initialValue prop on <Form.Item> and then it works.
<Form name="title" onFinish={this.submitEdit} >
<Form.Item
name="title"
rules={[{ required: true, message: 'Required field' }]}
initialValue={this.props.title}
>
<Input placeholder="Enter entry title"/>
</Form.Item>
<div>
<Button type="primary" htmlType="submit">Save</Button>
<Button onClick={this.cancelEdit}>Cancel</Button>
</div>
</Form>
Cheers.
My project uses redux-forms and I am trying to get autocomplete working on the login and register form. I have followed all the docs I could find on autocomplete and it works for every browser but iOS Safari.
I have added all the applicable autocomplete attributes and the form is submitting like it should. When the user finishes the login or register, then goes to interact with the page in another way, it works fine. With that in mind, I tried a couple things to force it to pop up. On attempted login, I rerouted the user. Nothing. I popped up an alert. Nothing. and now, I am here!
Login Form:
<form onSubmit={this.login.bind(this)} autoComplete="on">
<Field
component={TextField}
id="email"
fullWidth
autoComplete="email"
hintText="Email"
name="email"
type="email"
normalize={R.toLower}
validate={[required, email]}
{...FormElements.styles.text}
/>
<Field
id="password"
autoFocus={!!login_email}
component={TextField}
fullWidth
autoComplete="current-password"
hintText="Password"
name="password"
type="password"
onKeyPress={this.passwordOnKeyPressHandler.bind(this)}
validate={[required]}
{...FormElements.styles.text}
/>
{error && <div className="form-error m-t">{error}</div>}
<div className="text-center m-t">
<div className="m-b-sm">
Don't have an account?{" "}
<a
className="register-link"
href="javascript:void(0)"
onClick={() =>
this.props.toggle(this.props.VIEWS.REGISTER)
}
>
Register
</a>
</div>
<div className="">
<a
className="forgot-password-link"
href="javascript:void(0)"
onClick={() => this.props.toggle(this.props.VIEWS.FORGOT)}
>
forgot password?
</a>
</div>
</div>
<div className="register__footer visible-md visible-lg">
{this.renderBtn({ size: "large" })}
</div>
<div className="auth__switch-view visible-xs visible-sm">
<div className="m-t">{this.renderBtn()}</div>
</div>
</form>
button:
<div className="register__action-btn-container">
<Button
type="submit"
disabled={submitting}
label={submitting ? "Logging in ..." : "Login"}
size={params && params.size}
/>
</div>
login function:
login(e) {
// e.preventDefault();
document.querySelector('input[name="password"]').blur();
// this.props.handleSubmit();
$S.dispatch(submit(LOGIN_FORM));
// On mobile, we have to force the username and password to be stored.
miscUtils.triggerSavePasswordPrompt(e);
}
Trying to force it...
function triggerSavePasswordPrompt(event) {
if (window.PasswordCredential && event) {
let c = new PasswordCredential(event.target);
navigator.credentials.store(c);
} else {
alert("shizs effed yo")
}
}
I expect the prompt to show up to save or suggest a password when the user submits on iOS Safari. It does not. However, it will show the autofill prompt if the user DOES have a saved password.
I have implemented the react-localize-redux for language-translations in an application i am working with. I do get the translations inside html-elements, but i am failing to get translations to work with html-element-properties. For example input value.
It works using like this:
<form onSubmit={this.handleSubmit}>
<label className="atom_required" htmlFor="name">
<Translate id="textexample" />:
</label>
</form>
But if i try this id returns object Object:
<div className="atom_bottomButtons">
<input
id="atom_bottomButtons__submit"
disabled
className="btn btn-primary"
type="submit"
value={<Translate id="textexample" />}
/>
</div>
Does someone know how to map properties of html-elements?
Simply use the render-prop API:
<div className="atom_bottomButtons">
<Translate>{
({ translate }) => {
return <input
id="atom_bottomButtons__submit"
disabled
className="btn btn-primary"
type="submit"
value={translate("textexample")}
/>
}
}</Translate>
</div>
See also: translate's API