I am using Redux-Form v.5.2.3. I have a text input that needs to be repeated x number of times, depending on how many times a user clicks a button.
Currently, because I am generating the same input field with the same field name, it does not work. When I type something on one input, it automatically types the same thing in the other inputs - that is because of the same name.
I am thinking of generating a unique id and appending that to the field 'name' - for example :
Original field:
Name: <input type="text" {...name}>
2nd Field - generated after the button press:
Name: <input type="text" {...name2}>
X field - generated after x button presses:
Name: <input type="text" {...nameX}>
Any ideas if that works and an example how to implement?
Thanks in advance
I would check out deep forms in the RF docs.
Trying to figure this out as well, but from what I understand, you can define an array of fields by using the [] notation.
export const fields = [
'name[]',
];
Then you add additional fields by using addField(value?, index?). You can then access each field by treating this.props.fields.name as the array of name fields.
For your case, I think it should look something like
<div>
{this.props.fields.name.map((field, index) => (
<input key={index} type="text" {...field} />
)}
</div>
You can use the redux-from v6.0.0. In this version you can use FieldArray for array fields.
Related
I have a little challenge when testing a website. Just wanted to see if you folks have any suggestions on this. The story behind this is that I need to mask the input fields for the screenshots when the test has been executed as we are sharing the data with other teams. Before the script I am running JS with 'document***.type="password";', but when script starts to type, then input type is changed back to the type of text. Also, class changes from class="is-invalid" to class="is-focused is-invalid" when it's active. Also, I could of course change the type after I have typed the value, but even tho when I click the next field, the class changes. When I have filled the first input field it checks the data against the server and the class is of course changed.
I have an input field when inactive:
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-invalid">
And the input field when active"
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-focused is-invalid">
Any suggestions from a fellow testers, how could I fix this? Thanks a lot in advance!
As pretty much evident from the HTML the <input> field whenever recieves the focus_ the classname is-focused added.
This addition of classname is pretty much controled through the attributes, presumably the css_properties of the parent elements.
As as conclusion, it would be difficult to mask the password field characters from the clientside and have to be controled from the Application Server side.
I am using react-select for better look on UI, and I have implemented it, Now what I am trying to do is
I want to validate that input field when user clicks on Done button (form submit)
I am using react-hook-form for validation
They provide ref={register} which holds the input field value
so for normal input field or select I am able to use this like below
<label htmlFor="fname">
First Name
</label>
<input
type="text"
name="fname"
id="fnameid"
className="form-control"
ref={register({
required: 'First name is required',
})}
/>
{errors.fname && (
<div>
<span className="text-danger">
{errors.fname.message}
</span>
</div>
)}
Now the above is working fine but in case of react-select I do not know how to go forward
<Select
value={initailSelect}
onChange={(e) => onChangeAge(e)}
options={data}
/>
So here when I click on submit button it is only taking validation for fname and giving output on console for fname only
I tried doing like below
<Select
value={initailSelect}
onChange={(e) => onChangeAge(e)}
options={data}
ref={register({
required: 'age is required is required',
})}
/>
Code sandbox Here is my code sandbox My working code, Please check
Edit
I Tried This approach but it is not taking up defaultValue or Value, as I want to show one value selected, a nd in some cases I am getting values from server Which I want to show as selected.
Here is the link for codesandbox, you can either wrap the component in the Controller or use setValue to manually set values and validate
https://codesandbox.io/s/bitter-wave-w1cpi?file=/src/App.js:2084-2802
https://w1cpi.csb.app/
reference
https://react-hook-form.com/get-started#IntegratingwithUIlibraries
I have multiple input fields with same name
<input type="text" name="pname" />
<input type="text" name="pname" />
I'm generating these input fields by cloning the first one using jquery. Therefore there can be 'x' number of input fields.
I'm also implementing autocomplete function by targeting the 'name' attribute.
$('[name="pname"]').each(function(){
$(this).autocomplete({
source: "searchproduct.php",
minLength: 1
});
});
The autocomplete works fine for first input field. But from next input field I get same result as first one i.e I'm not shown a list of matching results but the result from the first input field only.
How to get different result in each input field?
Example: let's say we have a form with 3 fields: pc, part_id, part_details. Sometimes you will want to add additional parts to database when adding pc, so part_id and part_details should be duplicated(part_id and part_details should be corresponding). What I want is the best way to append this two fields to the form?
I know if you just want to duplicate one field you can name the field like this:
<input type="text" name="part_id[]">
Then we can easily get the post data as array. But now we are duplicating more than one field, if we use the approach above at the post end the two/multiple arrays will not be relevant. The approach described here seems to be a good one http://www.quirksmode.org/dom/domform.html, but the fact that names are changing all the time makes it complicated to use the post data as well.
There is another possible approach described here Multiple Forms With Input Fields With The Same Name Attribute? Good Or Bad? . It gives an idea to duplicate the entire form. I am not sure if I understand it correctly, but when I try putting two identical forms in the same page and submit one of them, only data from this form will be submitted, the other one will be ignored. Also it is not suitable for my scenario as not all the fields should be duplicated.
So what is the best way to accomplish this duplicating job?
In the link you gave, they didn't duplicate the form, just the elements inside the form which is fine. If all you are adding is multiple parts to a single PC then there shouldn't be a problem. The parts will be linked via array indices (you can rely on the ordering).
The first instance of part_id[] will correspond to the first instance of part_details[]. This should be distinguishable in your server-side language. In PHP for instance, part_details[2] will correspond to part_id[2] etc.
You can use another level of indexing:
<input type="text" name="pc" />
<!-- First part -->
<input type="text" name="parts[0][part_id]" />
<input type="text" name="parts[0][part_details]" />
<!-- Duplicate part -->
<input type="text" name="parts[1][part_id]" />
<input type="text" name="parts[1][part_details]" />
<!-- Another duplicate part -->
<input type="text" name="parts[2][part_id]" />
<input type="text" name="parts[2][part_details]" />
The fields for each part (id and details) can be easily generated using jQuery.
I have a number of inputs in some forms and I would like to add unique classes to each input based on the input name.
So for example this:
<input name="first_name">
... would become this using JQuery:
<input name="first_name" class="first-name">
I've searched around but could not find much reference to extracting the input name.
Try:
$("input").each(function() {
$(this).addClass($(this).attr("name"));
});