I'm trying to add a search box to my page that will direct users to the search result page on a different site. I have the action and all of the other required data in hidden fields, to ensure it's posting correctly.
The problem is that they tack on extra data to the search term, making it an advanced search type of field. So instead of being searchTerm=X, it's expecting searchTerm=Locale(en):FQE=(KE,None,11)MY_SEARCH_TERM:And:LQE=(AC,None,8)fulltext$
How can I add that extra data around my search term, without having to hit an intermediate page to do the concatenation?
Here's what I have so far:
<form action="http://vendors.address/searchresult.do" method="post">
<input type="hidden" name="type" value="search">
<input type="hidden" name="sort" value="DateDescend">
<input type="text" name="queryId">
</form>
And I need something that can result in this type of thing:
<form action="http://vendors.address/searchresult.do" method="post">
<input type="hidden" name="type" value="search">
<input type="hidden" name="sort" value="DateDescend">
<input type="hidden" name="queryId" value="Locale%28en%2C%2C%29%3AFQE%3D%28KE%2CNone%2C11%29MY_SEARCH_TERM_HERE%3AAnd%3ALQE%3D%28AC%2CNone%2C8%29fulltext%24">
</form>
Any help would be appreciated.
You could use Javascript to do this with a hidden search field. In jQuery, it would be something like:
$("input[name='queryId']").keyup(function() {
$("#hiddenField").val("Locale%28en%2C%2C%29%3AFQE%3D%28KE%2CNone%2C11%29" + $(this).val() + "%3AAnd%3ALQE%3D%28AC%2CNone%2C8%29fulltext%24");
});
But it would break with no JS.
Edit: Yea, beat to it, didn't refresh for the answers.
You can use JavaScript to do the concatenation before the form is submitted. There are a couple ways to do this but here is the recommended approach:
Since I don't see a submit button I'm assuming you counting your users to hit the enter key to submit the form so you will need to listen to the onSubmit event and concatenate the extra info before the post is sent to server.
Give the form element an id:
<form action="..." method="post" id="searchForm">
and give the text input field an id:
<input type="text" name="queryId" id="queryId">
Add this script block after the form
<script>
document.getElementById("searchForm").onSubmit = function(){
var queryField = document.getElementById("queryId");
queryField.value = "prepend_data" + queryField.value + "append_data";
return true;
}
</script>
Or of you can use JQuery (please do) you can drop this anywhere:
<script>
$(function(){
$("#searchForm")
.submit(
function(){
$("#queryId).val("prepend_data" + $(this).val() + "append_data");
}
);
});
</script>
Hope that helps
Two things I can think of:
1. Just put the locale and stuff in hidden inputs:
<input type="hidden" name="locale" value="en" />
2. Use javascript to submit the form (this is a horrible idea -- you don't want to make your site break if Javascript is turned off).
Related
I have this code that needs to be adapted to work with something similar to the code below the commented line. If I can make it without many changes would be perfect so that I don't need to change the CSS and so. Any help? Many thanks in advance.
<!-- The code to be adapted is this: -->
<form action="" id="search-form">
<fieldset>
<input type="text" class="text" /><input type="submit" value="Search" class="submit" />
</fieldset>
</form>
<!-- The new code that I got from the web and that needs to be adapted to the old one
is the following: -->
<textarea id="Blah"></textarea><button onclick="search()">Search</button>
<script>
function search() {
var Blah = document.getElementById("Blah").value;
location.replace("https://www.google.com/search?q=" + Blah + "");
}
</script>
I'm imagining you probably want something like
document.querySelector("#searchButton").addEventListener("click", ()=>{
const value = document.querySelector("#searchBox").value;
const url = `https://www.google.com/search?q=${encodeURIComponent(value)}`;
window.location.replace(url);
});
<fieldset>
<input type="text" class="search" id="searchBox">
<Button id="searchButton">Search</button>
</fieldset>
The id attribute on HTML elements allows you to access them via JavaScript. There's a wealth of tutorials online if you want to learn JavaScript deeply, but the basics of what this is doing is:
It finds the HTML element with the id of searchButton, and adds a click listener to it --- this gets triggered whenever that element is clicked.
In that listener, we find the value of the text input with the id of searchBox.
We compose our new URL. One thing I've added here is a call to encodeURIComponent to correctly handle the cases where they try searching for something which contains a character which isn't valid in a URL --- for example, the space character etc.
It was not working as I wanted, but a little trick made it work.
Here is my final code:
<form action="" id="search-form">
<fieldset>
<input type="text" class="search" id="searchBox">
<input type="submit" value="Search" class="submit" />
</fieldset>
</form>
<script>
let myvar;
document.querySelector(".submit").addEventListener("click", ()=>{
const value = document.querySelector("#searchBox").value;
myvar = `https://www.google.com/search?q=${encodeURIComponent(value)}`;
setTimeout(callurl, 1);
return false;
});
function callurl() {
location.assign(myvar);
return false;
}
</script>
I am writing a search box in HTML that takes the user input and append it to the URL as a parameter. The code of the form looks like this.
<form name="form" action="" method="get">
<input type="text" name="id" id="idresponse">
<input type="submit" value="Submit">
</form>
This will bring the user from example.com/test.html to example.com/test.html?id=12345678 assuming they entered 12345678 at the text box.
However, if the user inputted nothing and clicked Submit, they will be brought to example.com/test.html?id=, which I don't want. How can I modify the code so that the form knows that a certain field is left blank and do not send the parameter with the URL? In this case, the desired URL would be example.com/test.html.
edit 20210405 2057 changed the id of the input from idresposne to idresponse to avoid confusion
The so-called URL parameters is the querystring of the URL.
The following code does not use jQuery, but achieves a similar effect. (written by RobG)
<form name="form" onsubmit="disableEmptyInputs(this)" action="" method="get">
<input type="text" name="id" id="idresponse">
<input type="submit" value="Submit">
</form>
<script>
function disableEmptyInputs(form) {
var controls = form.elements;
for (var i=0, iLen=controls.length; i<iLen; i++) {
if (controls[i].value == '') controls[i].disabled = true;
}
}
<script>
This will remove all the parameters but the ? will still trail the URL. i.e. the URL will be example.com/test.html? instead. However, this does not matter because they both point to the same address.
Refer to these links (kindly provided by Progman) for other ways of doing this, including using jQuery.
Delete empty values from form's params before submitting it
Delete empty values from form's params before submitting it
How can I remove empty fields from my form in the querystring?
Thanks.
I want to have a box in HTML such as this one:
Particular thing, I need to do this using only HTML (no PHP or particular langage requiring server, or particular installation).
The reason for this is that it is meant to be used for HTML pages that will be opened from a USB key, not a website, and it has to be usable by any non-expert person. So no web-server configuration or installation required, such as what would be required for PHP, if I am right.
Think about not using a Form, but just using a Javascript function.
I'm not sure if this probably is not possible due to security reasons, but it could be a solution...
function redirect() {
var input = document.getElementById("stuff");
window.location = input.value;
}
<span>NOM:</span>
<input type="text" id="stuff"></input>
<br>
<input type="button" onclick="redirect()" value="Submit"></input>
I managed to do what I needed thanks to Anders Anderson's answer. Here is the code for those interested in doing similar thing. First, for the Javascript
function redirect() {
var answergiven = document.getElementById("answergiven");
var realanswer = document.getElementById("realanswer");
var nextpage = document.getElementById("nextpage");
if(answergiven.value.toLowerCase() == realanswer.value.toLowerCase()){
window.location = nextpage.value;
}
else{
alert('Wrong answer, please try again.');
}
return false; // prevent further bubbling of event
}
And for the HTML part, there are two hidden variables that determine the real answer, and the next page to go to, and the text field for the answer
<form name="myform" onSubmit="return redirect()">
<span>Réponse:</span>
<input type="text" id="answergiven" />
<input name="tosubmit" type="submit" value="Submit" />
<input type="hidden" id="realanswer" value="theanswer" />
<input type="hidden" id="nextpage" value="thenextpage.html" />
</form>
I have used this code to show a Google web search box
<form method="get" action="https://google.com/search">
<input type="text" name="q" size="31" value=" ">
</form>
I would like to have the box prefilled with the text
"What to do in" and let the user type the location ( example type only Sydney )
so the query will be:
What to do in Sydney"
Is it possible?
I'm just a beginner and do not know much about HTML.
Your help would be very appreciated.
Thank you
Fernando
use value = "What to do in" and this will work.
If you are in HTML only, then do like this:
<input type="text" name="q" size="31" value="What to do in ">
You should build it in a way it is clear to the user his search will be appened to this line:
What to do in:
something like
<span>What to do in</span><input type="text" id="search" name="q" size="31" value=" ">
and in js or anything else:
$.get('https://www.google.co.il/search?q=what to do in ' + $('#search').val(),function(data){
//Do stuff with seach results
})
You can then append the word to the query
The issue with the above answers is that the user can just delete the whole text and start again..
so if you really want to limit it to "what to do in ..." then you should only offer up the text input for the location.. similar to what raam86's answer was.
<form method="get" action="https://google.com/search">
<label for="whattodo">What to do in</label>
<input type="hidden" name="q" id="real_input" value="what to do in" />
<input type="text" id="whattodo" onkeyup="fillForm(this.value);" />
</form>
<script>
function fillForm( _val )
{
document.getElementById('real_input').value = 'what to do in ' + _val;
}
</script>
Use label where possible - this relates the text to the input area - which means, if a user clicks on the label they'll be focused into the input box ready to type..
You'll notice that there's a hidden input and also a text input
the hidden input gets filled with "what to do in " as well as the text from the text field (as the user types, a bit of javascript is triggered called fillForm() which appends the hidden field (the query field) with the user inputted text.. this ensures that it's always going to have "what to do in" prepended to the query.
You should place
function fillForm( _val )
{
document.getElementById('real_input').value = 'what to do in ' + _val;
}
between the <head> and </head> of your HTML document.
I have Some text boxes and one submit button. I have Used HTML5 'required' validation. Its working fine. Now I want to call a function in button click when HTML5 validation does not find any Error. When The required field is not provided the button click will not call the function.
You can use the form.onsubmit handler. Assuming the form's ID is form:
var form = document.getElementById("form");
form.onsubmit = function() {
//Pre-submission validation.
//Return true or false based on whether the validation passed.
//return false will prevent the submission the form.
};
You're going to need some extra help to do this, it could be in the form of plain javascript. Personally, I'd use jQuery to help out as it will make things easier for you and account for any cross-browser consistencies. Whether or not you want to use jQuery your is choice, whether it's appropriate only for this is another conversation, the following example is just a demonstration.
Here's a hypothetical example using jQuery that achieves your validation listening functionality:
HTML
<form>
<input type="text" class="input-text" required>
<input type="text" class="input-text" required>
<input type="submit" id="submit" class="input-button" disabled>
</form>
JS
$textInputs = $('input.input-text');
$textInputs.on('keyup', function() {
var $validTextInputs = $('input.input-text:valid'),
$submit = $('#submit');
console.log($textInputs.length, $validTextInputs.length);
if($textInputs.length === $validTextInputs.length){
//all text fields are valid
$submit.attr('disabled', null);
} else {
//not all text fields are valid
$submit.attr('disabled', '');
}
});
CSS (only let's us know, visually, when the input is valid)
.input-text:valid {
background: green;
}
See the example in action here: http://jsfiddle.net/m6QXc/
Use jquery to trigger function after HTML5 form validation
<form id="myForm">
<input type="text" class="input-text" required>
<input type="submit" id="submit" class="input-button" disabled>
</form>
$("myForm").submit(function(){
// Your code
})
Well, you could try this: fiddle example extend it as you need, used jQuery though. You can add whatever you want inside:
$('#exampleForm').submit(function(e){
e.preventDefault();
// here you can call your own js methods, send form with ajax?
// or what ever you want
});