The scripts below work fine individually. But when both forms are added to the same page the 'q' value begins to conflict. Unfortunately for Google based searches the 'q' is essential.
I have tried numerous ways to assign value to the q when needed, and using -alert messages- it seems the values make it all the way through the script. This seems so simple and I am wondering if anyone else has ideas. I have even used PHP to call the scripts when needed, but one will run and the second will not. One will always one first then the second, regardless of it's html position will not run.
Here is the JS file:
function changeText1(){ var theDate = document.getElementById('userInput').value; var theTerm = document.getElementById('userInput2').value; var myVar = theDate + ' '+ theTerm; document.getElementById('q').value=myVar; } function changeText2(){ var ItemFirst = document.getElementById('YouTubeInput').value; var TheVar = ItemFirst +"'&search_sort=video_avg_rating'"; document.getElementById('q').value=TheVar; }
Here is the html :
<script type="text/javascript" src="search.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> </head> <body> <div class="newwrapper"> <h3>Google Date Search</h3> <!--<input type='button' onclick='changeText1()' value='Submit'/>--> <form id ="searchMe" name="searchMe" method="get" action="http://www.google.com/search" target="_blank"> <input type='text' id='userInput' value='' /> <input type='text' id='userInput2' value='' /> <input type="hidden" id ="q" name="q" alt="Search" value="" maxlength="256" size="32" /> <input type="submit" onclick="changeText1(this.form);" name="btnG" value="Search" /> </form> </div> <div class="newwrapper"> <p><h3>Youtube Top Rated Search</h3></p> <form id ="searchYouT" name="searchYouT" method="get" action="http://www.youtube.com/results" target="_blank"> <input type='text' id='YouTubeInput' value='' /> <input type="hidden" id ="q" name="q" alt="Search" value="" maxlength="256" size="32" /> <input type="submit" onclick="changeText2(this.form);" name="btnG" value="Search" /> </form> </div