• 0

Change link href on dropdown select option using jquery


Question

I need some help. I am trying to change a link attribute href on dropdown select. Link changes depending on the value of the option the user has selected.

I have used this page to help start me off: http://api.jquery.com/val/

I have adapted it to how I need it to work for me but something is missing and I don't know what it is to get it to work.

This is what I have written so far.

jQuery(document).ready(function($){
	function changeLang(){
		var link = $('#changelang').val();
		if(link == ''){ // if the option value is empty, hide link.
			$('#changelink').css('display', 'none');
		}
		else{
			$('#changelink').css('display', 'block'); // Display link after dropdown.
			$('#changelink').attr('href', 'readtext.php?lang=' + link); // Change the link
			alert('Language changed!'); // Alert user the language of the text has changed.
		}
	}
	$('#changelang').change(changeLang); // Loads the function again on change.
	changeLang(); // Loads function on page load.
});

This is my html code.

<select id="changelang">
<option value="" selected="selected">-------</option>
<option value="en">English</option>
<option value="fr">French</option>
<option value="es">Spanish</option>
<option value="jp">Japanese</option>
</select>
<a id="changelink" href="readtext.php">Read</a>

If a user selects a different language then the link will change. What I do with that link afterwards is up to me.

I would like some help to get it working and any would be most appreciated.

Thank you!

4 answers to this question

Recommended Posts

  • 0

I think you could also use plain old Javascript for that line using

document.getElementById("changelink").href = 'readtext.php?lang=' + link

instead of

$('#changelink').attr('href', 'readtext.php?lang=' + link''); // Change the link

Though the original code seems OK...

Also, why do you have ' ' after link?

  • 0

You don't even need JavaScript to do this, just use good old HTML forms!

<form action="readtext.php" method="get">
    <select id="lang" name="lang">
        <option value="" selected="selected">- Language -</option>
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="es">Spanish</option>
        <option value="jp">Japanese</option>
    </select>
    <input type="submit" value="Read Text" />
</form>

Then you can build upon that, for example by using CSS to style the submit button or by using JavaScript/jQuery to handle the submit event through AJAX. However what truly matters is that this will work in any browser, with or without JavaScript.

  • 0
  On 19/07/2010 at 08:56, Calculator said:

You don't even need JavaScript to do this, just use good old HTML forms!

<form action="readtext.php" method="get">
    <select id="lang" name="lang">
        <option value="" selected="selected">- Language -</option>
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="es">Spanish</option>
        <option value="jp">Japanese</option>
    </select>
    <input type="submit" value="Read Text" />
</form>

Then you can build upon that, for example by using CSS to style the submit button or by using JavaScript/jQuery to handle the submit event through AJAX. However what truly matters is that this will work in any browser, with or without JavaScript.

I don't want just good old HTML forms. I know how I want my code to react, I just need my jquery function to work for what I need it to do.

If a user selects a different language then the link will change. The user will then be able to click on the link and what ever function i do with that after is up to me. Don't change the function to basic form submission. That's not what I asked for.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • How long until the Windows 11 hating bots come and say that Windows 11 committed atrocities against their family and their dog?
    • If you never consented to cookies (required), and you're blocking ad domains and you never see ads on Neowin (despite whitelisting) wouldn't you agree the adblock popup notice is doing what it is supposed to do?
    • It's just exactly what it looks like. The facial polygon count is low and rigid, and the background appears heavily blurred. You can clearly see jagged edges around the car window as it exits the tunnel. The character animations feel like they're from 2010. The Xbox Series S has performance similar to an RX 570 or GTX 1660, which is disappointing and contributes to holding back game development. The Switch GPU is roughly on par with a 2050 or 3050, which is even worse. Developers have often discussed the challenges and limitations of developing for outdated/low end hardware, noting how it can hold back progress. This isn't a new issue. I am sure we will hear about the "Challenges" they had to overcome here and sacrifices that had to be made for compatibility with the outdated/low end hardware.
    • Whether on Edge or Firefox, I don't get this prompt to accept cookies, because they're already whitelisted by the Cookie AutoDelete extension, both on Edge and Firefox. And, as I've already said, using Edge (yesterday), Neowin isn't whitelisted (I never use Edge), and I didn't get that pop-up. And this morning, after checking, still no pop-up, and everything is activated, the proof (screenshot), I have no ads on the right side. I must add that I block the following trackers Doubleclick, and Scorecardresearch, as well as a few other undesirable ones, via the Host file. Back to square one! After all, it's a simple click to continue, so I'll do with it. 🤷🏽‍♂️ Thank You
    • F'ing FIIINALLY! Much easier to ask people what their hardware is 🙏 and could also very well just say DDR4 or DDR5 without asking to bloat it too much. I'm also curious to see what it will say in More device info...
  • Recent Achievements

    • Week One Done
      jbatch earned a badge
      Week One Done
    • First Post
      Yianis earned a badge
      First Post
    • Rookie
      GTRoberts went up a rank
      Rookie
    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      400
    2. 2
      +FloatingFatMan
      178
    3. 3
      snowy owl
      171
    4. 4
      ATLien_0
      169
    5. 5
      Xenon
      134
  • Tell a friend

    Love Neowin? Tell a friend!