form field image
how do I receive identical form field separately so I can add them to the database. like 3 email input fields or so...
Your question requires more clarification.
If you are using single submit button it can be either of two things, if you are using controlled inputs, as soon as your form is submitted, you can use your state to pass all the data to the backend.
For controlled input you will need to pass onChange handler in each input. Since you are using identical fields I suggest using array of objects and use the index of the array to update the data in the specific index.
If you are using uncontrolled input then you can use form data to retrieve values from the form.
Do remember that you need 'name' in each input for this work.
<form onSubmit={savePassengerSeats}>
<label>
Full Name
<input type="text" id="fullName" name="fullName" />
</label>
<label>
Mobile
<input type="number" id="mobile" name="mobile" />
</label>
<! -- other input -->
<button>Save</button>
</form>
const savePassengerSeats = (event)=>{
const formData = new FormData(event.target)
//use this form data to save data in the db
}
Related
pattern="[a-zA-Z ]*"
im trying to limit the input to be only letters no numbers or symbols should be allowed
but the given code is not working
<input
name="cardName"
type="text"
required
pattern="[a-zA-Z ]*"
defaultValue={kardName}
/>
i have also tried to use onChange method but it wasn't working too
anyhelp would be highly apperciated
The pattern attribute specifies a regular expression that the element's value is checked against on form submission.
You can see from the snippet below, that if you hit submit, the pattern is checked and it's actually working.
<form>
<input
name="cardName"
type="text"
required
pattern="[a-zA-Z ]*"
/>
<input type="submit" />
</form>
If you want to prevent the user from inserting some character, the pattern attribute won't help you.
What You can do is check the character inside the onKeyDown function, and prevent the insertion there. Something like this:
const onKeyDown = (event) => {
if (!event.key.match(/[A-Za-z ]/)) {
event.preventDefault()
}
...
<input
name="cardName"
type="text"
required
onKeyDown={onKeyDown}
/>
I'm trying to get some values from the JSON array on some http-address. Therefore, when I put from the map in the input field, I got an Object instead of a value. Outside the input field, it works fine.
<FormGroup>
<Label for="description">Description</Label>
<Input type="text" name="description" id="description" value={Object.keys(item.storeByClothes).map(clothes =>{return <p>{item.storeByClothes[clothes].description}</p>})}
onChange={this.handleChange} autoComplete="description"/>
</FormGroup>
{Object.keys(item.storeByClothes).map(clothes =>{return <p>{item.storeByClothes[clothes].description}</p>})}
Inside <FormGroup> I got the Object. External is a necessary value.
What am I doing wrong?
currently JSX transpiler converts <p>... into React component (object) and then passes it into input as its value. To display variable's content browser calls .toString() method. so finally you see "[Object object]" there. Depending on your needs you need different changes made.
Say if you expect to see HTML markup inside input(like a string) you should make it string(say using template strings):
.map(el => `<p>....`
Or you just should not put it into <input value if you need to see it as live HTML markup
Somewhat new to react and having trouble passing multiple state values to an input.
Specifically, state from drop-down menus. I can accomplish this in a p tag by chaining the various state values together.
This works
<p>
{this.state.one}_
{this.state.two}_
{this.state.three}_
{this.state.four}_
{this.state.five}
</p>
This will return
one_two_three_four_five
Whenever I try to pass these same values into a single input I get an error.
This does not work
<label>
Title:
<input
value=
{this.state.one}_
{this.state.two}_
{this.state.three}_
{this.state.four}_
{this.state.five}
type="text" />
</label>
How can one pass multiple state values into a single input?
Template literals with variables :
<input
value={ `${this.state.one}_${this.state.two}` }
/>
You have to pass a single expression to the value attribute. Change to this:
<label>
Title:
<input value={`${this.state.one}_
${this.state.two}_
${this.state.three}_
${this.state.four}_
${this.state.five}`
}
type="text" />
</label>
Note: this is ES6 string interpolation. The ES5 alternative is the regular string concatenation with "+"
I am making a POST request to a RESTFUL api and the only way I can pass the parameters is if I add them into the URL used in the forms 'action' parameter. As soon as I take those parameters and put them down into the form's body component the request no longer works. My question is how do I use the inputs within the form to define the request parameters instead of the embedding the parameters into the action URL?
I do notice that when I submit the request the request body parameters show up, but the actual request fails saying that the parameters are not there.
Here is the HTML:
<form target="hiddenIframe" method="POST" action="/rest/bpm/wle/v1/process/5853?action=addDocument&name=test123&docType=file&parts=none&accept=application/json&override-content-type=text/plain" enctype="multipart/form-data">
<input type="text" name="instanceId" value="5823" />
<input type="text" name="name" value="myTestQ1" />
<input type="text" name="docType" value="file" />
<input id="myFileName" type="file" name="data" />
<input type="submit"/>
</form>
<iframe name="hiddenIframe" id="hiddenIframe" style="display: none;" />
As you can see the action in the form tag is very long and is not dynamic... I would like to only have "/rest/bpm/wle/v1/process/" there, but when I do the upload fails.
I'd use some Javascript. Add an onchange to all the mandatory input fields. And the change method you'll be calling can update your action url with the new data from the form field.
Something like:
<input type="text" name="instanceId" value="5823" onchange="updateInstanceID()" id="instanceid" />
action="/rest/bpm/wle/v1/process/5853?action=addDocument&name=test123&docType=file&parts=none&accept=application/json&override-content-type=text/plain"
Now, your Javascript should have that method.
function updateInstanceID() {
var val = document.getElementById("instanceid").value;
var form = document.forms[0]; // assuming only one form on the page.
....
}
Now you can access your form.action field and update it accordingly.
Basically I've made a form in Cakephp 2.1 with a jQuery button that appends an input field and adds a count to each of the newly created input like so:
<input type="text" name="data[foo][link]" /> // Original input
<input type="text" name="data[foo][1][link]" /> // Appended inputs
<input type="text" name="data[foo][2][link]" />
<input type="text" name="data[foo][3][link]" />
My question is if it's possible to get all of these inputs to save into the same [foo][link] table in the database (preferably as an array)?
Thanks heaps.
public beforeSave() {
if (isset($this->data['Foo'])) {
$this->data['YourModel']['realField'] = serialize($this->data['Foo']);
}
return true;
}
In the afterFind() you revert that by using unserialize();
data[foo][link] Should be data[foo][0][link].