I am wanting to concatenate a few form fields into a span or div area.
I have found a script on the web that works really well for me. But it concatenates the fields into another form field.
What do I need to change to tell it to put it in a span/div.
I have made a fiddle to help explain what Im after.
http://jsfiddle.net/3ZHfB/
Cheers in advance!!
Your fiddle updated with answer, see this.
1) Replace copyPassDetails textbox with a span/div:
<div class="field">
<label for="copyPassDetails">Full Name:</label>
<span id="fullName"></span>
</div>
2) Replace textbox' val() inside bind function with span's html():
$('#fullName').html($('#Title').val() + ' ' +
$('#First_Name').val() + ' ' +
$('#Last_Name').val() );
<form method="post" action="">
<div class="field">
<label for="Title">Title:</label>
<select name="Title" id="Title">
<option value="" selected="selected">Select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Revd">Revd</option>
<option value="Prof">Prof</option>
<option value="Judge">Judge</option>
</select>
</div>
<div class="field">
<label for="First_Name"> First Name:</label>
<input type="text" id="First_Name" name="First_Name" />
</div>
<div class="field">
<label for="Last_Name"> Last Name:</label>
<input type="text" id="Last_Name" name="Last_Name" />
</div>
<br>
<br>
<div class="field">
<label for="copyPassDetails">Full Name:</label>
<!-- <input type="text" id="copyPassDetails" name="address" /> -->
<div id="copyPassDetails"></div>
</div>
</form>
<script>
$('#Title, #First_Name, #Last_Name').bind('blur', function() {
$('#copyPassDetails').html($('#Title').val() + ' ' +
$('#First_Name').val() + ' ' +
$('#Last_Name').val() );
});
</script>
Try this, i have edited
<input type="text" id="copyPassDetails" name="address" /> this to
<div id="copyPassDetails"></div> and $('#copyPassDetails').val( to $('#copyPassDetails').html(
To put the value in <div><span> tags you need to use html and for
input val
Related
I am trying to create a search form within a page using Bootstrap 5 and the following code:
<div class="row mb-5">
<div class="col-lg-10 offset-lg-1">
<form class="form-inline" role="form">
<label for="field">Find all where...</label>
<select id="field" class="form-select">
<option value="company_name" selected>Company Name</option>
<option value="federal_ein" selected>EIN</option>
<option value="state">State</option>
<option value="city">City</option>
</select>
<label for="term">includes...</label>
<input type="text" class="form-control" id="term" placeholder="Enter full/partial term" name="term">
<button type="submit" class="btn btn-primary btn-lg">Search</button>
</form>
</div>
</div>
I want the form to be inline, with the text box stretched to fill unused space in the row. I can't figure out how to achieve this. Any help on it? Thanks!
This code seems to work well. Thanks!
<form id="frmSearch" name="frmSearch" role="form" class="was-validated">
<div class="row mb-4">
<div class="col-lg-2 offset-lg-1 text-end">Find companies where...</div>
<div class="col-lg-2 text-start">
<select ID="ddlType" Class="form-control rounded" required>
<option value="" selected>Search by...</option>
<option value="company_name">Company Name</option>
<option value="city">City</option>
<option value="federal_ein">EIN</option>
<option value="state">State</option>
</select>
</div>
<div class="col-lg-1 text-center">contains...</div>
<div class="col-lg-4 d-flex">
<input type="text" ID="tbTerm" class="form-control rounded text-black" required />
</div>
<div class="col-lg-1 mx-auto">
<button type="submit" ID="btnSearch" class="btn-success btn text-white">Search</button>
</div>
</div>
</form>
I'm using <label asp-for and <input asp-for tags inside my form to carry out "Create Form" action as well as Bootstrap for looks. How do I fix this bug, it's working with asp-for, I can create and edit successfully through these fields but its looks rather twisted than user friendly.
<div class="form-group">
<label asp-for="City" class="control-label"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger"></span>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<label asp-for="Department" class="dropdown-item">HR</label>
<input asp-for="Department" class="form-control" />
<label asp-for="Department" class="dropdown-item">Sales</label>
<input asp-for="Department" class="form-control" />
</div>
<span asp-validation-for="Department" class="text-danger"></span>
</div>
</div>
Here is the result:
Before select
During select
After select
As you can see its not populating inside the text field but its there, I tested it. Maybe there is other way to do it with HTML tags?
Do you want something like this, you can use the <select> tag to implement the dropdown:
<div class="form-group">
<label asp-for="City" class="control-label"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Department" class="control-label"></label>
<select asp-for="Department" class="form-control">
<option selected>Choose Department</option>
<option value="HR">HR</option>
<option value="Sales">Sales</option>
<option value="Other">Other</option>
</select>
</div>
Result:
I have this form right here:
<form (ngSubmit)="onSubmit()" #testForm="ngForm">
<div class="form-group col">
<label for="a">a</label>
<select class="form-control" id="a" [(ngModel)]="form.a" name="a" required>
<option value="x">x</option>
<option value="y">y</option>
</select>
</div>
<div class="form-group">
<label for="b">b</label>
<input class="form-control" id="b" [(ngModel)]="form.b" name="b" required />
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">d
</label>
</div>
<div class="col text-right">
<button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid">Submit</button>
</div>
</form>
With this component-code behind:
export class FormComponent {
form = new Form();
submitted = false;
onSubmit() {
this.submitted = true;
}
}
What I want to achieve is that my button only gets enabled, when both the dropdown and the input field are filled in, which works with the required attribute, AND both checkboxes are checked, which doesn't work.
My question: Is there something like required for Checkboxes, or are there other ways to solve this problem?
Try this way:
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" [checked]="ch2" (change)="ch2= !ch2" class="form-check-input">c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" [checked]="ch1" (change)="ch1= !ch1" class="form-check-input">d
</label>
</div>
<div class="col text-right">
<button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid || !ch1 || !ch2">Submit</button>
</div>
The input form is not sending the input to the database, i even changed the Post to Put it staring sending info to the URL but thats it still did not end up in the database. By the way im using SQLite,
Could really use some help or input.
<section class="wrapper">
<div class="panel panel-default">
<div class="panel-body">
<!-- Standar Form -->
<form method="POST" action="{{ action('UploadController#handleCreate') }}" role="form">
<fieldset>
<h5>Upload Your Product's Files Here</h5>
<div class="form-actions form-group">
<input type="file" name="filepath" />
</div>
<div class="form-group">
<label for="name">
Product Name
</label>
<input class="form-control" placeholder="Name of your Product" type="text" name="name" id="name"/>
</div>
<div class="form-group">
<label for="developer_name">
Developer Name
</label>
<input class="form-control" placeholder="developer name" type="text" name="developer_name" id="developer_name"/>
</div>
<div class="form-group">
<label for="description">
The Description Of Your Product
</label>
<textarea class="form-control" rows="5" type="text" name="description"/>
</textarea>
</div>
<div class="form-group">
<label for="OS">
Compatible Operating System
</label>
<select class="form-control" name="OS"/>
<option value="Crossplatform">Cross Platform</option>
<option value="OSX">OSX</option>
<option value="Windows">Windows</option>
<option value="Linux">Linux</option>
<option value="IOS">IOS</option>
<option value="Android">Android</option>
</select>
</div>
<div class="form-group">
<label for="price">
Set The Price (if free leave as is)
</label>
<input class="form-control" placeholder="0.00" type="decimal" name="price" id="price"/>
</div>
<div class="form-group">
<label for="category">
Choose a category for your product
</label>
<select class="form-control" name="category"/>
<option value="free">Free</option>
<option value="premuim">Premium</option>
<option value="opensource">Opensource</option>
<option value="collaborativeefforts">Collabritive Efforts</option>
<option value="developertools">Developer Tools</option>
</select>
</div>
<h4>upload a thumbnail for your product</h4>
<div class="form-inline">
<input type="file" name="image" />
</div>
<hr>
<div class="form-actions form-group">
<input type="submit" value="submit" class="btn btn-primary" />
Cancel
</div>
</fieldset>
</form>
</div>
</div>
</section>
And here is the part of the controller that handles the form submission controller
public function create()
{
return View::make('developerpanel.upload.index');
}
//Handle create form submission.
public function handleCreate()
{
$product = new Product;
$product->filepath = Input::file('filepath');
$product->name = Input::get('name');
$product->developer_name = Input::get('developer_name');
$product->description = Input::get('description');
$product->OS = Input::get('OS');
$product->price = Input::get('price');
$product->category = Input::get('category');
$product->image = Input::file('image');
$product->save();
return Redirect::route('developerpanel.index');
}
Could really use the help Thanks!
Since you're uploading files, your form needs to have an enctype="multipart/form-data" attribute.
<form method="POST" action="{{ action('UploadController#handleCreate') }}" role="form" enctype="multipart/form-data">
Also, you don't want to just try to save the file object to the database like that. Check out the Laravel docs here regarding file uploads.
Use Laravel's methods, and maybe do some validation to make sure it's an image file.
validation#rule-image
html#opening-a-form
{{ Form::open(array('action'=>'UploadController#handleCreate', 'role'=>'form', 'files'=>true)) }}
...
{{ Form::close() }}
I am trying to build a simple horizontal search & filtering form using Twitter Bootstrap as can be seen in the image attached.
I am trying to build it so it adapts to different screen sizes as shown in the image. The results that I receive from my code aren't according my expectations.
<div id="search_block" class="panel-body">
<form role="form" class="form-horizontal" method="post" action="">
<div class="form-group">
<label class="col-xs-2 col-sm-2 col-md-1 control-label" for="v_search">Search:</label>
<div class="col-xs-8 col-sm-8 col-md-4">
<input type="text" placeholder="Enter Search Keywords" value="" name="v_search" id="v_search" class="form-control">
</div>
<div class="button-group col-xs-8 col-sm-8 col-md-2">
<button class="btn btn-primary" value="search" name="search" type="submit">Search</button>
<button class="btn btn-default" value="reset" name="reset" type="reset">Reset</button>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 col-sm-2 col-md-1 control-label" for="filters">Filters:</label>
<div class="col-xs-8 col-sm-8 col-md-2" id="filters">
<select class="form-control" name="section_id">
<option value="all">All Sections</option>
<option value="all">Test</option>
</select>
</div>
<div class="col-xs-8 col-sm-8 col-md-2">
<select class="form-control" name="category_id">
<option value="all">All Categories</option>
<option value="71">Test</option>
</select>
</div>
</div>
</form>
My code can be found at: http://jsfiddle.net/NB89d/
You can use the col-*-offset classes to achieve what you want.
Demo: http://www.bootply.com/126439