Changing " to ' in PHP - HTML Form

Question

I'm building a form in PHP and I have a field that currently works fine like this:

<input type='text' name='Name' value='Name'/>

But I dont want the users to have to rub out the value manually so I did this:

<input type='text' name='Name' value='Name'
   onblur="if(this.value==''){ this.value='Name'; this.style.color='#BBB';}"
   onfocus="if(this.value=='Name'){ this.value=''; this.style.color='#000';}"
   style="color:#BBB;" />

But obviously since this is in PHP and the form starts with $output="<form... it didnt work and brought up errors because of the "

So I then created this:

<input type='text' name='Name' value='Name' 
    onblur='if(this.value==''){ this.value='Name'; this.style.color='#BBB';)'
    onfocus='if(this.value=='Name'){ this.value=''; this.style.color='#000';}' 
    style='color:#BBB' />

Which doesn't through up errors, but simply doesn't work. I mean the form shows up correctly, but the value does not disappear with clicks. So I thought of changing the ' inside the onblur and onfocus to " and this worked in html but brought up the same error as before in php. So what is the solution to this?

You're starting the onblur with `'` and then using `'` inside of it. If you do it this way, rather than simply use click events or functions, then you need to escape your quotes. On google search will explain you how. — h2ooooooo, Nov 18 '14 at 13:13

score 3 · Accepted Answer · answered Nov 18 '14 at 13:13

Escape the quotes:

$output = "<input type='text' name='Name' value='Name'
   onblur=\"if(this.value==''){ this.value='Name'; this.style.color='#BBB';}\"
   onfocus=\"if(this.value=='Name'){ this.value=''; this.style.color='#000';}\"
   style='color:#BBB;' />";

score 1 · Answer 2 · answered Nov 18 '14 at 13:11

1

There's one really really simple solution to this: use HTML5 placeholders:

<input type="text" name="Name" placeholder="Name">

(This will automatically be a lighter color than the original, so the style attribute is not required here)

This is supported by all modern browsers, as seen here. Only IE versions 9 and lower don't support this, and those browsers only have 5% of all browser usage, so generally it's better to drop support for older browsers in favour of features that make your life much easier.

answered Nov 18 '14 at 13:11

Joeytje50

18,636
15
63
95

Yes - but those won't work with IE, and that is something I need. – CalvT Nov 18 '14 at 13:12
http://stackoverflow.com/questions/15020826/how-to-support-placeholder-attribute-in-ie8-and-9 – Luke Nov 18 '14 at 13:13
2

@CalvT http://caniuse.com/#feat=input-placeholder they work in IE10 and up. Only 5% of all people still use versions of IE lower than that. My suggestion then would be to drop support for older browsers like those – Joeytje50 Nov 18 '14 at 13:13

score 0 · Answer 3 · answered Nov 18 '14 at 13:14

0

Use backslashes before '

For example:

<input type='text' name='Name' value='Name' 
    onblur='if(this.value==\'\'){ this.value=\'Name\'; this.style.color=\'#BBB';)'

answered Nov 18 '14 at 13:14

Pupil

23,834
6
44
66

you meant to say backslashes (\\) - slashes are (/) – bart s Nov 18 '14 at 13:15
@ProgrammingStudent I think you need to escape the other quotes. This will cause errors in your JavaScript code. Unless you're putting this between quotes in your PHP code, in which case the backslashes have no effect at all. – Joeytje50 Nov 18 '14 at 13:16

score 0 · Answer 4 · answered Nov 18 '14 at 13:35

You can use backslash to escape quote characters inside strings. Eg: "…\"…" or '…\'…'. The problem is that this easily becomes hard to read. What can really improve readability is to use HEREDOC syntax:

$output = <<<_
  <input type='text' name='Name' value='Name'
         onblur="if(this.value==''){ this.value='Name'; this.style.color='#BBB';}"
         onfocus="if(this.value=='Name'){ this.value=''; this.style.color='#000';}"
         style="color:#BBB;" />

_;

You can even expand variables inside it and still keep the markup fairly readable. Example:

$output = <<<_
  <div class="$c"><a href="$l">$t</a></div>

_;

Changing " to ' in PHP - HTML Form

4 Answers4