So I was following a Udemy course on Node.js and one thing that stood out is that forms have a built in method to make backend requests. For instance.
<form class="product-form" action="/admin/add-product" method="POST">
<div class="form-control">
<label for="title">Title</label>
<input type="text" name="title" id="title" value="<% if(editing) { %><%= product.title %><% } %>">
</div>
<div class="form-control">
<label for="imageUrl">Image URL</label>
<input type="text" name="imageUrl" id="imageUrl" value="<% if(editing) { %><%= product.imageUrl %> <% } %>">
</div>
<div class="form-control">
<label for="price">Price</label>
<input type="number" name="price" id="price" step="0.01" value="<% if(editing) {%><%=product.price%><% }%>">
</div>
<div class="form-control">
<label for="description">Description</label>
<textarea name="description" id="description" rows="5"><% if(editing) {%><%=product.description%><% }%></textarea>
</div>
<% if(editing) { %>
<input type="hidden" value="<%= product._id %>" name="productId">
<% } %>
<button class="btn" type="submit"></button>
</form>
Doing this will automatically grab all the inputs and use the action to make the url while the method specifies, well the HTTP methods for RESTFUL API. Conventionally we would usually have to specify when to do HTTP requests with the backend more manually compared to this automation.
What I'm curious about is if its possible to replicate this built in under the hood logic with form elements and their contents to other HTML elements without having to construct additional logic on your page that you would do in say React.
Related
when I click the 'save new post' button and the title and body content are provided then the action of sending a request is successfull, but if I leave one field blank, than the request isn't even made.
this is my code:
<form action="/create-post" method="POST">
<div class="form-group">
<label for="post-title" class="text-muted mb-1"><small>Title</small></label>
<input required name="title" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
</div>
<div class="form-group">
<label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
<textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"></textarea>
</div>
<button class="btn btn-primary">Save New Post</button>
</form>
And this is what I get when I leave a field blank:
form behavor after submitting empty field
in the image, 'Compila questo campo' just means 'Fill in this field'
Edit:
thank you for reminding me that it’s because of the required field, but then why is that in this example i can't submit if the title field is empty but can if the body is empty?
<form class="mt-3" action="/post/<%= post._id %>/edit" method="POST">
<div class="form-group">
<label for="post-title" class="text-muted mb-1"><small>Title</small></label>
<input required name="title" value="<%= post.title %>" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
</div>
<div class="form-group">
<label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
<textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"><%= post.body %>
</textarea>
</div>
<button class="btn btn-primary">Save Changes</button>
Note that this is a ejs template, so that's why it as <% and <%=
You have required attribute both of your inputs. So you can't submit this form in this way.
See here for details
For example in this example you can submit the form:
<!DOCTYPE html>
<html>
<body>
<h1>The button type attribute</h1>
<form action="#" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
But in this example you can't:
<!DOCTYPE html>
<html>
<body>
<h1>The button type attribute</h1>
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" required><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" required><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
Good luck.
You explicitly said that the user was required to fill in a value.
Don't do that if the field is optional.
Because your <input> and <textarea> tags have required attribute. Remove that attribute if you want to make them optional.
You are using required attribute with textbox and text area.
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.
This is client side (browser side validation).
Reference
I'm attempting to remove the "thanks" page on my FormSubmit code. I have a function that displays a "success" message below my form, but it's not working because of the thanks page and the redirection.
Any advice for this?
<form action="https://formsubmit.co/myemail#gmail.com" method="POST">
<div class="form-group">
<label for="Nombre"> Nombre</label>
<input type="text" id="firstName" name="Nombre" required>
<input type="hidden" name="_subject" value="Nueva consulta web">
</div>
<div class="form-group">
<label for="Apellido">Apellido</label>
<input type="text" id="lastName" name="Apellido" required>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" id="email" name="Email" required>
</div>
<div class="form-group">
<label for="Mensaje">Mensaje</label>
<textarea name="Mensaje" id="message" cols="30" rows="3" placeholder="Escribinos tu mensaje" required></textarea>
</div>
<input type="hidden" name="_captcha" value="false">
<button type="submit">Enviar</button>
<input type="hidden" name="_template" value="table">
<input type="hidden" name="_next" value=" ">
</form>
You can provide an alternative URL for "Thank You" page.
<input type="hidden" name="_next" value="https://yourdomain.co/contact">
This will work as redirect route, and teleport you on that contact page without showing thank you message screen.
Then you can just add an onClick event listener that will show you "success" message.
I'm also checking out FormSubmit, and they have a section in their documentation page that explains how to get rid of it:
"By default, after submitting a form the user is shown the FormSubmit "Thank You" page. You can provide an alternative URL for "Thank You" page."
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">
So, in your form HTML tags, add that line of code and swap out "https://yourdomain.co/thanks.html" with your own URL
I'm using FormSubmit to create a contact form in my static website (hosted on a server).
My form looks like this:
<div id="contact-area" class="container">
<h1>~$ contactme</h1>
<br>
<form action="https://formsubmit.co/c379c266434ca1a039bdf03209919395" method="POST">
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" name="name" class="form-control" placeholder="Your name..." required>
</div>
<div class="col">
<input type="email" name="email" class="form-control" placeholder="Your e-mail" required>
</div>
</div>
</div>
<div class="form-group">
<textarea maxlength="1000" placeholder="Your message..." class="form-control" name="message" rows="10" required></textarea>
</div>
<input type="hidden" name="_template" value="table">
<input type="text" name="_honey" style="display:none">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="message_sent.html">
<button type="submit" class="btn btn-lg btn-dark btn-block">Submit</button>
</form>
</div>
My email is verified. When the user clicks on submit button, this message appears in a new page:
" Make sure your form has the method="POST" attribute "
However, I receive the message. That's weird. Anyone know why it says my form should have POST attribute while my form actually has the post attribute.
Your code snippet is all okay. I have tested it, forms are getting submitted, and nothing wrong except the way you implement the "_next" feature. As FormSubmit documentation clearly mentioned you have to provide an alternative URL not just a path or file, it should be a URL.
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">
Please change the hidden filed in your form to:
<input type="hidden" name="_next" value="https://yourdomain.co/message_sent.html">
and that should probably work fine.
Additional information:
FormSubmit documentation: https://formsubmit.co/documentation
I guess you have gone wrong in the action of the form.
Try using this:
<form action="https://formsubmit.co/your#email.com" method="POST">
<!-- Your form inputs here -->
</form>
I am new to Rails I have an HTML form but I don't know how to keep the CSS classes. Just turning the form into rails.
<form action="#" method="post" autocomplete="off">
<div class="lx-contact-field">
<input type="text" name="fullname" placeholder="Jane Doe" />
</div>
<div class="lx-contact-field">
<input type="text" name="email" placeholder="Jane#Doe.com" />
</div>
<div class="lx-contact-field">
<textarea name="message" placeholder="Your message here ..."></textarea>
</div>
<input type="button" name="submit" value="SEND MESSAGE" />
</form>
You can keep CSS classes in your divs, and replace html input field with Rails textfield
<div class="lx-contact-field">
<%= f.text_field :full_name, placeholder: "Jane Doe" %>
</div>
I am new to rails and following the tutorials from Micheal Hartl. In his tutorials he uses the 'form_for' tags to create forms in his app. However, I love the css frameworks and thus decided to use Zurb Foundation for creating a form in HTML manually. The form is created inside a modal. Here is the code for the form:
<div class="reveal" id="StudentLoginModal" data-reveal
data-animation-in="hinge-in-from-top" data-animation-out="hinge-out-from-bottom">
<form data-abide novalidate action="/login" method="POST">
<%= form_authenticity_token %>
<div data-abide-error class="alert callout" style="display: none;">
<p><i class="fi-alert"></i> There are some errors in your form.</p>
</div>
<div class="row">
<label style="font-family: sans-serif;
font-size: 1.15em;
font-weight: bold;">UserName
<input name="session[name]" type="text" placeholder="Your Exam Roll.no" required pattern="number"
aria-describedby= "exampleHelpText">
<span class="form-error">
Yo, you had better fill this out, it's required.
</span>
<p class="help-text" id="exampleHelpText">Enter your username.</p>
</label>
<label style="font-family: sans-serif;
font-size: 1.15em;
font-weight: bold;">Password
<input type="password" name="session[password]" id="password" placeholder="yeti4preZ" aria-describedby= "exampleHelpText1" required >
<span class="form-error">
I'm required!
</span>
<p class="help-text" id="exampleHelpText1">Enter a password please.</p>
</label>
<input type="submit" class="button" value="Submit">
</div>
</form>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
But the problem is that rails has CSRF protection and it doesn't allows users to submit form without an authenticity token. I have tried retrieving the value using <%= form_authenticity_token %> but it doesn't add any values to the form. However, the tag is showing the value of token in other pages. Any Ideas?
Thanks :)
Edit 1: I think the problem is the modal I am using to render the login form.
Use
<input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
instead of <%= form_authenticity_token %>
in controller
def my_action
#auth_token_form = form_authenticity_token
end
in view
<input type="hidden" name="authenticity_token" value="<%=form_authenticity_token %>">