Jump to content

Creating dynamic drop down with multiple fields ?

prindeo

By prindeo
in JavaScript

 Share

Recommended Posts

prindeo Newbie

prindeo

Posted
Posted

Hello, I am new to this forum, and I really hope that here I will find all the answers that I am looking for. I want to create a Magento based website, with a custom feature. It will be something like http://www.smartbox.com/us/. For this, my customers will need to activate their gift packages online. For this I need a custom java script that will add two dynamic drop down boxes. I will add the javascript code to a form, which will be sent to e-mail, together with the activation code and customer contact information. I will make an example for the dynamic dropdown here: First dropdown: 1. Culinary / 2. Getaways / 3. Spa & Wellness. The second dropdown will be dynamic. My example will be here:

  • If my customer chooses 1. Culinary, the second dropdown will have 1.1. Restaurant A / 1.2 Restaurant B, 1.X Restaurant X
  • If my customer chooses 2. Getaways, the second dropdown will have 2.1. Getaway A / 2.2 Getaway B, 2.X Getaway X

I would like my dynamic javascript to work with text only. This means that I don’t want to complicate it with a mysql connection and neither with json. Can you provide me with an example code for a dynamic dropdown with text selection only? Thank you in advance,Alex

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

I don't have any special code for this that you wouldn't be able to find online somewhere. It's probably better if you post your code and explain what problems you're having trying to get it to work. Make sure you're checking for Javascript error messages.

Link to comment
Share on other sites
prindeo Newbie

prindeo

Posted
  • Author
Posted

Thank you for your reply. The code in the link provided works very well in a html file. But Magento uses .phtml files. This particular file has no <head> section, and due to this, it does not update the second dropdown, remaining empty with the default message "Please select one of the above" - as in the link you sent me. I hope you can help me identify where to add the code in the .phtml file. The default file is as following: 

<?php/*** Magento** NOTICE OF LICENSE** This source file is subject to the Academic Free License (AFL 3.0)* that is bundled with this package in the file LICENSE_AFL.txt.* It is also available through the world-wide-web at this URL:* http://opensource.org/licenses/afl-3.0.php* If you did not receive a copy of the license and are unable to* obtain it through the world-wide-web, please send an email* to license@magentocommerce.com so we can send you a copy immediately.** DISCLAIMER** Do not edit or add to this file if you wish to upgrade Magento to newer* versions in the future. If you wish to customize Magento for your* needs please refer to http://www.magentocommerce.com for more information.** @category    design* @package	 base_default* @copyright   Copyright (c) 2011 Magento Inc. (http://www.magentocommerce.com)* @license	 http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)*/?><div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div><div class="page-title">    <h1><?php echo Mage::helper('contacts')->__('Contact Us') ?></h1></div><form action="<?php echo $this->getFormAction(); ?>" id="contactForm" method="post">    <div class="fieldset">	    <h2 class="legend"><?php echo Mage::helper('contacts')->__('Contact Information') ?></h2>	    <ul class="form-list">		    <li class="fields">			    <div class="field">				    <label for="name" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Name') ?></label>				    <div class="input-box">					    <input name="name" id="name" title="<?php echo Mage::helper('contacts')->__('Name') ?>" value="<?php echo $this->htmlEscape($this->helper('contacts')->getUserName()) ?>" class="input-text required-entry" type="text" />				    </div>			    </div>			    <div class="field">				    <label for="email" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Email') ?></label>				    <div class="input-box">					    <input name="email" id="email" title="<?php echo Mage::helper('contacts')->__('Email') ?>" value="<?php echo $this->htmlEscape($this->helper('contacts')->getUserEmail()) ?>" class="input-text required-entry validate-email" type="text" />				    </div>			    </div>		    </li>		    <li>			    <label for="telephone"><?php echo Mage::helper('contacts')->__('Telephone') ?></label>			    <div class="input-box">				    <input name="telephone" id="telephone" title="<?php echo Mage::helper('contacts')->__('Telephone') ?>" value="" class="input-text" type="text" />			    </div>		    </li>		    <li class="wide">			    <label for="comment" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Comment') ?></label>			    <div class="input-box">				    <textarea name="comment" id="comment" title="<?php echo Mage::helper('contacts')->__('Comment') ?>" class="required-entry input-text" cols="5" rows="3"></textarea>			    </div>		    </li>	    </ul>    </div>    <div class="buttons-set">	    <p class="required"><?php echo Mage::helper('contacts')->__('* Required Fields') ?></p>	    <input type="text" name="hideit" id="hideit" value="" style="display:none !important;" />	    <button type="submit" title="<?php echo Mage::helper('contacts')->__('Submit') ?>" class="button"><span><span><?php echo Mage::helper('contacts')->__('Submit') ?></span></span></button>    </div></form><script type="text/javascript">//<![CDATA[    var contactForm = new VarienForm('contactForm', true);//]]></script>

I am looking forward to your reply,Alex

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

I'm not familiar with Magento, but since that code alone is not valid HTML code then I assume it is part of a template system where the head section gets included from another file. A .phtml file is a PHP file with a different extension. The output is still just HTML, Javascript, and CSS that gets sent to the browser. That code above wouldn't run if you pointed your browser to that file, it would complain about things like $this not being set correctly and the Mage class not being defined. So that file gets included from another file that defines everything, includes the head section and whatever else, then runs that code and then includes the code after it. If you're familiar with how Magento works then you may already know what other files are involved, or else you would need to look at the URL for that page when you're looking at it in the browser. It may be pointing to index.php or something similar, so you would need to start in whatever file your browser is actually pointing to in order to figure out which files it's including and things like that. There's going to be a file somewhere in the chain that contains all of the starting HTML markup for the page, including the head. But if you edit that file you're probably changing all of your pages, not just the page with the contact form on it. One option would be to put your Javascript in the body there instead of the head. That may present some problems depending on the Javascript code, but it would probably work.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...