• 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 Text</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

    • Right Click on My Computer Icon -> Properties(?)
    • HomeBank 5.9.2 by Razvan Serea HomeBank is a free software (as in "free speech" and also as in "free beer") that will assist you to manage your personal accounting. It is designed to easy to use and be able to analyse your personal finance and budget in detail using powerful filtering tools and beautiful charts. If you are looking for a completely free and easy application to manage your personal accounting, budget, finance then HomeBank should be the software of choice. HomeBank also benefits of more than 19 years of user experience and feedback, and is translated by its users in around 56 languages. Highlights: Cross platform, supports GNU/Linux, Microsoft Windows, Mac OS X Import easily from Intuit Quicken, Microsoft Money or other software Import bank account statements (OFX, QIF, CSV, QFX) Duplicate transaction detection Automatic cheque numbering Various account types : Bank, Cash, Asset, Credit card, Liability Scheduled transaction Category split Internal transfer Month/Annual budget Dynamic powerful reports with charts Automatic category/payee assignment Vehicule cost HomeBank 5.9.2 fixes: bugfix: #2112135 scheduled with limitation don't stop and goes erroneous data bugfix: #2111663 variable scope issue in ui-assign.c bugfix: #2111359 remind status not synced in transfers Download: HomeBank 5.9.2 | 20.2 MB (Open Source) Download: 3rd party packages (macOSX. Ubuntu...etc) View: HomeBank Website | Support | Features | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • How long until the Windows 11 hating bots come and say that Windows 11 committed atrocities against their family and their dog?
  • 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!