How can I add an upload image to a React form ?
<form onSubmit={this.handleSubmit.bind(this)} >
<label>Titre</label>
<input className="form-control"
type="text"
ref="title"
name="titleLoi"
value={this.state.titre}
onChange={this.handleChange.bind(this)}/>
<label>Description</label>
<input className="form-control"
type="text"
ref="abstract"
name="abstractLoi"
value={this.state.abstract}
onChange={this.handleChange.bind(this)}/>
<button className="btn btn-primary">Enregistrer</button>
</form>
I saw on Atmosphere a package okgrow:image-upload. Is it only using an external package that I can achieve this ?
Setting your form to handle file uploads by adding the enctype attribute and adding a file input will allow you to select a file to upload:
<form enctype="multipart/form-data" onSubmit={this.handleSubmit.bind(this)}>
<input className="form-control"
type="file"
ref="uploader"
name="image"
onChange={this.uploadFiles.bind(this)}/>
</form>
How you style this and handle this file on the server are different questions.
Related
Is it possible to check if an html element(form) has been rendered?
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Using React and Nextjs.
I think you can check it using window object.
Just check it like a vanilla javascript using window.document.getElementBy....
The Netlify site name is: https://southsidepaint-prototype.netlify.app
I am using React with Gatsby and Sass, all up to date with the latest versions.
I have a simple contact form on the contact page (’/contact’) that looks like this:
<form name="contact-form" method="POST" data-netlify="true" >
<input type="hidden" name="form-name" value="contact-form" />
<div className={ctSty.formGroup}>
<input name="name" type="text" placeholder="Name" required/>
</div>
<div className={ctSty.formGroup}>
<input name="email" type="email" placeholder="Email" required />
</div>
<div className={ctSty.formGroup}>
<input name="phone" type="tel" placeholder="Phone Number" required/>
</div>
<div className={ctSty.formGroup}>
<textarea name="message" placeholder="Write your message"></textarea>
</div>
<button type='submit' value="Submit">Send message</button>
</form>
Now this form above is submitting correctly, didn’t work with a honeypot or recaptcha but that’s ok. The problem is when I click to submit my other form which exists on a separate page (’/careers’), I receive no 404 errors, no warnings, nothing happens. I check the deploy log for warnings too, only had one warning: “warning undefined”; I’m not sure where this particular warning comes from but it existed before the forms were added, so I think that’s ok too. Netlify is able to see that I have a second form, I have the folders on my forms page but nothing is being submitted in spam or verified. I have scoured through the docs, videos and articles but cannot pin down a fix.
Things I have tried:
I have even reduced my second form down to three simple inputs, name, email and phone number and still the same result.
I have changed the name attribute in my form multiple times, cleared the cache on deploy.
changed the name from “form-name” in my
<input type="hidden" name="form-name" value="applicationsV2" />
Added an “onSubmit” to the form
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
The second form’s code is below:
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
<input type="hidden" name="form-name" value="applicationsV2" />
{/* FULL NAME */}
<div className={crSty.formGroup}>
<label for="name" required>
<span><CgAsterisk /></span> Full Name <br/>
<input name="Full_name" type="text" placeholder="e.g. Phillip Anthropy" required/>
</label>
</div>
{/* EMAIL ADRRESS */}
<div className={crSty.formGroup}>
<label for="email" required>
<span><CgAsterisk /></span> Email Address <br/>
<input name="Contact_email" type="email" placeholder="e.g. user#email.com" required />
</label>
</div>
{/* PHONE NUMBER */}
<div className={crSty.formGroup}>
<label for="phone" required>
<span><CgAsterisk /></span> Phone Number <br/>
<input name="Contact_phone" type="tel" placeholder="e.g. 555-0000" required/>
</label>
</div>
</form>
<div style={{textAlign:'center'}}>
<button type='submit' value="submit">SubmitApplication</button>
</div>
You have a typo in your second form (applicationV2). While in the form name appears applicationV2, in the value of the form-name field is applicationsV2. It should be:
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
<input type="hidden" name="form-name" value="applicationV2" />
Keep in mind that with your previous snippet your form was in a kind of limbo because there wasn't a match between forms names so, the data was sent but never caught by any Netlify form. Fixing the typo should fix your issue too.
For further logs, check the Network tab in the inspector tools to see whats Netlify returning in the form response.
I have a view contain this form, I need to display this new user after clicking the save button on another page/view in the HTML table. Any help, please!
<form ng-submit="adduser()">
<label class="lbl" >First name:</label>
<input type="text" ng-model="newuser.fName"><br>
<label class="lbl" >Last name:</label>
<input type="text" ng-model="newuser.lName"><br>
<label class="lbl" >Age:</label>
<input type="number" ng-model="newuser.age"><br>
<label class="lbl" >Gender:</label><br>
<input type="radio" name="gender" value="Male" ng-model="newuser.selectVal"><label >Male</label> <input type="radio" name="gender" id="fml" value="Female" ng-model="newuser.selectVal"><label>Female</label><br>
<label class="lbl" >About user:</label><br>
<textarea ng-model="newuser.about" id="txtarea" ng-model="newuser.about"></textarea><br>
<button type="submit">Save</button>
<button id="clear">Clear all</button>
</form>
If you want to show the user data in next router page, You can take help of AngularJS service and AngularJS Factory By using them you can pass the data one page to another page
But
If you want to show the data that is completly next browser Tab then you can use $sessionStorage and $localStorage in angular
Also check this link
I'm creating a signup model form with a react-responsive-modal library. I wrote my Modal like this
<Modal open={this.state.openCreateAlbum} onClose={this.onCloseModalCreate}>
<div className="modal-body">
<h2>Get Started Absolutely<span> Free!</span></h2>
<span className="subtitle">No credit card needed</span>
<form className="contact-form form-validate3" novalidate="novalidate">
<div className="form-group">
<input type="text" name="name" id="name" placeholder="First Name" required="" autocomplete="off" aria-required="true" />
</div>
<div className="form-group">
<input className="form-control" type="email" name="email" placeholder="E-mail" required="" autocomplete="off" aria-required="true" />
</div>
<div className="form-group">
<input type="password" name="pass" className="form-control" placeholder="Password" required="" autocomplete="off" aria-required="true" />
</div>
<input className="btn btn-md btn-primary btn-center" id="sign_up" type="button" value="Sign Up" />
</form>
</div>
</Modal>
Notice that for First Name field I'm not using className=form-control and for other fields, I'm using that className.
The problem I got is when I run that. I cannot enter text to email and password field but it's fine with the first name field. I don't know why and how to fix that. I followed a tutor video and he didn't have that issue. Here is the link to the video https://www.youtube.com/watch?v=YLQXEHDXnlU
Ps: Im using this library for Modal component https://www.npmjs.com/package/react-responsive-modal
can we have two forms with the same form name on the same page ?
will angular validation work properly for each form ?
For example
<form name="ajax">
<input type="text" name="fname" />
</form>
<form name="ajax">
<input type="text" name="fname" />
</form>
As per my understanding angular validation is not working properly with same form name in same page.
Angular will only consider the last form name
Ex:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<form name="myForm">
<input type="email" name="myInpu" ng-model="myInpu">
</form>
<p>The input's valid state is:</p>
<h1>Form 1 : {{myForm.myInput.$valid}}</h1>
<h1>Form 2 : {{myForm.myInpu.$valid}}</h1>