I have a form as detailed below. It uses a post method to send data to getUsername.php. This file echoes some JSON results from mysql db.
Am wondering how do I grab this data? When I hit submit it navigates to the file and displays the JSON. I want to grab the JSON and stay on the same page or move to a different one!
I have kept the php file simple because the data is also used for returning data to my android app.
<div class="well bs-component">
<form id ='formLogin' action="http://localhost/getUsername.php" method="post" class="form-horizontal">
<fieldset>
<legend>Sign In</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input name='email' type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input name='password' type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
I believe this cannot be done from a form. I instead used jquery post function to return data
Related
When I am using ngFor directive in the form tag, the entire form will disappear. Can anyone guide me on how I can fix this issue?
<form #myforms="ngForm" *ngFor="let i of editaddress">
<div class="p-3 p-lg-5 border">
<div class="form-group row">
<div class="col-md-12">
<label for="c_fname" class="text-black">Save this address as<span class="text-danger">*</span></label>
<input type="text" class="form-control c_fname" value="{{i.title}}" name="title" [(ngModel)]="location.title" #title=ngModel>
</div>
<div class="col-md-6">
<label for="c_fname" class="text-black">First Name<span class="text-danger">*</span></label>
<input type="text" class="form-control c_fname" value="{{i.first_name}}" name="fname" [(ngModel)]="location.first_name" #fname=ngModel>
</div>
<div class="col-md-6">
<label for="c_lname" class="text-black">Last Name<span class="text-danger">*</span></label>
<input type="text" class="form-control c_lname" value="{{i.last_name}}" name="lname" [(ngModel)]="location.last_name" #lname=ngModel>
</div>
</div>
</div>
<div class="col-lg-12">
<input type="submit" class="btn btn-primary btn-lg btn-block" value="Save" (click)="saveAddress(location)">
</div>
</div>
</div>
Since you did not show any part of the underlying controller, the only thing I can do is inform you that the property editaddress would be an empty array. Therefore it would not render anything.
If it flashes and disappears, it means that through your life cycle the array may have content, but at some point the array is set to [] which updates the the markup accordingly.
This might be something simple that I am missing but I cant get though this. I am using bootstrap 3 in my application. In my form I have some controls like dropdowns, textbox, labels etc. See example as below:
<div class="modal-body">
<form role="form" name="form" class="form-body">
<div class="form-group">
//form label here
<div class="m-grid-col-sm-5">
//form element here
</div>
</div>
</form>
<div>
Above is just a example. The issue is when I run my app, I can see is the label is always above the control. What I want is the label on the left and the form control (dropdown,textbox etc) on the right.
You can see I created a sample jsfiddle at:
https://jsfiddle.net/aman1981/xprh2tno/8/
Please ignore the modal class as the issue is not I am having is not at the modal but other forms within my app as well.
I have tried adjusting and using different class but looks like its not adjusting well.
You need to refer the Horizontal Form section in the documentation here: http://bootstrapdocs.com/v3.0.3/docs/css/#forms
HTML:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Demo: https://jsfiddle.net/xprh2tno/12/
You Can try this Code here
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="name" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="sex" class="col-xs-2 control-label">Sex</label>
<div class="col-xs-10">
<select name="sex" class="auto-width setup-inline form-control input-medium" required>
<option value="">---Please select---</option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10 text-right">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
I am trying to build a blog with my html5 webiste. I have created the form for comment but I have no idea how can I make user to post comment to that post. i have comment and likes counter fixed as I do not know what to do.
<!-- Comment Form ============================================= //-->
<div id="respond" class="respond clearfix">
<h3 class="comment-respond-title">Leave a <span class="comment">Comment</span></h3>
<form id="appointment-form" action="#" method="post" class="appointment-form clearfix">
<div class="form-group form-md-line-input form-md-floating-label">
<input id="name" type="text" class="form-control">
<label for="name">Name</label>
</div>
<div class="form-group form-md-line-input form-md-floating-label">
<input id="phone" type="text" class="form-control">
<label for="phone">Phone Number</label>
</div>
<div class="form-group form-md-line-input form-md-floating-label">
<input id="address" type="text" class="form-control">
<label for="phone">Address</label>
</div>
<div class="form-group form-md-line-input form-md-floating-label">
<textarea id="textarea" rows="4" class="form-control form-textarea"></textarea>
<label for="textarea">Textarea</label>
</div>
<div class="btn-wrapper">
<button type="submit" class="btn btn-make-app">Submit comment </button>
</div>
</form>
</div>
You need to process the form data on the webserver using whatever server-side language suits you best. For simple sites like this the simplest choice would be PHP. Read through the available docs at http://php.net/, that site has excellent documentation.
I know that with ruby you can use the scaffolding command, and it'll make the html form for you. But i already create the HTML Form manually, and i don't know how to connect your existing HTML Form to a database using Ruby. I create the HTML around Bootstrap framework, and place the form within a Modal.
Here is a snippet of my HTML Form:
<div class="modal fade" id="signModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h6 class="modal-title2">Sign Up Form</h6>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="InputEmail">Email</label>
<input type="email" class="form-control form-control-inline" id="InputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="InputFirst">First Name</label>
<input type="text" class="form-control form-control-inline" id="InputFirst" placeholder="First Name">
</div>
<div class="form-group">
<label for="InputLast">Last Name</label>
<input type="text" class="form-control form-control-inline" id="InputLast" placeholder="Last Name">
</div>
</form>
<label for="mobilePhone">Mobile Phone</label>
<form class="form-inline">
<div class="form-group">
<input type="tel" class="form-control" id="mobilePhone" placeholder="Mobile Phone">
</div>
<div class="form-group">
<select class="form-control">
<option>Android</option>
<option>iOS</option>
</select>
</div>
</form>
<div class="formButton">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
</div> <!-- End Modal -->
I'm still new to Ruby. Hope i explained my question well. Thanks a bunch! :D
You have to use rails form or simple form gem to convert your form. Please check rails guide or simple form documentation for details.
I have been unable to get First and Last name fields on the same line, and at half the width of the other lines - email, password, etc.
I have tried various changes to including the addition of "form-horizonal", col-xs-6, but didn't solve it.
I would like to make the well look like this (currently the are all the same sized, stacked on top of each other):
Excerpt of index.html.erb:
<form class="form-signin col-sm-4 well" role="form">
<h2 class="form-signin-heading">Sign Up</h2><hr>
<form class="form-inline" role="form">
<form class="form-horizontal">
<div class="form-group col-xs-6">
<label class="sr-only" for="#">First name</label>
<input type="text" class="form-control" id="#" placeholder="First name">
</div>
</form>
<form class="form-horizontal">
<div class="form-group col-xs-6">
<label class="sr-only" for="#">Last name</label>
<input type="text" class="form-control" id="#" placeholder="Last name">
</div>
</form>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Type email again">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<div class="">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
</form>
</form>
All help greatly appreciated.
Full index.html.erb -
https://gist.github.com/attatae/11022245
Bootstrap 3 Grid Overview (yes, I looked too):
http://getbootstrap.com/css/#grid
Another related question that I looked at, but didn't solve:
Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?
Here is what I came up with
I hasten to add that the solution may be different because of the fact that it's bootstrap. My solution doesnt take that into consideration at all, because I'm not familiar with it. It may be as easy as changing some of the classes. Good luck to you...