I have this form in my Spring Boot/Thymeleaf/Bootstrap application:
<form action="/person" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<button type="submit" class="btn btn-primary">Create</button></form>
Now the issue is that when I submit the form it just makes a GET request to "/?" url instead of POSTing to "/person".
What could be the reason for that behavior?
<form action="/person" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<input type="submit" class="form-submit">
</form>
Related
Would anyone know why the below Python flask form is not triggering a POST/GET request.
The below code has been compiled in a html file.
<form action="/admin/dashboard" method="GET">
<div class="form-group">
<label>id</label>
<input class="form-control" type='text' name='username'>
</div>
<div class="form-group">
<label>year</label>
<input class="form-control" type='text' name='username'>
</div>
<div class="form-group">
<label>yes/no</label>
<input class="form-control" type='text' name='username'>
</div>
<hr>
<button type="button" class="btn btn-primary btn-sm">search catalouge</button>
<hr>
<p1>not in list add data below</p1>
</form>
when I submit this form, after entering some data, Gmail pops up but nothing is entered in it. What should I do so that the data I enter in the form gets entered in the email?
<form class="" action="mailto:exampl#gmail.com" method="post">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
You need to add the name attribute to each field, which will appear in the mail's body. It'll format itself as mail={your_message} and so on.
Your code becomes:
<form class="" action="mailto:exampl#gmail.com" method="post" enctype="text/plain">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com" name="email">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
JSFiddle
I am working with Laravel 5.4 Framework and I get this issue when the form does not submit anything except the csrf_token().
If I put an input outside of those <div> it will work and submit it, otherwise the browser (Chrome) will only submit the token, as if everything inside the <div> is not part of the form.
How can I submit all the data while using Bootstrap's form-group divs? The layout is not the problem as it does not work even when removing it.
#extends('layouts.master')
#section('content')
<div class="container" style="margin-top: 1%">
<p>Welcome, {{$user->name}}, here you can submit a new company for our database.</p>
<form name="suggestCompanyForm" method="post">
{{csrf_field()}}
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName" aria-describedby="companyNameHelp" placeholder="Enter company name">
<small id="companyNameHelp" class="form-text text-muted">Enter the company's name you would like to suggest</small>
</div>
<div class="form-group">
<label for="companyEmail">Email address</label>
<input type="email" class="form-control" id="companyEmail" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">Enter the company contact email.</small>
</div>
<div class="form-group">
<label for="selectCategory">Select main category</label>
<select class="form-control" id="selectCategory">
<option>Food&Drink</option>
<option>Cosmetics</option>
<option>Electronics</option>
<option>Consumer Goods</option>
<option>Services</option>
</select>
</div>
<div class="form-group">
<label for="description">Company description.</label>
<textarea class="form-control" id="description" rows="5"></textarea>
</div>
<div class="form-group">
<label for="logo">File input</label>
<input type="file" class="form-control-file" id="logo" aria-describedby="logoHelp">
<small id="fileHelp" class="form-text text-muted">Add company logo.</small>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id="check" class="form-check-input">
I agree that my submission follows the website rules.
</label>
</div>
<button id="submitCompany" type="submit" class="btn btn-primary" >Submit</button>
</form>
</div>
#endsection
your form inputs are not being submitted because you didn't give them names ...
Try
<textarea class="form-control" name="description" id="description" rows="5"></textarea>
You have to add the action attribute to the form tag.
Edit this line
<form name="suggestCompanyForm" method="post">
to
<form name="suggestCompanyForm" action = "<url-for-the-submission>" method="post">
.You will also need to add this
name="name_of_input_to_submit"
to each input not only the textarea and you are also uploading a file you have to add this to the form tag too.
enctype="multipart/form-data"
So I am building a website and now that I got a register form I might aswell just make it fancy so stuff like address etc comes to the right and personal info stays at the left.
As of now I got
<section id="form"><!--form-->
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="login-form"><!--login form-->
<h2>Login to your account</h2>
<form method="post">
<div id="login-error"></div>
<input id="login-mail" type="email" placeholder="Email Address" />
<input id="login-pass" type="password" placeholder="Password" />
<button id="login- submit" type="submit" class="btn btn-default">Login</button>
</form>
</div><!--/login form-->
</div>
<div class="col-sm-1">
<h2 class="or">OR</h2>
</div>
<div class="col-sm-4">
<div class="signup-form"><!--sign up form-->
<h2>New User Signup!</h2>
<form name="signup-form" action="/register" method="post" >
<input required id="sign-up-name" type="text" placeholder="Name"/>
<input required id="sign-up-surname" type="text" placeholder="Last Name"/>
<input required id="sign-up-mail" type="email" placeholder="Email Address"/>
<input required id="sign-up-phone" type="tel" placeholder="Telphone"/>
<input required id="sign-up-gsm" type="tel" placeholder="Mobile Phone"/>
<input required id="sign-up-pass" type="password" placeholder="Password"/>
<input required id="sign-up-pass-re" type="password" placeholder="Password again"/>
<input required id="sign-up-street" type="text" placeholder="Street"/>
<input required id="sign-up-nr" type="text" placeholder="Nr"/>
<input required id="sign-up-postalcode" type="text" placeholder="Postalcode"/>
<input required id="sign-up-city" type="text" placeholder="City"/>
<input required id="sign-up-country" type="text" placeholder="Country"/>
<button id="sign-up-submit" type="submit" class="btn btn-default">Signup</button>
</form>
</div><!--/sign up form-->
</div>
</div>
</div>
</section>
I have read something about span but I tried it and it didn't really work. So here it is. Is this something I need to edit in css or in html and what exactly am I looking for?
Did you provide a reference to bootstrap.min.css
I added reference to form control using class="form-control" for the inputs
Is this what you are looking for - https://jsfiddle.net/pmankar/qh6sav52/
Try resizing the output pane to see how your final page would be displayed.
I am a newb to programming, this is my first question here.
I have a bootstrap modal that opens up to a Contact Us form. In Firefox, the form submits postback as expected. In IE 11 clicking the send button just hangs, nothing. The close window buttons work as do the required attributes for text input fields.
I have seen other similar questions, but I am not missing name attributes on any field or button. I am also not duplicating the type="submit" attributes in the tag. I have experimented with using button type="submit" and every other way I can think of doing it. The modal and form elements all work except for the submission. The button behaves as though it is being clicked but nothing changes, nothing is submitted. Any help would be terrific!
Relevant Code:
<form class="form-horizontal" method="post" name="PortalContactUsForm" id="PortalContactUsForm">
<input type="submit" form="PortalContactUsForm" name="SendEmailButton" id="SendEmailButton" class="btn btn-primary" value="Send">
The complete Modal and form code:
<div id="myPortalModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myPortalModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" name="ModalCloseButton" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myPortalModalLabel">Contact Us</h3>
</div>
<div class="modal-body">
<h4>Send <cfoutput>#sub_merchant.companyname#</cfoutput> an email by filling out the form below.</h4><br>
<form class="form-horizontal" method="post" name="PortalContactUsForm" id="PortalContactUsForm">
<div class="control-group">
<label class="control-label" for="Account" name="lblAccount" id="lblAccount" form="PortalContactUsForm">Account</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="Account" id="Account" value="<cfoutput>#customer.account#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="FirstName" name="lblFirstName" id="lblFirstName" form="PortalContactUsForm">First Name</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="FirstName" id="FirstName" value="<cfoutput>#customer.firstname#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="LastName" name="lblLastName" id="lblLastName" form="PortalContactUsForm">Last Name</label>
<div class="controls">
<input type="text" form="PortalContactUsForm" name="LastName" id="LastName" value="<cfoutput>#customer.lastname#</cfoutput>" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label" for="Email" name="lblEmail" id="lblEmail" form="PortalContactUsForm">Your Email</label>
<div class="controls">
<input type="email" form="PortalContactUsForm" name="Email" id="Email" value="<cfoutput>#customer.email#</cfoutput>">
</div>
</div>
<div class="control-group">
<label class="control-label" for="ConfirmEmail" name="lblConfirmEmail" id="lblConfirmEmail" form="PortalContactUsForm">Confirm Email</label>
<div class="controls">
<input type="email" form="PortalContactUsForm" name="ConfirmEmail" id="ConfirmEmail" value="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="PhoneNum" name="lblPhoneNum" id="lblPhoneNum" form="PortalContactUsForm">Your Phone</label>
<div class="controls">
<input type="tel" form="PortalContactUsForm" name="PhoneNum" id="PhoneNum" value="<cfoutput>#customer.phone#</cfoutput>">
</div>
</div>
<div class="control-group">
<label class="control-label" for="MsgBody" name="lblMsgBody" id="lblMsgBody" form="PortalContactUsForm">Questions/Comments</label>
<div class="controls">
<textarea rows="3" form="PortalContactUsForm" name="MsgBody" id="MsgBody" placeholder="No html here, just plain text please." required></textarea>
</div>
</div>
<div class="control-group pull-right">
<label class="checkbox">
<input type="checkbox" form="PortalContactUsForm" name="SendCCCheckbox" id="SendCCCheckbox">
Check this box to receive a copy of this email at the address above.
</label>
</div>
<cfoutput>
<input type="hidden" form="PortalContactUsForm" name="postback" id="postback" value="true">
<input type="hidden" form="PortalContactUsForm" name="mailsend" id="mailsend" value="true">
<input type="hidden" form="PortalContactUsForm" name="lname" id="lname" value="#trim(form.lname)#">
<input type="hidden" form="PortalContactUsForm" name="zip" id="zip" value="#(len(trim(form.zip)) > 5 ? left(trim(replace(form.zip, "-", "", "all")), 5) : trim(form.zip))#">
<input type="hidden" form="PortalContactUsForm" name="pin" id="pin" value="#trim(replacelist(pin, "-, ", ""))#">
</cfoutput>
</form>
</div>
<div class="modal-footer">
<button class="btn" name="CloseModalButton" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" form="PortalContactUsForm" name="SendEmailButton" id="SendEmailButton" class="btn btn-primary" value="Send">
</div>
</div>