I have a Search field which currently fires when the Search button is clicked after a text input is given in the field. The code is as following:
<div class="form-group">
<input type="text" class="form-control" id="Search" ng-model="searchkey">
</div>
<button type="submit" ng-click="searchfunc(searchkey)">
Search
</button>
How do I fire this Search through the Enter key on the keyboard as well when an input is entered on the Search field?
HTML:
<input type="text" class="form-control" id="Search" ng-model="searchkey" ng-keydown="myFunc($event)">
Controller:
$scope.myFunc = function(keyEvent) {
if (keyEvent.which === 13) {
// do stuff
// here you can call the function and pass a parameter: "searchfunc($scope.searchkey);"
}
}
Here is the working example: http://jsfiddle.net/Sj4ZU/62/
Related
Since I wanted an application that would act more like a search engine, I have used custom search.ai. However, in the production environment, I see queries and subscription keys, I have to enter. I wish to obtain these codes, so could you please explain how I go about getting them.
Your help is greatly appreciated!
You can use :
<form method="GET" action="https://www.bing.com" target="_blank">
Search Bing: <input type="text" name="q" placeholder="Search..."/>
<input type="submit" value="Search"/>
</form>
And if you want to do a custom site search then you can use:
var q = document.getElementById("query");
var val= document.getElementById('hidden').value = "+site:reddit.com";
document.getElementById('search').onclick = function() {
window.location.href='http://bing.com/search?q='+q.value+val;
};
// Submitting value when 'Enter' is pressed
document.addEventListener("keydown", event => {
if (event.isComposing || event.keyCode !== 13) {
return;
}
window.location.href='http://bing.com/search?q='+q.value+val;
});
<input id="query" type="text" name="q" maxlength="255" placeholder="Search in the site" value="">
<input id="hidden" name="q" type="hidden">
<input id="search" name="q" maxlength="255" placeholder="Search in the site" type="button" value="Search">
You can also use this to open images,videos, etc. directly.
I am building a search bar which I want to be disabled unless the user enters something. Appreciate any help to make this work.
This is my handlebars code:
<div class="searchWrapper">
<form action="/founduser" method="POST" class="searchBar">
<input type="hidden" id="groupid" name="groupid" value={{this.groupid}}>
<input type="text" name="searchBar" id="searchBar" placeholder="Enter the user's email ID"
value="{{this.term}}" />
{{!-- <i class="fas fa-search"></i>
<input type="submit" value="" id="submit"> --}}
<button type="submit" class="btn-search" id="user-search-btn"><span class="icon search"
disabled></span></button>
</form>
</div>
and I am running a JS check to alternate
const searchButton = document.getElementById('user-search-btn');
const check = () => {
if (searchButton !== "") {
searchButton.disabled = false
} else {
searchButton.disabled = true
}
}
searchButton.onkeyup = check
Where am I going wrong?
Sorry, I figured where I was going wrong. In my code I was checking if searchButton was empty, however what I should have done was to check the value inside the <input type="text" name="searchBar" id="searchBar" placeholder="Enter the user's email ID" value="{{this.term}}" />.
I am using ejs template, expressjs, and mongoose. not able to update existed data through form while click on edit button and as well not able to delete it . I want to delete when user click a button as well when user click on edit button it show form and allow him to edit. I already wrote get route , it is working fine.
**Update route:**
router.put('/success123' , function (req, res) {
// const id = req.params.id;
Campaign.findById(id)
.then(campaign => {
campaign.Title = req.body.title;
campaign.Description = req.body.Description;
campaign.save().then(updatePost => {
res.render('success123');
});
});
});
**Delete route**
router.delete ('/delete/:id' , function (req, res){
Campaign.findByIdAndDelete(req.params.id)
.then(deletedPost => {
res.render('success');
});
});
I am getting error and cant figure it out . Event it is not showing any error message in my console. both deleting and updating parts not working and i am able to success fully get route while user click on edit campaign button.
My ejs template for update : THIS IS MY EJS TEMPALTE WHERE I AM SENDING UPDATE INFORMATION THROUGH FORM
<div class="row p-4">
<div class="col-md-7">
<form action="/success123" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="title">Title</label>
<input type="text" value="<%=camplist.Title%>" class="form-control" name="title" id="title" placeholder="Enter The Title">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea value="" name="description" id="description" class="form-control" placeholder="Enter your content here" rows="10"><%=camplist.Description%></textarea>
</div>
<div>
<input class="form-control" name="rules" type="hidden" placeholder="Enter The Title">
<textarea name="rules" id="editor"></textarea>
</textarea>
</div>
<div class="form-group">
<label for="file">Upload Your Banner Image </label>
<input type="file" class="form-control" id="file" name="uploadedFile" accept="image/jpeg, image/jpg, image/png, image/bmp">
</div>
<button class="btn btn-outline-success btn-lg" type="submit">Update Post</button>
</form>
I am getting error and cant figure it out . Event it is not showing any error message in my console. both deleting and updating parts not working and i am able to success fully get route while user click on edit campaign button.
I have created a slider as in input field. I am not able to get its value in formGroup. I am stucked.
My code:
<form [formGroup]="Form" novalidate (ngSubmit)="BasicDetail(Form.value)>
<div class="col-md-8">
<div class="drags">
<input class="ex6" type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5"/>
</div>
</div>
</form>
Help needed.
Make sure input is slider type, meaning range
type="range"
If you're going to create a submit form fucntion where you feed your form, then it's template-driven, so get rid of your formGroup property, (assuming this is what you want since you've shown no effort on the component.ts side)
Give your form a reference form
<form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
Create a button to submit
<button class="btn btn-primary"type="submit"> Submit </button>
Make sure to give your form input a name, and assign it ngModel
If you want also direct access, create a two-way binding, say with variable called rangeValue
[(ngModel)]="rangeValue"
Make sure you're actually using real range input types, I don't know where you got data-slider from
<form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
<div class="col-md-8">
<div class="drags">
<input class="ex6"
type="range"
min="0" max="10"
step="1"
name="someRange"
[(ngModel)]="rangeValue"
ngModel/>
</div>
</div>
<button class="btn btn-primary"type="submit"> Submit </button>
</form>
Inside your component.ts, declare variable and try to log it on submit
rangeValue = 5;
constructor( ) {}
ngOnInit() {
}
BasicDetail(form: any) {
console.log(this.rangeValue);
console.log(form.someRange);
}
I have this HTML code
<div id="nodate" style="display:none">
<span id="A">
<input type="submit" value="Close" onclick="toggle();" a href=”#”>Text</input>
</span>
There are no dates here. Select another.
</div>
<input type="submit" value="Fri Nov 8th, 2013" onclick="toggle();"></input>
I have an input for the close function which shows a button. But I want to assign this onclick action to an image or text instead of an input button. I have tried many ways but cant seem to get it.
For an image:
<input type="image" src="Image.jpg" onclick="toggle();" />
You could also use:
<button onclick="toggle();"><img src="Image.jpg" /></button>
Note, if you don't want the form to submit when you click on the button, you'd want to have:
<button type="button" onclick="toggle();"><img src="Image.jpg" /></button>
For text, you could just use a hyperlink:
Text
Or:
Text
Using Jquery you can do that
$("#imgclick").click(function (e) {
toggle();
//even better //$("#idtarget").toggle();
});
<img src="..." id="imgclick">