MVC beginner here. I got stuck on this issue. I have such view:
<form method="post" action="#Url.Action("UserAddRequested", "UsersController")" >
First name:<br>
<input type="text" name="firstname" value="">
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br>
Age:<br>
<input type="text" name="age" value="">
<br>
Email:<br>
<input type="text" name="email" value="">
<br>
<br>
<input type="button" value="Create" />
</form>
Hopefully you understand intention when user clicks create I want to call an action UserAddRequested in controller.
This is controller code
[HttpPost]
public ActionResult UserAddRequested()
{
return Content("Hi");
}
But when user clicks create button, nothing is displayed :(( Can someone help?
Add type="submit" to your button and No need to add UsersController just rename that to Users
<form method="post" action="#Url.Action("UserAddRequested", "Users")" >
First name:<br>
<input type="text" name="firstname" value="">
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br>
Age:<br>
<input type="text" name="age" value="">
<br>
Email:<br>
<input type="text" name="email" value="">
<br>
<br>
<input type="button" value="Create" />
</form>
you aren't submitting anything in your view. Instead you are using a plain HTML button. You need to change the type of that button to type="submit". There shouldn't be any difference in HTML/CSS between type = "button" and type = "submit"
<input type="submit" value="Create" />
Related
I am writing the following HTML code which requires certain input values and has a submit button which redirects to a different site when clicked. Currently the Submit button redirects even if no value is entered into the input boxes. I want the submit button to only work if all the input values are filled.
<!DOCTYPE html>
<html>
<body>
<h3>Please enter the following information</h3>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="" required><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="" required><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" value="" required><br>
<label for="UserID">UserID:</label><br>
<input type="text" id="UserID" name="UserID" value="" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="" required><br><br>
<input onclick="window.location.href = 'https://example.site';" type="submit" value="Submit" />
</form>
</body>
</html>
The reason is because your submit isn't properly structured.
You see, if you replace your input submit with a button, it works perfectly:
<!DOCTYPE html>
<html>
<body>
<h3>Please enter the following information</h3>
<form action="https://example.site">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="" required><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="" required><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" value="" required><br>
<label for="UserID">UserID:</label><br>
<input type="text" id="UserID" name="UserID" value="" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="" required><br><br>
<button>Submit</button>
</form>
</body>
</html>
All you would have to change is add the link which you want it to redirect to in the action defined in the form.
This is the recommended method.
Keep in mind that you should always perform server-side checks regardless of whether there is a required attribute in the input field, as it can easily be removed.
I've got a simple form which I'm wanting people to join to be put onto a waiting list for my product - but it's not submitting.
My application is being hosted on localhost:3000 and runs absolutely fine. The page renders and you can fill the inputs in.
But when you click 'submit' it does nothing. I've tried doing a few different 'types' of the button, but no luck.
Here's my code:
<section class="waiting-list-section">
<div class="waiting-container">
<div class="waiting-heading">
<h2>Join our waiting list</h2>
</div>
<div class="waiting-inputs">
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</div>
</div>
</section>
Any tips? :-)
You need a form element wrapped around the input elements and the button.
<form>
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</form>
Second approach would be to add an eventListener on the button and when it is clicked, get the values from the inputs and then do whatever you want to do with that data
I'm trying to make a "contact" button that doesn't allow you to submit until the required fields are filled, then redirects you to another html site. It currently doesn't allow you to submit correctly, but when the fields are filled it just resets the page instead of redirecting it. I think it's ignoring the "form action" part.
Also the reset button just doesn't work at all.
Does anyone see anything that might be the reason?
Thanks!
<form method="get">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<form action="contact2.html" method="post">
<input type="submit" value="Contact" />
</form>
<form action="contactus.html">
<input type="reset">
</form>
</form>
Here's an image of what it looks like when you click contact without filling in the fields
https://i.gyazo.com/dc3a77b5eed0dbad2d6f6e2da1cf3075.png
Below is working code
<form method="post" action="/abc.html">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<input type="submit" value="Contact"/>
<input type="reset">
</form>
Explanation:
All form-elements buttons, textarea, input should be wrapped in one form element.
you need to add form method as post and in action pass the URL of the page where you want to redirect after successful form submission.
I've a form that works perfectly fine on Chrome, Safari, but not Firefox.
Try#1
<form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST">
<input type="text" placeholder="First Name" name="first_name" id="fname" required>
<input type="text" placeholder="Last Name" name="last_name" id="lname" required>
<input id="footer-email" type="text" placeholder="Your Email Address" name="email" required>
<input type="submit" id="subscribe" class="signupbtn" value="sign up">
</form>
Try#2
<form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST">
<input type="text" placeholder="First Name" name="first_name" id="fname" required>
<input type="text" placeholder="Last Name" name="last_name" id="lname" required>
<input id="footer-email" type="text" placeholder="Your Email Address" name="email" required>
<button type="submit" id="subscribe" class="signupbtn">sign up</button>
</form>
result
Network Tab
Header
Params
How would one go about debugging this further?
I think I may have found something; if you're submitting via AJAX, but not preventing the page submit, you'll have an issue.
Change part of your code to:
$('#subscribe').click(function(e){
e.preventDefault();
...
This should only do the AJAX submit, and not refresh the page.
I was also able to submit via FireFox by changing button type="submit" to button type="button", so that it won't natively submit the page on press.
You need to add a CSRF token to your form. Assuming this is a blade file:
<form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST">
{{ csrf_field() }}
<input type="text" placeholder="First Name" name="first_name" id="fname" required>
<input type="text" placeholder="Last Name" name="last_name" id="lname" required>
<input id="footer-email" type="text" placeholder="Your Email Address" name="email" required>
<input type="submit" id="subscribe" class="signupbtn" value="sign up">
When a page in Laravel loads, you can print a CSRF or Cross Site Request Forgery token which is good for a certain amount of time. Any POST request needs to have a current one of these, otherwise Laravel will give you a page expired error.
The 3 forms allow access as member, guest or then as newly registered.
However if someone clicks on the lower part of the form it automatically sends the cursor to the top part.
<form action="schlogin.php" method="post">
<fieldset>
<legend>Member's Login</legend>
<label for="username">Username:
<input type="text" name="username" id="username" value=""/>
</label>
</br>
<label for="password">Password:
<input type="password" name="password" id="password"/>
</label>
</br>
<input type="submit" name="login" class="loginButtons" value="login"/>
</label>
</br>
</fieldset>
</form>
<form action="schlogin.php" method="POST">
<fieldset>
<legend>Guest Player</legend>
<input type="submit" name="guest" class="loginButtons" value="Play as GUEST!" />
</label>
</br>
</fieldset>
</form>
<form action="schlogin.php" method="POST">
<fieldset>
<legend>FAST Register</legend>
<label for="username">Username:
<input type="text" name="username" id="username" value =""/>
</label>
</br>
<label for="password">Password:
<input type="password" name="password" id="password"/>
</label>
</br>
<label for="email">E-mail:
<input type="text" name="email" value=""/>
</label>
</br>
<input type="submit" name="register" class="loginButtons" value="I WANT TO PLAY TOO!"/>
</label>
</br>
I've forgotten my password:
<input type="submit" name="forgotten" class="loginButtons" value="Send me a new password!"/>
</label>
</br>
</fieldset>
</form>
Validate, validate, validate.
You have duplicate id attributes, so the labels in your second form are for the inputs in the first form.
In your second form change
<label for="username">Username:
<input type="text" name="username" id="username" value ="<?php if (isset($username)){echo $username; }?>"/></label></br>
to:
<label for="register_username">Username:
<input type="text" name="username" id="register_username" value ="<?php if (isset($username)){echo $username; }?>"/></label></br>
or whatever you like.
The point is that the id for every html element should always be unique. And the label element's for attribute should match it's associated input element's id attribute.