Question

I have installed Modernizr into my code to enable html5 placeholder support in firefox 3.6

My issue is that because I am using a template structure (M.V.C) as my code base, I am unsure how I can get the “if()” script to work for my particular page as it would have to be called in the view. I have moved my modernizr script into my haeder -> was in my footer

My Form:

 <?php
//Setting form attributes
$formAddSale = array('id' => 'addSale', 'name' => 'addSale');
$saleName = array('id' => 'name', 'name' => 'name', 'placeholder' => 'Name*');
$saleLocation = array('id' => 'location', 'name' => 'location', 'placeholder' => 'Location*');
$saleBedrooms = array('id' => 'bedrooms','name' => 'bedrooms', 'placeholder' => 'Number of Bedrooms*');
$saleBathrooms = array('id' => 'bathrooms','name' => 'bathrooms', 'placeholder' => 'Number of Bathrooms*');
$saleCondition = array('id' => 'condition','name' => 'condition', 'placeholder' => 'Condition*');
$saleImage = array('id' => 'userfile', 'name'=> 'userfile', 'placeholder' => 'File Location*');
$saleDescription = array('id' => 'description','name' => 'description', 'placeholder' => 'Sale Description*');
$salePrice = array('id' => 'price','name' => 'price', 'placeholder' => 'Price*');
?>

<section id = "validation"><?php echo validation_errors();?></section>
<?php 
echo form_open_multipart('admin/addsale/', $formAddSale);
echo form_fieldset(); 
echo form_input($saleName);
echo form_input($saleLocation);
echo form_input($saleBedrooms);
echo form_input($saleBathrooms);
echo form_input($saleCondition);
echo form_input($salePrice);
echo form_upload($saleImage);
echo form_textarea($saleDescription);
echo form_submit('submit','Submit');
echo form_fieldset_close();
echo form_close();
?>

At the time of writing this question I have created a ‘misc.js’ document with the following code:

    // if placeholder isn't supported:
if (!Modernizr.input.placeholder){
  // use a input hint script
    setInputHint(document.getElementById('name'),'Name*');
    setInputHint(document.getElementById('location'),'Location*');
    setInputHint(document.getElementById('bedrooms'),'Number of Bedrooms*');
    setInputHint(document.getElementById('bathrooms'),'Number of Bathrooms*');
    setInputHint(document.getElementById('condition'),'Condition*');
    setInputHint(document.getElementById('price'),'Price*');
    setInputHint(document.getElementById('description'),'Sale Description*');
    setInputHint(document.getElementById('userfile'),'File Location*');
   }

I have included the above document as you normally would in the footer of my “template”

<!-- jQuery Files --> 
<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.domain.co.nz/includes/js/placeholder.js"></script> 
<script type="text/javascript" src="http://www.domain.co.nz/includes/js/misc.js">    </script>

Answer 1

Are you getting any Javascript errors ?

Because you are using a JS library ( jQuery ) you can replace ‘document.getElementById’ with ‘$’ so save a lot of coding.