SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make a Javascript form open in the same window

    Hi,

    I am using Javascript to display options in a form with 2 dropdown lists. However, despite using the target='_self', the result opens in a new window. Help would be much appreciated.

    Javascript...
    Code JavaScript:
    // JavaScript Document
    function setOptions(chosen) {
    var selbox = document.ChronoContact_course_finder.opttwo;
     
    selbox.options.length = 0;
    if (chosen == ' ') {
      selbox.options[selbox.options.length] = new Option('Choose Option',' ');
     
    }
    if (chosen == '85') {
      selbox.options[selbox.options.length] = new Option('ITEC Beauty Specialist Diploma','index.php?option=com_content&view=article&id=49&Itemid=68',target='_self');
      selbox.options[selbox.options.length] = new Option('ITEC Professional Makeup','index.php?option=com_content&view=article&id=57&Itemid=76',target='_self');
      selbox.options[selbox.options.length] = new Option('Fashion Catwalk & Photographic Makeup Course','index.php?option=com_content&view=article&id=67&Itemid=91',target='_self');
      selbox.options[selbox.options.length] = new Option('Bridal Makeup Course','index.php?option=com_content&view=article&id=68&Itemid=92',target='_self');
      selbox.options[selbox.options.length] = new Option('Special Effects Makeup','index.php?option=com_content&view=article&id=56&Itemid=77',target='_self');
      selbox.options[selbox.options.length] = new Option('Gel Nails Course','index.php?option=com_content&view=article&id=65&Itemid=88',target='_self');
      selbox.options[selbox.options.length] = new Option('Acrylic Nails Course','index.php?option=com_content&view=article&id=66&Itemid=89',target='_self');
      selbox.options[selbox.options.length] = new Option('Spray Tanning Course','index.php?option=com_content&view=article&id=55&Itemid=73',target='_self');  
    }
    if (chosen == '69') {
      selbox.options[selbox.options.length] = new Option('ITEC Holistic Massage Course','index.php?option=com_content&view=article&id=51&Itemid=2',target='_self');
      selbox.options[selbox.options.length] = new Option('ITEC Sports Massage Diploma','index.php?option=com_content&view=article&id=59&Itemid=78',target='_self');
      selbox.options[selbox.options.length] = new Option('Indian Head Massage Course','index.php?option=com_content&view=article&id=60&Itemid=79',target='_self');
      selbox.options[selbox.options.length] = new Option('ITEC Reflexology Diploma','index.php?option=com_content&view=article&id=64&Itemid=87',target='_self');
    }
    if (chosen == '80') {
      selbox.options[selbox.options.length] = new Option('ITEC Teaching Diploma','index.php?option=com_content&view=article&id=61&Itemid=81',target='_self');
      selbox.options[selbox.options.length] = new Option('FETAC Train The Trainer Level 6','index.php?option=com_content&view=article&id=63&Itemid=86',target='_self');
    }
    if (chosen == '83') {
      selbox.options[selbox.options.length] = new Option('ITEC Sports Massage Diploma','index.php?option=com_content&view=article&id=59&Itemid=90',target='_self');
     
    }
    }

    And the HTML...
    Code HTML4Strict:
    <div class="form_item">
      <div class="form_element cf_heading">
        <h1 class="cf_text">course finder</h1>
      </div>
      <div class="cfclear">&nbsp;</div>
    </div>
     
    <div class="form_item">
      <div class="form_element cf_dropdown">
        <label class="cf_label" style="width: 200px;">Step 1: Choose type of course</label>
        <select name="optone" class="cf_inputbox" size="1" onchange="setOptions(document.ChronoContact_course_finder.optone.options[document.ChronoContact_course_finder.optone.selectedIndex].value);">
          <option value=" " selected="selected">Choose Option</option>
          <option value="85">Beauty courses</option>
    	  <option value="69">Complimentary courses</option>
    	  <option value="80">Teaching courses</option>
    	  <option value="83">Fitness courses</option>	  
     
        </select>
     
      </div>
      <div class="cfclear">&nbsp;</div>
    </div>
     
    <div class="form_item">
      <div class="form_element cf_dropdown">
        <label class="cf_label" style="width: 200px;">Step 2: Choose a subject</label>
        <select size="1" name="opttwo" class="cf_inputbox" >
        <option value=" " selected="selected">Choose Option</option>
     
        </select>
        <!--<input type="button" name="go" value="Value Selected" onclick="window.open(document.ChronoContact_course_finder.opttwo.options[document.ChronoContact_course_finder.opttwo.selectedIndex].value);">-->
      </div>
      <div class="cfclear">&nbsp;</div>
    </div>
     
    <div class="form_item">
      <div class="form_element cf_button">
        <input type="submit" name="go" value="search" onclick="window.open(document.ChronoContact_course_finder.opttwo.options[document.ChronoContact_course_finder.opttwo.selectedIndex].value);">
      </div>
      <div class="cfclear">&nbsp;</div>
     
    </div>

    Many thanks!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by onoffpaul View Post
    I am using Javascript to display options in a form with 2 dropdown lists. However, despite using the target='_self', the result opens in a new window. Help would be much appreciated.
    The onclick event uses window.open(), which unsurprisingly, opens a new window.

    You may want to use window.location instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for your reply. However, when I used window.location, the form does not go to the next page; rather, it reloads the homepage.

    Any suggestions?

    Cheers

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by onoffpaul View Post
    Hi,

    Thanks for your reply. However, when I used window.location, the form does not go to the next page; rather, it reloads the homepage.

    Any suggestions?
    Yes, look at the value being given to window.location

    In your code I see that you're getting the value from the opttwo select. The opttwo select seems to have options with no value.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •