I have a form which has a rich text editor and a form submit button, the rich text editor has style buttons which when clicked submit the form inputs (which is not desirable).
I want to prevent this behaviour I want the form to submit only when the submit button is clicked and not when the RTE style button is clicked.
Code:-
Form Code
I've moved the RichEditor out of the form.
You can still handle the form submit,
I've added the onClick listener on submit button itself.
Just copy and paste this return statement in your App.js
return (
<>
<div>
<form>
<label htmlFor="contact">
Full Name <span id="required-input-star">*</span>
</label>
<br />
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<br />
<label htmlFor="contact">
Email <span id="required-input-star">*</span>
</label>
<br />
<input
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<br />
<label htmlFor="description">
Description <span id="required-input-star">*</span>
</label>
<br />
</form> //closed the form here, and moved out RichEditor
<RichTextEditor />
<hr />
<div className="frm-btn-container">
<input type="submit" value="Cancel" id="cancel-btn" />
<input type="submit" value="Create" onClick={onSubmit} />
</div>
</div>
</>
);
};
Try disabling the button text editor's button.
Related
The Button
(this submit button is not working, and if i delete the onClick, the submit works. how can i make both, the onClick and the Submit to work.)
<input
type="submit"
value="Make the purchase"
onClick={nextStep}
/>
The whole Form
<form id="my-form" className="contact-form" onSubmit={sendEmail}>
<input type="hidden" name="name" value={shippingData.firstName} />
<br />
<input type="hidden" name="name" value={shippingData.lastName} />
<br />
<input type="hidden" name="name" value={shippingData.email} />
<br />
<input type="hidden" name="name" value={shippingData.address1} />
<br />
<input type="hidden" name="name" value={shippingData.zip} />
<br />
<input type="hidden" name="name" value={myJSON}></input>
<div>
<input
type="submit"
value="Make the purchase"
onClick={nextStep}
/>
</div>
</form>
The problem here is, your input button element has type submit. So when you click on it, onSubmit handler gets called. So if you need to do multiple things, you need multiple buttons, or do everything inside onSubmit
Option 1
Have 2 buttons:
<input
type="submit"
value="Make the purchase"/>
<input
type="button"
value="Go to next step"
onClick={nextStep} />
Option 2
<form id="my-form" className="contact-form" onSubmit={handleSubmit}>
const handleSubmit = () => {
nextStep()
sendEmail()
}
We are making a booking system. All the information that the user types will be saved in a file. Everything works beside the submit button...
<input
type="text"
name="SocialUsername"
id="Username"
placeholder="Username I can contact you on"
/>
<div>
<input
type="button"
id="submitbtn"
value="Book"
onclick="saveFile()"
/>
</div>
type attribute in input tag should be set as "submit"
<input
type="text"
name="SocialUsername"
id="Username"
placeholder="Username I can contact you on"
/>
<div>
<input
type="submit"
id="submitbtn"
value="Book"
onclick="saveFile()"
/>
</div>
</div>
Or you could even go for button tags
<input
type="text"
name="SocialUsername"
id="Username"
placeholder="Username I can contact you on"
/>
<div>
<button type="submit" id="submitbtn" value="Book" onclick="saveFile()">Submit</button>
</div>
</div>
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
I do not want to submit form clicking on submit. So i am using :
onSubmit (e) {
e.preventDefault();
console.log(this.state);
}
<form className="loginform">
<h1 className="logo"><img src={images.Logo} /></h1>
<input
className="login"
placeholder="Username"
type="text"
required="true"
onBlur={(e) => { this.userName(e); }}
/>
<input className="login" placeholder="Password" type="password" required="true" />
<input
className="submit"
onClick={(e) => { this.onSubmit(e); }}
type="submit"
value="Submit"
/>
</form>
Doing so form validation is not working. I want to use default form validation with preventDefault.
You should use onsubmit form event:
<form className="loginform" onSubmit={this.onSubmit.bind(this)}>
<h1 className="logo"><img src={images.Logo} /></h1>
<input
className="login"
placeholder="Username"
type="text"
required="true"
onBlur={(e) => { this.userName(e); }}
/>
<input className="login" placeholder="Password" type="password" required="true" />
<input
className="submit"
type="submit"
value="Submit"
/>
</form>
In general you should avoid handling form submission via button onclick events, additional benefit of onsubmit is that it will also be fired on ENTER key submission.
I am trying to implement a crud application in MVC.NET with React. I am displaying the displaying the Employee table data along with edit/delete links corresponding to each records. On clicking the edit link, I display the form with the corresponding values filled in the text field. But I am not able to alter or edit the values in the text field. Please let me know how to correct it.
Employee table:
Edit Form:
Please find the code below:
const element = <div>
<form name="contactForm" noValidate onSubmit={this.handleSubmit}>
<p>EmployeeID
<br />
<input type="text" value={data.EmployeeID}/></p>
<br /><p>FirstName
<br />
<input type="text" value={data.FirstName} /></p>
<br /><p>LastName
<br />
<input type="text" value={data.LastName} /></p>
<br /><p>Gender
<br />
<input type="text" value={data.Gender} /></p>
<br /><p>Designation
<br />
<input type="text" value={data.Designation} /></p>
<br /><p>Salary
<br />
<input type="number" value={data.Salary} /></p>
<br /><p>City
<br />
<input type="text" value={data.City} /></p>
<br /><p>Country
<br />
<input type="text" value={data.Country} /></p>
<button type="submit">Submit</button>
</form>
</div>;