Can't get Javascript to send URL Variable

  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

Hi, I am trying to send a parameter through Javascript which will pass a variable telling which label in the select list the user has made. I have tried numerous alterations on the code I found and I can't get the $%^& thing to work. Here's the things I've tried and you can see the result here by doing a search at the very bottom for a similar sound.

1st attempt
Code: [ Select ]
 
<form action="search_similar.php" method="get" enctype="multipart/form-data" name="similarSoundSearch" target="_blank" id="similarSoundSearch">
            <input name="titleSelected" type="hidden" value="document.getElementById('similarSoundSelect')[document.getElementById('similarSoundSelect').selectedIndex];" />
 
  1.  
  2. <form action="search_similar.php" method="get" enctype="multipart/form-data" name="similarSoundSearch" target="_blank" id="similarSoundSearch">
  3.             <input name="titleSelected" type="hidden" value="document.getElementById('similarSoundSelect')[document.getElementById('similarSoundSelect').selectedIndex];" />
  4.  


Second attempt
Code: [ Select ]
 
<form action="search_similar.php" method="get" enctype="multipart/form-data" name="similarSoundSearch" target="_blank" id="similarSoundSearch">
            <input name="titleSelected" type="hidden" value="document.getElementById('similarSoundSelect').selectedIndex" />
 
  1.  
  2. <form action="search_similar.php" method="get" enctype="multipart/form-data" name="similarSoundSearch" target="_blank" id="similarSoundSearch">
  3.             <input name="titleSelected" type="hidden" value="document.getElementById('similarSoundSelect').selectedIndex" />
  4.  


Third try
Code: [ Select ]
 
<form action="search_similar.php" method="get" enctype="multipart/form-data" name="similarSoundSearch" target="_blank" id="similarSoundSearch">
            <input name="titleSelected" type="hidden" value="document.getElementById('similarSoundSelect').value" />
 
  1.  
  2. <form action="search_similar.php" method="get" enctype="multipart/form-data" name="similarSoundSearch" target="_blank" id="similarSoundSearch">
  3.             <input name="titleSelected" type="hidden" value="document.getElementById('similarSoundSelect').value" />
  4.  


As you can see I have tried numerous things but fail to even get a "value" to pass. It is instead passing the code as a string value instead of running it. I use something very similar on my main page to reset the search box when a user clicks in it.

Any help would be appreciated very much, thanks!

EDIT: I can't set it up where the value is sent as the variable because I have the value set to feed a record set on the search page to search by genres that match the song.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Okay, my javascript is way rusty, but I think the problem you are having is related to trying to assign the value before the user has actually selected it. I think you would need to add a function or statement that handles the assigning when the choice is made or when the form is submitted. Something like an onSubmit event handler that calls a function when the form is submitted and assigns the value to the hidden field after the user has made their selection:

Code: [ Select ]
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function doHiddenField(){
hiddenField = document.getElementById("titleSelected");
textValue = document.getElementById('similarSoundSelect')[document.getElementById('similarSoundSelect').selectedIndex].innerHTML;
hiddenField.value = textValue;
}
// -->
</script>
</head>
<body>
            <form action="echo.php" method="get" enctype="multipart/form-data" name="similarSoundSearch" target="_blank" id="similarSoundSearch" onsubmit="doHiddenField();">
            <input name="titleSelected" id="titleSelected" type="hidden" value="" />
 
              <h2>Search by Similar Sound</h2>
              <table width="80%" border="0" cellpadding="2" cellspacing="5" id="similarSearchTable">
                <tr>
                  <td width="42%"><select name="similarSoundSelect" class="textInputGrey" id="similarSoundSelect">
                                        <option value="Piano">Abstracia</option>
                    <option value="Atmosphere">Am I?</option>
                    <option value="Dark Electronica">Apollonius of Tyana</option>
                    <option value="Piano">Asylum - To find the truth</option>
                    <option value="Atmosphere">Beautiful</option>
 
                  </select>
                                                           
                  <input name="similarSoundBtn" type="submit" id="similarSoundBtn" value="Find It" />
       
            </form>                                
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script type="text/javascript">
  5. <!--
  6. function doHiddenField(){
  7. hiddenField = document.getElementById("titleSelected");
  8. textValue = document.getElementById('similarSoundSelect')[document.getElementById('similarSoundSelect').selectedIndex].innerHTML;
  9. hiddenField.value = textValue;
  10. }
  11. // -->
  12. </script>
  13. </head>
  14. <body>
  15.             <form action="echo.php" method="get" enctype="multipart/form-data" name="similarSoundSearch" target="_blank" id="similarSoundSearch" onsubmit="doHiddenField();">
  16.             <input name="titleSelected" id="titleSelected" type="hidden" value="" />
  17.  
  18.               <h2>Search by Similar Sound</h2>
  19.               <table width="80%" border="0" cellpadding="2" cellspacing="5" id="similarSearchTable">
  20.                 <tr>
  21.                   <td width="42%"><select name="similarSoundSelect" class="textInputGrey" id="similarSoundSelect">
  22.                                         <option value="Piano">Abstracia</option>
  23.                     <option value="Atmosphere">Am I?</option>
  24.                     <option value="Dark Electronica">Apollonius of Tyana</option>
  25.                     <option value="Piano">Asylum - To find the truth</option>
  26.                     <option value="Atmosphere">Beautiful</option>
  27.  
  28.                   </select>
  29.                                                            
  30.                   <input name="similarSoundBtn" type="submit" id="similarSoundBtn" value="Find It" />
  31.        
  32.             </form>                                
  33. </body>
  34. </html>


Like I said, my js is very rusty, so my code might not be the best to use, but I think the basic concept will work. I used it to submit to "echo.php" which is a file I have that just echos stuff submitted by a form and this is what I get from that code when selecting the first item:

Code: [ Select ]
This is echoing the values for the form
titleSelected = Abstracia
similarSoundSelect = Piano
similarSoundBtn = Find It
  1. This is echoing the values for the form
  2. titleSelected = Abstracia
  3. similarSoundSelect = Piano
  4. similarSoundBtn = Find It
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I was just looking at the code you added and you need to add id="titleSelected" to that hidden tag or the function that assigns the value won't work because it references it by its id. I don't think you have to have value="" but I always add it.

Code: [ Select ]
<input name="titleSelected" id="titleSelected" type="hidden" value="" />
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

You're not going to believe this - I did what you recommended this morning and gave up on it, because I couldn't get it to work on my "Mac." This is actually quite funny, because while I was at work and enjoying how ugly my site renders in IE6, I noticed that what you gave me DID work and was working perfectly well in both IE6 and IE7?!?!? So I came home, before I read your last id suggestion and tried to play with it again on my mac on three browsers: Opera, Safari, and Firefox - each resulted in a no go, and yet my PC was showing it just fine. SO.... I changed the id of the element as you just suggested and BOOM! Now it works on all systems....hmmmm. I guess either the Mac handles Java slightly more strict than the PC's I tested it on OR Java has become more strict in general. I guess....at any rate, thank you very much - you got it right on the first try!!!!!:)
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I'd forgotten that -- for document.getElementById IE will return the first element with either an id or name that matches, which is non-standard behavior as it's supposed to return null if there's no matching id found. I'd consider that a bug, but apparently the folks at MS don't because IE7 still does it, which means you need to be careful that there aren't any other elements with the same name as an id you're using because IE will just grab the first of either it spots.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 40 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.