qim
December 10, 2015, 10:32am
1
I have a Search box in this page http://pintotours.net/
in the html I have this code
<div class="search">
<p>Enter a city or country name</p>
<form action="/Search/Search1.php" method="POST">
<input type="text" class="textinput" pattern=".{3,}" required title="3 characters minimum required" name="keyword" id="keyword" size="20">
<input type="submit" value="Search" class="button" >
</form>
</div>
What it does, among other things, is to prevent sending the query without entering anything in the box
Now, i decided to add some placeholder text in the box and came to the conclusion that the css was the same and all I needed was to add the additional script to the bottom of the page and alter the code above to
<div class="search">
<h5>Find a hotel</h5>
<form action="/Search/Search1.php" method="POST">
<input type="text" class="textinput" pattern=".{3,}" required title="3 characters minimum required" name="keyword" id="keyword" size="20" value="Enter destination">
<input type="submit" value="Search" class="button">
</form>
</div>
However, the Search box is sending an empty query on its way and the warning only appears if you disable the palceholder text.
I donāt know if this is due to the script or I missed something in the html
Could you have a look please?
http://pintotours.net/TEMP/BUTTON/
Thank you
SamA74
December 10, 2015, 10:40am
2
If you have a placeholder, the field has already been filled in, with the place holder. It is as if the user typed in the placeholder text. So you get the result
Search results for āEnter destinationā.
You would have to make the script compare the entry to the placeholder, if it matches, the form is invalid.
qim
December 10, 2015, 10:46am
4
How do I do that? In the javascript?
SamA74
December 10, 2015, 10:54am
5
qim:
In the javascript?
Yes.
qim:
How do I do that?
Not sure, Iām not good with js, but sure itās possible.
qim
December 10, 2015, 10:55am
6
Iāll wait a bit, if nobody comes in to the rescue I will ask the thread to be moved to the javascript forum
Thanks
Iāve moved it. No point in leaving it hanging around in HTML/CSS if it requires a JS solution.
ralphm
December 10, 2015, 11:29am
8
By what means did you do this? Via the HTML placeholder
attribute?
1 Like
qim
December 10, 2015, 11:33am
9
Hi Ralph
No, I used this
and meanwhile I found out that the script that must be added to the current code disrupts my base64 images.
The page is at present at http://pintotours.net/TEMP/BUTTON/
The moment I add the script, at the very bottom, the images go!
SamA74
December 10, 2015, 12:09pm
10
Itās in the value
attribute, the reason it is not showing as blank when you fail to fill the field.
qim
December 10, 2015, 12:13pm
11
But it is. Itās supposed to mirror the value in the script, I thinkā¦
<div class="search">
<h5>Find a hotel</h5>
<form action="/Search/Search1.php" method="POST">
<input type="text" class="textinput" pattern=".{3,}" required title="3 characters minimum required" name="keyword" id="keyword" size="20" value="Enter destination">
<input type="submit" value="Search" class="button">
</form>
</div>
> <script type="text/javascript">
> window.onload = function(){
> //Get submit button
> var submitbutton = document.getElementById("keyword");
> //Add listener to submit button
> if(submitbutton.addEventListener){
> submitbutton.addEventListener("click", function() {
> if (submitbutton.value == 'Enter destination'){//Customize this text string to whatever you want
> submitbutton.value = '';
> }
> });
> }
> }
> </script>
qim
December 10, 2015, 12:15pm
12
Ralph mentioned
Maybe the first step is to get rid of the script and use the HTMl attricbute instead, Will it do the job?
qim
December 10, 2015, 12:32pm
13
I tried Ralphās suggestion and it works without the script and solves the original problem
EDIT
Except that it does not work in IE9. Is there a workaround?
many thanks
1 Like
When a newer feature isnāt supported in the browsers you need what youāre looking for is a āpolyfillā, it masks the same behaviour in the browsers that donāt have that feature.
Thereās a bunch here:
Iāve used this one in the past
1 Like
qim
December 10, 2015, 2:08pm
15
Hi Mark
never used polyfilla other than to repair cracks on the wallā¦
Thre are loads of files there. Which one do I need? All of them?
1 Like
hehe, just go with the last one I linked to, itās one jquery plugin script you need to add after jquery and a small initialization script.
<script src="jquery.placeholder.js"></script>
<script>
$(function() {
$('input, textarea').placeholder();
});
</script>
qim
December 10, 2015, 2:55pm
17
Hi Mark
Iām totally ignorant to these scripts
Do I need to install jquery in the server? And ehat happens if the visitor does not have jquery?
More to the point, I placed the script you sent at the bottom of the page and it changed nothing! Do I have to change anything in it? Do I need something else?
Sorryā¦
No worries, you already have jQuery on http://pintotours.net/
Include this before the closing </body>
tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-placeholder/2.3.0/jquery.placeholder.min.js"></script>
<script>
$(function() {
$('input, textarea').placeholder();
});
</script>
The only change will be to ie9< which should now be able to see the placeholder attributes.
1 Like
qim
December 10, 2015, 3:24pm
19
Well, I put this before the closing body tag. My interest is in seeing the placeholder in IE9.
And when I open the page in IE11 and then emulate IE9 there is no placeholder visibleā¦
http://pintotours.net/TEMP/SIDE/open2.html
or do I have to place jQuery on every page?
Donāt form fields have a defaultValue property, which allows you to check if the value in the field is different from how it began?
qim
December 10, 2015, 8:58pm
21
Hi Paul
This is now just a IE9 problem. I would like to follow Markās idea but either I did it wrong, or it does not work- usually, itās the firstā¦