I have a form for searching items in table
<div class="container">
<h4>Search product</h4>
<form>
<div class="row">
<div class="form-group col-md-8">
<label for="productName">Product name:</label>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" type="text" class="form-control search-box">
<div>
<div *ngFor="let product of products | async" (click)="gotoDetail(product)" class="search-result">
{{ product.name }}
</div>
</div>
</div>
</div>
</form>
</div>
And when I click the input then slides out the history of entered data and lower divs which I want to show.
How to hide the history of entered phrases?
I need only div with found products.
Turn off autocomplete in your input field.
autocomplete="off"
Turn off autocomplete
Try to add autocomplete="off" attribute to your input
Related
enter image description hereI want the second input field should be displayed only one time. From next iteration it should skip the statement of adding input field to UI.
<div class="row" *ngFor="let c of [1,2,3]" >
<div class="col-6">
<input type="text" name="first">`enter code here`
</div>
<div class="col-6">
<!-- This input field should be added only one time. Next iteration it should skip this line. -->
<input type="text" name="Second">
</div>
</div>
Not exactly sure about your condition here. If it shouldn't be repeated, wouldn't it be better to move it outside the *ngFor?
<div class="row" *ngFor="let c of [1,2,3]" >
<div class="col-6">
<input type="text" name="first">`enter code here`
</div>
</div>
<div class="col-6">
<input type="text" name="Second">
</div>
Or if for some reason you wish to have the input inside the *ngFor but only to render it once for the entire array, you could use first local variable + *ngIf.
<div class="row" *ngFor="let c of [1,2,3]; let first=first">
<div class="col-6">
<input type="text" name="first">`enter code here`
</div>
<div class="col-6" *ngIf="first">
<input type="text" name="Second">
</div>
</div>
how to display specific form after selecting item in dropdown using vuejs,i have given code below....
the below select option is in home.vue and the form is another page(Light.vue).
<div class="row">
<div class="col-md-12">
<h3>Select Device To Add</h3> <select :v-model="device" class="custSelect">
<option>CCTV </option>
<option>EV Charger</option>
<option>Light</option>
</select>
</div>
</div>
below is my form light.vue
<template>
<div>
<h1>Add Light Data</h1>
<form #submit="formSubmit">
<div class="row">
<div class="col-md-3 pr-md-1">
<va-input label="Pole Id"
placeholder=" "
type="text"
v-model="poleNewId"
required>
</va-input>
</div>
</div>
<div class="row">
<div class="col-md-14">
<va-input label="stid "
v-model="stid"
required>
</va-input>
</div>
</div>
</form>
</div>
</template>
You can use <component :is="selectedCponent"/>
https://v2.vuejs.org/v2/api/#component
So you need to create map between value of drop down and component which you want to render.
My Html
I wanted to implement a single click edit button to change all my fields to input,
Here is my HTML
<div class="col-md-3">
<div class="add-details">
<span>LemonCandy, #78, IG Circle,</span>
<span>JP Nagar Phase 1, Bangalore</span>
<span>Karnataka, 560078</span>
</div>
</div>
<div class="col-md-2">
<div class="id-details">
<span>info#lemoncanday.in</span>
<span>skipper#lemoncanday.in</span>
<span><a (click)="editDetails()" title="Edit Details">Edit Details</a></span>
</div>
</div>
<div class="col-md-2"></div>
Use input instead of span and disable it based on flag . If required do some CSS tweeks to change textbox view like span
<div class="col-md-3"><div class="add-details"><input type="text" [disabled]={{typeflag}}>LemonCandy, #78, IG Circle,</input><input type="text" [disabled]={{typeflag}}>JP Nagar Phase 1, Bangalore</input><input type="text" [disabled]={{typeflag}}>Karnataka, 560078</input></div></div><div class="col-md-2"><div class="id-details">
<input type="text" [disabled]={{typeflag}}>info#lemoncanday.in</input><input type="text" [disabled]={{typeflag}}>skipper#lemoncanday.in</input><input type="text" [disabled]={{typeflag}}><a (click)="editDetails()" title="Edit Details">Edit Details</a></input></div>
So I have a form with nested forms within. When I click submit, and if there are any required fields that are not filled, I want the boxes to highlight and for there to be an alert displayed.
What I have now works for all the fields within the Company Information field - the alert displays properly, the fields are highlighted, and the form does not get submitted. However, this does not work for the fields within Product Information. Even if there are unfilled required forms, the form continues to get submitted, and there is no invalid highlight.
I did notice, however, that if I had invalid fields in Company Information and invalid fields in Product information, all fields have invalid highlights and it does not proceed to submit. However the case where only Product Information has invalid fields does not work. Also, if I remove ng-class="{failedSubmit:model.failedSubmit}" from the product form attribute, then even in the case where both Company and Product have invalid fields, invalid Product fields do not highlight at all - so I'm puzzled as to why totalForm does not cover all the forms its wrapping.
Anyone have any insight? Thanks!
So here is my HTML:
<form name="totalForm" ng-class="{failedSubmit:model.failedSubmit}">
<div id="collapse3" class="row">
<h1 class="no-margin">Company Information</h1>
<form class="form-horizontal" role="form" name="company">
<div class="container">
<div class="col-md-12">
<div class="col-md-12">
<label for="companyName-md" class="control-label required">Company Name</label>
</div>
<input class="form-control" id="companyName-md" name="companyName"
ng-show=type="text"
ng-model="model.companyName"
required/>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<label for="companyDesc-md" class="control-label text-area-label required">Company
Description</label>
</div>
<textarea class="form-control" id="companyDesc-md" name="companyDesc"
ng-model="model.companyDesc" rows="5" required> </textarea>
</div>
</div>
</div>
</form>
</div>
<div id="collapse4" class="row email-pref">
<h1 class="no-margin">Product Information</h1>
<form class="form-horizontal" name="product" ng-class="{failedSubmit:model.failedSubmit}">
<div class="container">
<div class="col-md-12">
<div class="col-md-12">
<label for="productType-md" class="control-label text-area-label required">Product
Type</label>
</div>
<select class="form-control" id="productType-md" name="productType"
ng-options="item for item in productTypeList" rows="3"
ng-model="model.productType" required></select>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<label for="productDesc-md" class="control-label text-area-label required">Product
Description</label>
</div>
<textarea class="form-control" id="productDesc-md" name="productDesc"
ng-model="model.productDesc" rows="5" required></textarea>
</div>
</div>
</div>
</form>
</div>
</form>
And here is my CSS class:
form.failedSubmit .ng-invalid
{
border:1px solid #f00;
}
And here is the relevant javascript code - this is fired upon pressing a submit button:
if (!$scope.totalForm.$valid || !$scope.product.$valid){
$scope.showAlerts.push($scope.alerts[0]);
window.scrollTo(0, 0);
$timeout(function(){
$scope.showAlerts.pop();
}, 3000);
$scope.model.failedSubmit=true;
}
I'm answering without testing it so let me know if you need example... first, my recommendation is to use one form, with different divs that you can toggle with ng-show. is there a special reason you want nested forms? second, labels don't need to have the required field and you also wrote twice few lines with the col-md-12. third, where are you submitting your form? I didn't see it in your code. let me know if you solved it.
I'm using bootstrap 3, which includes jquery 1.11.2.min.js. I'm updating a search webpage with two textfields: keyword and city,state,zip. I have a script for the search results that needs to pull the user input that's typed into these two search textfields for finding the desired search results.
Visual explanation:
My search bar with placeholders and search button:
My search bar with my user input (searching for an engineering job in Boston):
In the HTML, there is no unique value (value="Engineer" or value="Boston") created for my engineering job in Boston search:
Without value="Engineer" and value="Boston" I cannot tell my script to display search results of engineering jobs in Boston. Where do I find/create this to pull into my search script?
Is this located in the bootstrap.js file anywhere? I'm having trouble figuring out where/how this form is pulling the user input value (without having to use value="" for each input).
Your help is much appreciated - my form is below.
<div id="somebanner" class="somebanner-bgsearch-red hero1 hidden-xs">
<div class="container-fluid">
<div class="top-section">
<div class="container">
<form class="form-inline no-margin center-block" action="http://www.somesite.com/unknown" method="POST" role="form">
<div class="row">
<center>
<fieldset>
<!-- Search input-->
<div class="form-group center-block">
<div class="col-sm-4">
<input id="keyword" name="keyword" type="search" placeholder="Keyword" class="form-control input-lg">
</div>
</div>
<!-- Search input-->
<div class="form-group center-block">
<div class="col-sm-4">
<input id="location" name="location" type="search" placeholder="City, State, or Zip Code" class="form-control input-lg">
</div>
</div>
<input type="hidden" name="unknown" value="unknown">
<!-- Button -->
<div class="form-group center-block">
<div class="col-sm-2">
<button type="submit" id="btn-search" name="btn-search" class="btn btn-primary btn-lg btn-tusaj">Search</button>
</div>
</div>
</center>
</fieldset>
</div>
</form>
</div>
</div>
</div>
</div>
Here's the link to the bootstrap.js code: http://getbootstrap.com/dist/js/bootstrap.js
Herer's the link to the jquery code:
https://code.jquery.com/jquery-1.11.2.js
You're trying to use Bootstrap for modifying HTML, but Bootstrap is a CSS framework used for responsive design. It's incapable of doing such HTML modification. You need to use jQuery:
$(document).ready(function(){
$("#btn-search").click(function(e){
e.preventDefault();
var x = $("#keyword").val();
var y = $("#location").val();
$("#keyword").attr("value", x);
$("#location").attr("value", y);
});
});
That should do the work. If you have further questions, let me know in the comments.