So this was brought to my attention today, that our website search field does not work in chrome... I cannot click and enter text into the text field, nor click the search icon to initiate searching...
Sorry I do not know the specifics as to what is causing this, nor did I develop this. One of our developers who left quite some time ago did. I am now in charge of trying to figure this out.
FireFox and IE 11 seems to working fine.
Any insight is greatly appreciated.
<div class="searchbox" id="searchbox">
<script type="text/javascript">
function RunSearch() {
window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value;
}
</script>
<div class="formSrchr">
<input type="text" size="20" name="qt" id="search" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" />
<input type="hidden" name="qlOld" id="qlOld" value="" />
<input type="hidden" name="colOld" id="colOld" value="web1" />
<input type="image" name="imageField" alt="search" src="/_images/search-mag.gif" onclick="RunSearch();" />
</div>
</div> <!-- /searchbox -->
This is bad code and i suggest an entire re-write.. As for a quick fix..
You could try the following :
var searchTerm = document.getElementById("search").value;
location.assign("http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + searchTerm );
Or
function RunSearch() {
window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value;
return false;
}
But dont use this.. re-write it!
My recommendation is to open the Developer tools in chrome and look at the Javascript debug window. That should tell you what's going on in the more general case. In either case, I recommend rewriting that snippet like this:
<div class="searchbox" id="searchbox">
<div class="formSrchr">
<form action="http://search.domain.com:8765/query.html" method="get">
<input type="text" size="20" name="qt" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" onmouseup="return false" />
<input type="hidden" name="ql" id="ql" value="" />
<input type="hidden" name="col" id="col" value="web1" />
<input type="image" alt="search" src="/_images/search-mag.gif" />
</form>
</div>
</div>
The standard form element will behave the way it's supposed to without JavaScript. All the named inputs will be added as URL parameters just like it did before. That's what method="get" does. For most forms, the default method="post is best; however, for search you aren't really posting anything. There are some strange proxy servers that disable all HTTP POST calls to prevent people behind that proxy from accidentally sharing information they aren't supposed to. The method="get" allows those people to at least search your site.
NOTE: based on some searching around, Chrome needs you to disable the onmouseup event for focus and blur to work as expected. My HTML form above has that change in it already for you.
In HTML 5, you can simplify it even more by using the placeholder tag. It would look like this:
<input type="text" size="20" name="qt" placeholder="Search" value=""/>
That removes all the Javascript from your search form.
Related
Problem:
Pressing Enter does not submit the <form>. The <input> is hooked up to Google Places API, and submit works if it's a plain <input> field.
HTML:
<form>
<input type="text" name="query" id="geocode_query" />
<!-- Working without id attribute:
<input type="text" name="query" />
-->
<input type="submit" value="Submit" />
</form>
Backbone (event: "geocode:result #geocode_query": "doSomething"):
setLocation: (event, result) ->
#location = result
See anything wrong? Thanks so much!
Having a bit of trouble with a form. Is any one who know's the ins and outs of GET able to have a look at this markup and suggest what is going wrong?
I have already looked into it and came across this answer: How can I pass a parameter via submit button? - scripting is taken from there but am still unsure where I am going wrong. The url is being populated but no value is being passed into it, so this is what I get: 'gender='
Markup:
<form onsubmit="validateEmail(document.emailsonly1,'Please enter a valid email address'); return false;" method="get" action="http://URL" name="emailsonly1">
<input type="hidden" name="gender">
<input type="image" src="/content/ebiz/shop/resources/images/spacer.gif" class="buttonSignUpGirl" id="btnSignUpGirl" onclick="setType('1')">
<input type="image" src "/content/ebiz/shop/resources/images/spacer.gif" class="buttonSignUpBoy" id="btnSignUpBoy" onclick="setType('2')">
</form>
Script:
function setType(type)
{
document.getElementById('gender').value = type;
}
You don't even need a new function for that, just do
<form onsubmit="validateEmail(...); return false;" method="get" action="http://URL" name="emailsonly1">
<input type="hidden" name="gender">
<input type="image" src="your image" onclick="emailsonly1['gender'].value = 1;">
<input type="image" src "your image" onclick="emailsonly1['gender'].value = 2;">
</form>
Fiddle here
BTW, it was probably not working because you forgot to give an id to the gender field.
I am creating a websites, and I have came across a predicament with my coding.
I am writing a 'submit form' and I need it to look like the following example:
Message: (Gives the user to submit a message, or type any comments) And inside the text box, I'd like for it to say 'Type your message here' but when you click within the box, the 'type your message here' disappears. I also would like to be able to control how large this text box is.
Name: Type your first and last name here (I want it to function the same as above)
Email Address: Type your email address here: (Again, function same as above)
This, is the code that I have so far, and I am not sure if it's correct or not, for what I'm trying to do:
<form method="post" action="mailto:youremail#youremail.com" >
<b>Message:</b><br><input type="textbox" value="text_name" onfocus="if (this.value=='Text_name') this.value='';" style="width: 300px;" style="height: 300px;"/><br/>
<b>Name:</b><br><input type="text" name="First and Last" size="30" maxlength="30" /><br />
<b>Email:</b><br><input type="text" name="Email" size="24" maxlength="24" /><br />
<input type="submit" value="Send Email" />
</form>
There are lots of plugins available fir this. But you can use a HTML5 property "placeholder"
<input type="text" placeholder="Enter your name...">
HERE is the demo. Text/hint will diappear as you start typing.
<b>Message:</b><br><input type="textbox" placeholder="Type your message here" style="width: 300px;" style="height: 300px;"/><br/>
<b>Name:</b><br><input type="text" name="First and Last" size="30" maxlength="30" placeholder="Type your first and last name here" /><br />
<b>Email:</b><br><input type="text" name="Email" size="24" maxlength="24" placeholder="Type your email address here"/><br />
<input type="submit" value="Send Email" />
From my understanding this is pretty much a duplicate of: Onclick event to remove default value in a text input field right?
If you are fine with HTML5 then you can use placeholder otherwise you will need to use Javascript that removes the text onblur
I suggest you to use bootstrap css for better styling. Just have a look at this http://getbootstrap.com/css/ . I hope this would be helpful for you
You can define a script and use the below function since it can be used for both onfocus and onblur,
function clearText(field) {
if(field.defaultValue == field.value) {
field.value = “”;
}
else
if(field.value == “”) {
field.value = field.defaultValue;
}
}
I am trying to add a Google search box to my own website. I would like it to search Google itself, not my site. There was some code I had that use to work, but no longer does:
<form method="get" action="https://www.google.com/search">
<input type="text" name="g" size="31" value="">
</form>
When I try making a search, it just directs to the Google homepage. Well, actually it directs here: https://www.google.com/webhp
Does anyone have a different solution? What am I doing wrong?
Sorry for replying on an older question, but I would like to clarify the last question.
You use a "get" method for your form.
When the name of your input-field is "g", it will make a URL like this:
https://www.google.com/search?g=[value from input-field]
But when you search with google, you notice the following URL:
https://www.google.nl/search?q=google+search+bar
Google uses the "q" Querystring variable as it's search-query.
Therefor, renaming your field from "g" to "q" solved the problem.
This is one of the way to add google site search to websites:
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
Figured it out, folks! for the NAME of the text box, you have to use "q". I had "g" just for my own personal preferences. But apparently it has to be "q".
Anyone know why?
(The reason your code isn't working is because the GET request name is now "q" instead of "g".
I recommend using one of the two methods below:
Method 1: Simply send a GET request directly to Google (Best and most simple option)
<form method="GET" action="https://www.google.com/search">
<input name="q" type="text">
<input type="submit">
</form>
Another (more complicated) answer would be
Method 2: Use JS to redirect to Google
<textarea id="searchterm"></textarea><button
onclick="search()">Search</button>
<script>
function search() {
var Blah = document.getElementById("searchterm").value;
location.replace("https://www.google.com/search?q=" + searchterm + "");
}
</script>
Hope this helps!
From 13 March 2021. I make this very easy code for my website https://neculaifantanaru.com/en/how-can-i-integrate-google-search-box-to-my-website-by-implementing-custom-code.html
First Step. This is the search box. Copy this code where you want in your html/php pages. People will search here the information. This form will send the search results to another html page called search.html
<form action="https://YOUR-WEBSITE.com/search.html" method="get" id="site-search">
<fieldset>
<!-- <label for="search">Search in website</label> -->
<input type="text" name="q" id="q" value="" />
<button type="submit" class="btn btn-inverse">search</button>
</fieldset>
</form>
Second Step. Create a new html page named search.html. And add this code in the <head> section, more likely before </head>:
<script>
(function() {
var cx = 'YOUR-NUMBER-CODE';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
YOUR-NUMBER-CODE you can get from this link https://cse.google.com/cse/all (Here you must add your new search engine.. Also, put OFF on the option "Search the entire web" in order to find results only on your website, not the entire web)
Step Three. Copy this code in the <body> section on the same page: search.html
<div class="main-content">
<h1>Search the site</h1><p>If you want to search for our articles on a specific topic, write the search term in the form below.</p>
<gcse:searchbox-only></gcse:searchbox-only>
<gcse:searchresults-only></gcse:searchresults-only>
</div>
THAT'S ALL.
ok this is it... i need to submit a form where the user enters a info in a input box but the value has other text aswell.
for example: user - enters 123 value is - www.helloneed123help.com submit
the 123 from the url is what the user entered
this is code i have:
<form name="postcode" method="post" action="location.html">
<input type="text" name="post" id="post" required="required" maxlength="8" />
<input type="submit" name="submit" value="submit" class="submit" />
</form>
any ideas? sheraz
No jQuery needed, straight JavaScript.
Add the following directly after the form HTML:
<script>
document.forms.postcode.onsubmit = function(){
this.post.value = 'www.helloneed' + this.post.value + 'help.com';
alert(this.post.value);
}
</script>
Fiddle:
http://jsfiddle.net/iambriansreed/ZeKUq/
Just add 'onclick' event in input tag and write javascript code there.
<input type="submit" name="submit" value="submit" class="submit" onclick="post.value='www.helloneed' + post.value + 'help.com';" />
You could try prepending & appending text to the value of the inputbox.
e.g. onsubmit="$('#post').val('http://www.helloneed' + $('#post').val() + 'help.com');
This may work:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form name="postcode" method="post" action="location.html" onsubmit="$('#post').val('http://www.helloneed' + $('#post').val() + 'help.com'); return false">
<input type="text" name="post" id="post" required="required" maxlength="8" />
<input type="submit" name="submit" value="submit" class="submit" />
</form>
(After your first test, I would remove the return false text)
Andrew
It is not possible to do this in HTML. Such issues should be handled server-side.
It’s easy to do this in JavaScript, as outlined in iambriansreed’s answer, but it’s equally simple and much more robust to do it server-side. In a case like this, there isn’t even any need to do it client-side as well; it would just complicate things, as the server-side code would have no direct way of knowing what it gets (direct user input vs. input modified by client−side JavaScript when enabled).