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.
Related
I'm working on a project for my internet programming class and I'm not quite sure where I made my mistake here. I had this project at least running and able to test locally up until last night when I switched to using hooks (or trying to anyway). When I run npm start this is what logs into the console on Firefox.
Uncaught TypeError: this is undefined
App App.js:67
React 11
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
js scheduler.development.js:571
js scheduler.development.js:633
factory react refresh:6
Webpack 24
App.js:67
App App.js:67
React 11
performConcurrentWorkOnRoot self-hosted:1406
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
(Async: EventHandlerNonNull)
js scheduler.development.js:571
js scheduler.development.js:633
factory react refresh:6
Webpack 24
I had not changed any of my import statements, I had only added useState. VSCode shows me no errors in my code, so I believe something is out of place, but that's why I'm here to ask.
//import logo from './logo.svg';
import './App.css';
import './form.css';
import React, { useState } from 'react';
function App(){
const [showText, setShowText] = useState(0);
const radioHandler = (showText) => {
setShowText(showText);
};
// constructor = (props) => {
// super(props);
// this.state = {
// status: 0
// };
// handleInputChange = handleInputChange.bind(this);
// handleSubmit = handleSubmit.bind(this);
// }
const handleInputChange = (event, value) => {
console.log(value);
}
const handleSubmit = (event) => {
event.preventDefault();
}
return (
<div className="form_css">
<form onSubmit={handleSubmit}>
<div className="general_info_container">
<div className="name_container">
<label className="f_name">First Name:</label>
<input
name="f_name"
type="text"
value={this.state.f_name}
onChange={handleInputChange}
placeholder="Please enter your first name"
/>
<label className="m_name">Middle Initial:</label>
<input
name="m_name"
type="text"
value={this.state.m_name}
onChange={handleInputChange}
placeholder="Please enter your middle initial"
/>
<label className="l_name">Last Name:</label>
<input
name="l_name"
type="text"
value={this.state.l_name}
onChange={handleInputChange}
placeholder="Please enter your last name"
/>
</div>
<div className="address_container">
<label>Street:</label>
<input
className="street"
type="text"
value={this.state.street}
onChange={handleInputChange}
placeholder="123 Main Street"
/>
<label>City:</label>
<input
className="city"
type="text"
value={this.state.city}
onChange={handleInputChange}
placeholder="City Name"
/>
<label>State:</label>
<input
className="state"
type="text"
value={this.state.state}
onChange={handleInputChange}
placeholder="New York"
/>
<label>Zip Code:</label>
<input
className="zip_code"
type="number"
value={this.state.zip_code}
onChange={handleInputChange}
placeholder="12345"
/>
</div>
<div>
<label>
Have you exercised regularly within the past six (6) months?
</label>
<input
className="exr_yes"
type="radio"
value="true"
onChange={handleInputChange}
/>
<input
className="exr_no"
type="radio"
value="false"
onChange={handleInputChange}
/>
<br></br>
{/* Testing radio button hide/show */}
<label>Do you have any chonic medical conditions? TEST TEST TEST TEST TEST TEST</label>
<input
className="chronic_yes"
type="radio"
value="true"
checked={showText === 1}
onClick={(e) => radioHandler(1)}
/>
<input
className="chronic_no"
type="radio"
value="false"
checked={showText === 2}
onClick={(e) => radioHandler(2)}
/>
{showText === 1 &&
<div>
<p>Test showing</p>
</div>}
{showText === 2 & <p></p>}
<div>
<label>Please enter any chronic conditions you have below:</label>
<input
className="chronic_medical"
type="text"
value={this.state.chronic_show}
onChange={handleInputChange}
/>
</div>
{/* Testing radio button hide/show
{/* Testing radio button hide/show */}
<label>Are you currently taking any medication?</label>
<input
className="meds_yes"
type="radio"
value="chronic"
onClick={(e) => radioHandler(1)}
/>
<input
className="meds_no"
type="radio"
value="chronic"
onClick={(e) => radioHandler(2)}
/>
<div id="meds_show">
<label>Please list any medications you take below:</label>
<input
className="meds_show"
type="text"
value={this.state.meds_show}
onChange={handleInputChange}
/>
</div>
{/* Testing radio button hide/show */}
{/* Testing radio button hide/show */}
<label>Do you, or have you had, any injuries?</label>
<input
className="injury_yes"
type="radio"
value="ture"
onChange={handleInputChange}
/>
<input
className="injnury_no"
type="radio"
value="false"
onChange={handleInputChange}
/>
<div id="injury_show">
<label>
Please enter any injuries you have had in the past below:
</label>
<input
className="injury_show"
type="text"
value={this.state.injury_show}
onChange={handleInputChange}
/>
</div>
{/* Testing radio button hide/show */}
<label>
Has a doctor ever suggested you only participate in medically
supervised exercise?
</label>
<input
className="supexr_yes"
type="radio"
value={this.state.supexr_yes}
onChange={handleInputChange}
/>
<input
className="supexr_no"
type="radio"
value={this.state.supexr_no}
onChange={handleInputChange}
/>
</div>
</div>
</form>
</div>
);
}
export default App;
And please, if you have any tips for a beginner they would be much appreciated!
The error is telling you exactly what is going wrong: this is being referenced and is undefined.
I can see you've commented out some lines, which looks as though you've moved away from using Class components to Functional components. Class components would understand this, but as you're now using a Functional component constructs like this.state.f_name are meaningless.
I don't want to re-write your code, but just want to point out that you probably want to do something like:
const [firstName, setFirstName] = useState("");
....
const handleInputChange = (event, value) => {
if(event.target.name == 'f_name'){
setFirstName(value);
}
console.log(value);
}
...
<input
name="f_name"
type="text"
value={firstName}
onChange={handleInputChange}
placeholder="Please enter your first name"
/>
You need to do something similar for all other input fields, and then tidy up the code.
I suggest you always start with something small (remove all other fields and just get one field working).
https://reactjs.org/docs/getting-started.html is an external starting place to get a better understanding of React. Happy coding.
You use this.state in your input field value but you are using hooks. You can create all your state variable using useState. Like the below:
const [inputValue, setInputValue] = useState({
f_name: '',
m_name: '',
...
})
return (
<div>
...
<input
name="f_name"
type="text"
value={inputValue.f_name}
onChange={handleInputChange}
placeholder="Please enter your first name"
/>
</div>
)
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 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/
I am trying to build an app that lets users find other users with a specific combination of skills. I ask the users to select which skills they are looking for via checkboxes but I'm not sure how to request for the status of that checkbox in my function.
My function currently is:
UserInfo.find()
.where('skill1').equals('')
.where('skill2').equals('')
.where('skill3').equals('')
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});
It works properly if I set the equals('') to true or false but I'm not sure how to set it dynamically. My HTML code for the checkboxes is:
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1"/>
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2"/>
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3"/>
</div>
FIND SKILL
</form>
How can I create and integrate a function to check the value of the checkbox and set the value of the required skill to either true or false?
Thanks in advance for your help.
The problem is that you are using an <a> element to perform the request to the server instead of <input type="submit">. Without a submit button, the elements on your form will not be submitted with the request. Modify your html to this
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1" />
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2" />
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3" />
</div>
<input type="submit" value="FIND SKILL" />
</form>
then in your Node.js code (I assume you are using express), you can get the checkbox values as query parameters as follows:
//I'm assuming the req parameter is passed in to the express get() method
UserInfo.find()
.where('skill1').equals(req.query.skill1)
.where('skill2').equals(req.query.skill2)
.where('skill3').equals(req.query.skill3)
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});