Html or javascript problem?

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

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.

How do I do that? In the javascript?

Yes.

Not sure, I’m not good with js, but sure it’s possible.

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.

By what means did you do this? Via the HTML placeholder attribute?

1 Like

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!

It’s in the value attribute, the reason it is not showing as blank when you fail to fill the field.

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>

Ralph mentioned

Maybe the first step is to get rid of the script and use the HTMl attricbute instead, Will it do the job?

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

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>

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

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?

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…