• 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

    • The Irony... China wouldn't be what it is today without Apple 😂
    • Microsoft makes it easier to find PC specs in Windows 11 Settings by Taras Buria Windows 11 has already received several improvements that make it easier to learn about your computer's specifications. Recently, Microsoft released Spec Cards for the System > About section, which provide basic information about the PC's main components, such as processor, memory, storage, graphics card, and video memory. Now, the Settings app is getting a new way to find your device info. Microsoft wants to display basic device information right on the Home page of the Settings app. The latest preview builds from the Dev and Beta Channels introduced a new "Your device info" card for the Settings' Home page. It displays specs like processor name and speed, graphics card and the amount of video memory, storage, and RAM. The card also has a link to the "About" section, where you will find more information about your computer, its Windows edition, product ID, and the recently introduced FAQ section that answers common hardware-related questions. The "Your device info" card joins the existing cards on the Settings app's home page. While the section offers useful information like quick access to Bluetooth devices, Wi-Fi, personalization, and recommended settings, users received it with mixed reactions, as many considered it another way for Microsoft to promote its services and subscriptions like Microsoft 365, OneDrive, and Game Pass (seriously, who thinks about Game Pass when opening Settings?). Now, the Settings' Home page is a bit more useful, as it saves you a few clicks when checking your computer's specs. If you want to test the new "Your device info" card, update your PC to build 26200.5622 or newer (Dev Channel). Just keep in mind that Microsoft is rolling it out gradually, and it requires signing in with a Microsoft Account in the United States. Other changes in build 26200.5622 include a new Settings section for Quick Machine Recovery, widget improvements, more app recommendations in the "Open with" dialog, and more. Check out the full release notes here.
    • Ponies will finally have good games to play after replaying Last of Us for the 100th time. Oh and I lied, Silent Hill f looks pretty great too, but we already knew about that.
  • 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
      397
    2. 2
      +FloatingFatMan
      177
    3. 3
      snowy owl
      170
    4. 4
      ATLien_0
      167
    5. 5
      Xenon
      134
  • Tell a friend

    Love Neowin? Tell a friend!