Here is my HTML
<form class="form-horizontal" action="/" method="POST">
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input type="text" id="email" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" id="password" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">Sign In</button>
</div>
</div>
</form>
When I submit form, on server I try to print it, I do
def post(self):
print 'data :', request.form
I get
data : ImmutableMultiDict([])
I also try
def post(self):
print 'data :', request.json
I get
data : None
What exactly I am missing here
None of your inputs have name attribute
Therefore, nothing sent.
<input type="password" id="password" placeholder="Password">
should be:
<input type="password" id="password" name="password" placeholder="Password">
ID is just for DOM
Related
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
So i'm trying to store an input from my form into a property but when I submit my console.log returns undefined in the console itself.
These are the variations I tried but didn't work
<form>
<input #in1 type="text" id="username" placeholder="username" value="5">
<input type="password" id="password" placeholder="password">
<input type="submit" (click)="onSubmit(in1.value)" id="submit" placeholder="submit">
</form>
<form #myForm="ngForm">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" id="Log-email" ngControl="Email" ([ngModel])="SUsername.Email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1" >Password</label>
<input type="password" id="Log-pass" ngControl="pass" [(ngModel)]="SPassword.pass">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<input type="button" (click)="test()" value="test">
</form>
And heres the typescript part of it
SUsername:string;
SPassword:string;
onSubmit(){
console.log(this.SUsername,this.SPassword);
}
I will do with this:
private model : any = { Email: "", pass : "" };
EDIT:
HTML Code with (ngSubmit)="onSubmit()" and [(ngModel)] (which was
already ([ngModel]))
Removed <input type="button" (click)="test()" value="test">
HTML Code:
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" id="Log-email" ngControl="Email" [(ngModel)]="model.Email" name="Email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1" >Password</label>
<input type="password" id="Log-pass" name="Email" ngControl="pass" [(ngModel)]="model.pass">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Make Sure:
you have written [(ngModel)] not ([ngModel])
A working demo with your code example:)
SUsername and SPassword should be initialized as objects
SUsername = {Email: ''}
SPassword= {pass: ''}
you need to have a name attribute for the Html tag element that is same as ([ngModel])="SUsername.Email"
I have an Angular 5 app with a login form. On iOS version 11.3 with Chrome the form auto fills the email and password fields but the form fails validation.
However, this works fine in Safari on the same device.
It also works fine in all browsers on Android.
I have tried two different ways of creating the form and both have the same behavior.
Method 1
<ngx-loading [show]="isLoading"></ngx-loading>
<div class="row">
<div class="text-center col-12">
<h2 class="form-signin-heading">Please sign in</h2>
<form class="form-signin" [formGroup]="form" (ngSubmit)="submit()">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input autofocus class="form-control" id="email" name="email" maxlength="100" placeholder="Email address" type="email" formControlName="email">
<div *ngIf="form.controls.email.touched && form.controls.email.errors?.required" class="text-danger">Required</div>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-control" id="password" name="password" maxlength="100" placeholder="Password" type="password" formControlName="password">
<div *ngIf="form.controls.password.touched && form.controls.password.errors?.required" class="text-danger">Required</div>
</div>
<button class="btn btn-lg btn-gold btn-block" type="submit" [disabled]="!form.valid || isLoading">Sign in</button>
</form>
</div>
</div>
Method 2
<ngx-loading [show]="isLoading"></ngx-loading>
<div class="row">
<div class="text-center col-12">
<h2 class="form-signin-heading">Please sign in</h2>
<form class="form-signin" name="form" (ngSubmit)="f.form.valid && submit()" #f="ngForm" novalidate>
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input autofocus class="form-control" id="email" name="email" maxlength="100" placeholder="Email address" type="email" [(ngModel)]="model.email" #email="ngModel" required>
<div *ngIf="f.submitted && !email.valid" class="text-danger">Required</div>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-control" id="password" name="password" maxlength="100" placeholder="Password" type="password" [(ngModel)]="model.password" #password="ngModel" required>
<div *ngIf="f.submitted && !password.valid" class="text-danger">Required</div>
</div>
<button class="btn btn-lg btn-gold btn-block" type="submit" [disabled]="isLoading">Sign in</button>
</form>
</div>
</div>
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>