1

I have created a custom contact form in Magento and I have done check boxes that hide and show different fields to be filled.

the problem is when I test submitting all the hidden values been sent to my email.

The transactional email settings was like that: 

Size: {{var data.size1}} {{var data.size2}} {{var data.size3}} {{var data.size4}} {{var data.size5}} {{var data.size6}} {{var data.size7}}

My input code for option size 7 is: 

<input name="size7" id="size7" type="text" value="Type the size here" 
       class="required-entry" 
       onblur="if (this.value == '') {this.value = 'Type the size here';}" 
       onfocus="if (this.value == 'Type the size here') {this.value = '';}" >

and after filling for example size7 and submit, I got the email like that:

Size: 12500000000000000 Type the size here Type the size here Type the size here Type the size here Type the size here Type the size here

I hope I described the problem well enough.

Khalil
  • 309
  • 2
  • 3
  • 18

1 Answers1

0

Instead of relying on Javascript, consider using the HTML5 placeholder attribute so you can leave the default value empty. Use a Javascript shim such as Placeholders.js if you need to support old browsers.

Phil
  • 1,288
  • 1
  • 10
  • 19
  • THANK YOU very much Phil, that was the solution and it works, I have a question: can I change the color of the placeholder text, Thank you again – Khalil Mar 04 '14 at 08:12
  • @Khalil: Yes, there are non-standard CSS ways to do so: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – Phil Mar 04 '14 at 08:17
  • Thanks Phil, but I tried that, unfortunately it is not working – Khalil Mar 04 '14 at 12:40
  • @Khalil: How is it not working and what browsers did you test it with? Have you tried inspecting the `` box and see if the style defined is really applied? If you need more help, post a new question. – Phil Mar 05 '14 at 02:47
  • I did exactly same as what in the answer, except I added my class to the `` in the style `.myclass:-moz-placeholder {}` – Khalil Mar 06 '14 at 06:04
  • @Khalil: Read the answer carefully and notice that Firefox 19+ requires two colons instead of one colon for the `-moz-placeholder` selector. – Phil Mar 07 '14 at 03:04