CODEWITHSUNDEEP
javascriptphpjqueryhtml
Ylama
Ylama

Reputation: 2489

Javascript link to the <select> id

My problem is im working in prestashop(1.6.1.9) CMS pages, im not allowed to put any script into the cms pages source code.(im not using iframe for this, its not a solution)..

So i have an dropdown menu , where each link on the drop down links to a certain page. I want to use a java-script function to do this.

But because i cant call java-script on the page like this example, 

<select id="selectdrops" name="newurl"  onchange="menu_goto(this.form)  ">
    <option value="/index.html">Home</option>
    <option value="/feedback.html">Feedback</option>
    <option value="/links.html">Related Links</option>
</select>

i wish to make my javascript focus on the dropdown 'ID' if thats possible?

Removing : menu_goto(this.form) i would like to still accomplish the targeted links by maybe focusing on the select "ID".

My .js looks like this : 

$(document).ready(function () {

    $(document).on('change', '#dropSelectAbout', function (e) {
        e.preventDefault();
        menu_goto();
    });

    $(document).ready(function() {
        $("a").click(function(event) {
            alert(event.target.id);
        });
    }); 

});

function menu_goto( menuform )
{
   var baseurl = window.document.location.protocol + '//' + window.document.location.host;
   selecteditem = menuform.newurl.selectedIndex ;
   newurl = menuform.newurl.options[ selecteditem ].value ;
   if (newurl.length != 0) {
     location.href = baseurl + newurl ;
   }
}

Upvotes: 1

Views: 125

Answers (3)

WillyMilimo
WillyMilimo

Reputation: 467

I suggest making the following changes;

$(document).on('change', '#selectdrops', function (e) {
       e.preventDefault();
       menu_goto(e.target.value);
    });
})

function menu_goto( newurl ) {
    var baseurl = window.document.location.protocol + '//' + window.document.location.host;

    if (newurl.length != 0) {
        window.location = baseurl + newurl ;
    }
}

Removed: (the script below removed because it targets all the < a > tags on the page which creates an pop-up dialog message when links are clicked, so the function on top was only script needed to focus on my dropdown where id="selectdrops" )

    $(document).ready(function() {
        $("a").click(function(event) {
           alert(event.target.id);
        });
    });

e.target.value will give you the selected option therefore you can pass the value directly into your menu_goto function.
location does not have a ref property therefore use window.location if the intention to redirect to the newly constructed url.

Upvotes: 1

sadlyblue
sadlyblue

Reputation: 2987

If you want to redirect on change (not after a button click) you can use this script:

$(document).ready(function () {

    $(document).on('change', '#selectdrops', function (e) {
            e.preventDefault();
            menu_goto(this);
        });

});

function menu_goto( menuform )
{
    if(menuform == null)
        return;

    newurl = $(menuform).val() ;

    if (newurl.length != 0) {
        location.href = baseUri + newurl ;
    }
}

You can use the baseUri variable that Prestashop uses to get the store url. This works better for subdomains. Then set the links in the select without the / (it's already in the baseUri).

EDIT: To use a button click:

$(document).ready(function () {

    $(document).on('click', '#golink', function (e) {
            e.preventDefault();
            menu_goto();
        });

});

function menu_goto()
{
    var menuform = $('#selectdrops');

    if(menuform == null)
        return;

    newurl = menuform.val() ;

    if (newurl.length != 0) {
        location.href = baseUri + newurl ;
    }
}

in this case the button link to execute must have the id golink.

Upvotes: 0

Fran&#231;ois-Xavier Aeberhard
Fran&#231;ois-Xavier Aeberhard

Reputation: 622

You forgot to pass the form as a parameter of the menu_goto function (also selector was false. Here is corrected code:

$(document).ready(function() {

  $(document).on('change', '#selectdrops', function(e) {
    e.preventDefault();
    menu_goto(this.form);
  });

  $(document).ready(function() {
    $("a").click(function(event) {
      alert(event.target.id);
    });
  });

});

function menu_goto(menuform) {
  var baseurl = window.document.location.protocol + '//' + window.document.location.host;
  selecteditem = menuform.newurl.selectedIndex;
  newurl = menuform.newurl.options[selecteditem].value;
  if (newurl.length != 0) {
    location.href = baseurl + newurl;
  }
}
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<form>
  <select id="selectdrops" name="newurl">
    <option value="/index.html">Home</option>
    <option value="/feedback.html">Feedback</option>
    <option value="/links.html">Related Links</option>
  </select>
</form>

Upvotes: 0

Related Questions