Question

I am modifying my login/registration form via login.phtml and have a problem with the “Create Account” button when I use an image button instead of the standard css button.

I modified this original code

               <button type="button" title="<?php echo $this->__('Create an Account') ?>" class="button" onclick="window.location='<?php echo Mage::helper('persistent')->getCreateAccountUrl($this->getCreateAccountUrl()) ?>';"><span><span><?php echo $this->__('Create an Account') ?></span></span></button>

to

  <input type="image" src="http://localhost/magento/skin/frontend/default/mytemplate/images/button-createaccount.png" title="<?php echo $this->__('Create an Account') ?>"  onclick="window.location='<?php echo Mage::helper('persistent')->getCreateAccountUrl($this->getCreateAccountUrl()) ?>';">

and moved the button into the “content” div of the right floating “create account” div. The button is display correctly but everytime when I click create account, my browser highlights the obligatory fields of the login form in the left floating “Login” div before continuing to the create account page.

When I click the original css create account button, on the lower part of the page (within another div, which is neither part of the login nor create account div) the browser continues correctly without highlighting the form fields first. Has this somehow to do with the position of the button within the div or with the window.location method???

Here’s the complete code:

<div class="account-login"> <?php echo $this->getMessagesBlock()->getGroupedHtml() ?>
  <form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="login-form">
    <div class="col2-set">
    <div class="col-2 new-users">
      <div class="content"> <?php echo $this->__('New Customers') ?>
        <p><?php echo $this->__('By creating an account with our store, you will be able to move through the checkout process faster, store multiple shipping addresses, view and track your orders in your account and more.') ?></p>
        <!-- Insert image button for Create Account in new div class "button" -->
        <div class="button">
          <input type="image" src="http://localhost/magento/skin/frontend/default/mytemplate/images/button-createaccount.png" title="<?php echo $this->__('Create an Account') ?>"  onclick="window.location='<?php echo Mage::helper('persistent')->getCreateAccountUrl($this->getCreateAccountUrl()) ?>';">
        </div>
        <!-- End Insert image button for Create Account in new div class "button"  --> 
      </div>
    </div>
    <div class="col-1 registered-users">
      <div class="content">
        <h2><?php echo $this->__('Registered Customers') ?></h2>
        <p><?php echo $this->__('If you have an account with us, please log in.') ?></p>
        <ul class="form-list">
          <li>
            <label for="email" class="required"><em>*</em><?php echo $this->__('Email Address') ?></label>
            <div class="input-box">
              <input type="text" name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" id="email" class="input-text required-entry validate-email" title="<?php echo $this->__('Email Address') ?>" />
            </div>
          </li>
          <li>
            <label for="pass" class="required"><em>*</em><?php echo $this->__('Password') ?></label>
            <div class="input-box">
              <input type="password" name="login[password]" class="input-text required-entry validate-password" id="pass" title="<?php echo $this->__('Password') ?>" />
            </div>
          </li>
          <?php echo $this->getChildHtml('persistent.remember.me'); ?>
        </ul>
        <?php echo $this->getChildHtml('persistent.remember.me.tooltip'); ?> 
        <!-- Insert image button for Login in div class "button" -->
        <div class="button">
          <input type="image" src="http://localhost/magento/skin/frontend/default/mytemplate/images/button-login.png" title="<?php echo $this->__('Login') ?>" name="send" id="send2">
        </div>
        <!-- End Insert image button for Login in div class "button" -->
        <div class="buttons-set"> <a href="<?php echo $this->getForgotPasswordUrl() ?>" class="f-left"><?php echo $this->__('Forgot Your Password?') ?></a> </div>
      </div>
    </div>
    <div class="col2-set">
      <div class="col-2 new-users">
        <div class="buttons-set">
          <button type="button" title="<?php echo $this->__('Create an Account') ?>" class="button" onclick="window.location='<?php echo Mage::helper('persistent')->getCreateAccountUrl($this->getCreateAccountUrl()) ?>';"><span><span><?php echo $this->__('Create an Account') ?></span></span></button>
        </div>
      </div>
      <div class="col-1 registered-users">
        <div class="buttons-set"> <a href="<?php echo $this->getForgotPasswordUrl() ?>" class="f-left"><?php echo $this->__('Forgot Your Password?') ?></a>
          <button type="submit" class="button" title="<?php echo $this->__('Login') ?>" name="send" id="send2"><span><span><?php echo $this->__('Login') ?></span></span></button>
        </div>
      </div>
    </div>
    <?php if (Mage::helper('checkout')->isContextCheckout()): ?>
    <input name="context" type="hidden" value="checkout" />
    <?php endif; ?>
  </form>
  <script type="text/javascript">
               var dataForm = new VarienForm('login-form', true);
    </script> 
</div>

Answer 1

You are having his issue because the form is initiated in javascript as a Varien_Form:

<script type="text/javascript">
    var dataForm = new VarienForm('login-form', true);
</script>

This has a number of default behaviours which are obviously behaing strangely when it encounters buttons and elements it is not expecting. These are defined somewhere in Magento’s js libraries.

Hope this helps point you in the right direction.