I am trying to get the input from my main sites search bar to be sent to the search bar of my second site and have the results of the second sites search appear.
I have played around with some code that almost works, however instead of searching the second site it instead adds the search input onto the url.
<div class="form-group">
<form id="search-products" method="get">
<input type="search" class="form-control input-thick-border" id="test" placeholder="Search..." name="keyword">
</form>
<script type="text/javascript">
document.getElementById('search-products').onsubmit = function() {
window.location = "http://website.com/Search" + document.getElementById('test').value;
return false;
}
</script>
</div>
So if I type "pen" into the first search bar then it will link to "website/searchpen" which doesn't exist so it redirects to the "not found" page. I feel like I am very close I am just missing some code that takes the input from the first search bar and searches for it in the second search bar. Any help or ideas will be much appreciated.
You don't actually need JavaScript for this. A normal form submit does exactly what you're looking for. Just set the form action.
<form method="get" action="https://example.com/search">
<input type="search" name="keyword" />
</form>
On form submit, it will go to something like:
https://example.com/search?keyword=Whatever+the+user+typed+in
Related
I am trying to build a page that would allow a user to input text into a text field and hit enter on their keyboard and it would return the top 10 Wikipedia entries with that text.
Currently, my concern is that the page refreshes every time it fetches the JSON. I attempted the e.preventDefault() method, as I read about on other questions, but it isn't working. Can someone help me understand why this auto-refresh is happening, and how to fix it? Thank you.
Here is my HTML:
<div class="container-fluid">
<form action="#">
<input id="search" name="query" onkeyup="" type="text"></input>
</form>
</div>
<div class="main"></div>
</div>
And here is my Javascript:
$(document).ready(function() {
$("#search").on("keyup", function(e) {
// attempt to prevent page refresh
e.preventDefault();
// if key pressed is "enter"
if (e.keyCode == 13) {
// retrieve user input
var search = document.getElementById("search").value;
// build Wikipedia API url
var request = "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + search + "&format=json&callback=?";
$.getJSON(request, function(json) {
var x = json.query.search[0]["snippet"];
$(".main").html(x);
});
};
});
});
Here's a link: https://codepen.io/lieberscott/pen/RLVaGE
Because you submit the form (pressing enter does that). The form submits to the current page which looks like a reload.
<form id="searchform>
<input id="search" name="query" onkeyup="" type="text"></input>
</form>
$('#searchform').on('submit', function(e){
e.preventDefault();
// your magic here.
});
The preventDefault stops the key UP, but by that time, you've already started submitting. The poreventDefault stops the enter getting input as text (you can check this with a textarea). If you'd change it to a letter, say A, you'd type the A, but not see it.
You can also remove the form itself, keeping just the input, if that doesnt create other issues, resulting in less HTML, which is nice.
Remove <form> tag from your HTML.
You are using a form and on enter/return it will try to submit the form.
Unless there is a button type="submit" or input type='submit' remove the form and use only input
<div class="container-fluid">
<input id="search" name="query" onkeyup="" type="text"></input>
</div>
<div class="main"></div>
</div>
I'm simply trying to get the value of an input box embedded in a form tag.
For example, this works just fine.
<div>
<label>First Name</label>
<input id="firstName" type="text" required />
</div>
<button type="submit" onclick="getName()">Submit</button>
<script type="text/javascript">
function getName() {
var name = document.getElementById('fistName').value;
console.log(name);
}
</script>
This outputs whatever value is enter in the console when the submit button is clicked. However if I put it in a form like below it doesn't return anything.
<form>
<div>
<label>First Name</label>
<input id="firstName" type="text" required />
</div>
<button type="submit" onclick="getName()">Submit</button>
</form>
Does the form tag add some protection? How can I get the value out of an input tag inside a form?
it doesn't return anything
Yes it does.
However, since you're submitting a form, the page is also immediately refreshing and you're starting over from scratch.
The form isn't "protecting" anything. The code is doing exactly the same thing in both cases. But in the second case the form is also doing something else (loading the page) before you've physically had time to see the result.
Button of type submit refreshes the page. Also the console gets cleared. So it does output but gets immediately cleared. Try changing the button type to "button". Then it will not refresh the page and you will see the output.
I've been trying for some time now (some time = whole day) to figure out why I have this strange problem with my form. I have a client who wants a stand-alone HTML page running locally which would display one form with couple of textbox and one button. After info is entered and user click that button, a second form should show up with new textboxes. Form can't have a redirection to another website or file. It all has to be in that (HTML) file.
I figured out this would be easiest to do with jQuery but loading whole library just to hide one form is plain stupid. So I take a look at other option and decided to use pure Javascript.
The problem is when I click "NEXT" first time the 1st form disappear but then apear a second later like some sort of request is sent. Bellow is the code I currently have. I tried making an JSFiddle but browser blocks every time I access it.
Javascript:
function hideAll() {
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'none';
showFirstForm();
}
function showFirstForm() {
if (document.getElementById('second').style.display == 'block') {
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'none';
}
}
function showSecondForm() {
if (document.getElementById('first').style.display == 'block')
{
document.getElementById('second').style.display = 'block';
document.getElementById('first').style.display = 'none';
}
}
HTML:
<body class="if5" onload="hideAll()"> // I'm loading hideAll() on refresh to hide second form
....
<!-- FORM 2 -->
<form id="first" action="#" class='tx_anmelden' method="post" autocomplete="off" >
<filedset>
<label for="name"> Your name </label>
<input name="name" value="MyName" /></input>
<button onClick="showFirstForm()">Next</button>
</filedset>
</form>
<!-- FORM 1 -->
<form id="second" class='tx_anmelden'>
<fieldset>
<label for="name"> Your name </label>
<input name="name" value="MyNaffffffme" /></input>
<button onClick="showSecondForm()">Next</button>
</fieldset>
</form>
....
References:
getElementByID
Besides the fact that you have your form id's switched, <button> has a default type of submit. So when your button is clicked it is posting the form to #. So correct your form ids, and then change your button code type to button:
<button type="button" onClick="showSecondForm()">Next</button>
Here are some docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
Here is a working jsfiddle using the corrected code: http://jsfiddle.net/789SP/
First off, any button in a form that doesn't have a type attribute or has a type attribute of submit will by default submit the form on click.
Second, it looks like you are trying to implement some sort of wizard. If this is true you don't want each part to be it's own form because at the end you're going to want to send all of this data to the server which won't work if it's in two forms.
The entire thing needs to be in one form with sections inside that you show/hide. To navigate between the sections you'll want to use
<button type="button" onClick="showSecondForm()">Next</button>
To do wizards is always a pain in the butt. Once you start handling validation you need to figure out which step has an error in it and show that section, or if the user uses the back button they might expect the form to go back to step one. You might want to search for a third party solution that provides some of the boiler plate functionality. These might help
This should get you off to a good start though.
Edit
Don't attempt this from scratch. Use this
<!-- FORM 2 -->
<form id="first" action="#" class='tx_anmelden' method="post" autocomplete="off" >
<fieldset> **fieldset was misspelled as "filedset"**
<label for="name"> Your name </label>
<input name="name" value="MyName"></input> **your input had /> at it's end, which is unfortunately wrong**
<button onClick="showFirstForm()">Next</button>
</fieldset> **fieldset was misspelled as "filedset"**
</form>
<!-- FORM 1 -->
<form id="second" class='tx_anmelden'>
<fieldset>
<label for="name"> Your name </label>
<input name="name" value="MyNaffffffme"></input> **your input again had /> at it's end, which is unfortunately wrong**
<button onClick="showSecondForm()">Next</button>
</fieldset>
</form>
I am having a simple form following is the code
<form action="search.html" method="get" accept-charset="utf-8" id="search-within-form"">
<input type="hidden" name="within" id="within" value="">
<input type="text" name="q" value="" id="search-within" autocomplete="off" class="search-within-results inactive" title="">
<input type="submit"/>
</form>
I am entering test data for search in the field and click submit, in the URL I see is
/search.html?within=&q=test+data+for+search
But I need the url to be like tis
/search.html?within=&q=test data for search
I know this can be done by using java script form submit etc.. I like to know is there some way I can achieve this using html?
Thanks in advance.
Your URL will never display that way in a browser. Either the text will be seperated by those '+' characters or it will be seperated by '%20's. Is there a reason you need the URL to display in that fashion? Ultimately it comes down to how the browser displays the URL in the address bar. '%20' is code for a space. You might be able to develop a browser extension that would make them display with the spaces, but that sounds pretty terrible to me.
Why don't you clean the text at the place you retrieve the value from the form ? Is there any reason why you can't do that ?
I'm writing a new tab extension for Firefox, and I'd like to have a box that you can type in and have it search Google. I really don't want to use a custom Google search, just because I feel like it's inconsistent and seems cheap.
All that it's supposed to do is add your query to the end of the google URL (in the correct formatting, of course) and redirect you to that page. I have it working sometimes, but not all of the time.
Here's the code I have:
JS:
var textstring;
//Gets the text from the form
function getQ() {
textstring = document.forms['Search'].elements[0].value;
}
//Does a Google Search
function googleSearch() {
window.location ="http://www.google.com/search?q="+textstring;
}
//main function to run everything
function main() {
getQ();
googleSearch();
}
HTML:
<form name="Search" >
<div id="test1">
<input type="text" name="q" size="31" maxlength="255" value="" />
</div>
<div id="test2">
<input type="button" value="Google Search" onclick="main();" />
</div>
</form>
Not sure why that last /form isn't showing up, but that's in there just so you guys know.
It works like 25% of the time. I can't figure out what's wrong with it. Could it just be that I'm testing it locally? I've been testing it in Firefox, but it seems to have the same issue in IE or Chrome, as well.
Why don't you just submit to google (and avoid all the javascript) ?
<form name="Search" method="get" action="http://www.google.com/search" >
and use a normal submit button like
<input type="submit" value="Google Search" />
Since you have named the input element q and the method of the form is get it will create the correct url.
example: http://jsfiddle.net/gaby/gxun9/