[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

How to pass select box selected option value to an Anchor tag as query string

Posted on 2014-03-06
32
Medium Priority
?
2,717 Views
Last Modified: 2014-03-17
I have a couple of select boxes, I want to pass the user selected option to an anchor tag as a query string.

here is my select boxes

<select name="tmonths" id="tmomths" size="1">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>
<select name="tday" id="tday" size="1">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
     <option value="8">8</option>
     <option value="9">9</option>
     <option value="10">10</option>
     <option value="11">11</option>
     <option value="12">12</option>
     <option value="13">13</option>
     <option value="14">14</option>
     <option value="15">15</option>
     <option value="16">16</option>
     <option value="17">17</option>
     <option value="18">18</option>
     <option value="19">19</option>
     <option value="20">20</option>
     <option value="21">21</option>
     <option value="22">22</option>
     <option value="23">23</option>
     <option value="24">24</option>
     <option value="25">25</option>
     <option value="26">26</option>
     <option value="27">27</option>
     <option value="28">28</option>
     <option value="29">29</option>
     <option value="30">30</option>
     <option value="31">31</option>
 </select>
 <select name="tyear" id="tyear">
     <option selected="selected" value="2014">2014</option>
	<option value="2015">2015</option>
 </select>

Open in new window


here is the anchor I am trying to pass the values

<a href="http://www.mysite.com/page/book.html?chkDate=tmonth-tday-tyear">Search</a>

Open in new window


so basically the url should look like
<a href="http://www.mysite.com/page/book.html?chkDate=03-06-2014">Search</a>

Open in new window


any example or reference is appreciated
0
Comment
Question by:niceoneishere
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 18
  • 11
  • 2
  • +1
32 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39911321
<a href="http://www.mysite.com/page/book.html?" id="search">Search</a> 

<script>
$("#search").click(function(e){
     $(this).prop("href",$(this).prop("href") + "&chkDate=" + $("#tmomths").val()+"-"+ $("#tday").val()+"-"+ $("#tyear").val())
})
</script>

Open in new window


You might want to spell months correctly - I've used your spelling
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 39911908
To get the value of the selected options:
var myMonth=document.getElementById("tmomths").options[document.getElementById("tmomths").selectedIndex].text;
var myDay=document.getElementById("tday").options[document.getElementById("tday").selectedIndex].text;
var myYear=document.getElementById("tyear").options[document.getElementById("tyear").selectedIndex].text;

Open in new window

To inner the href in the anchor (give it an id first like id="search");
document.getElementById("search").href="http://www.mysite.com/page/book.html?chkDate="+myMonth+"-"+myDay+"-"+myYear;

Open in new window

0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39914024
Thanks for replying, but its not working because of 2 things

1) the url I need to pass has to be on a different domain so I am think I need to do this with a form or use a iframe within the site.

2) I modified the code to use it with a datepicker and its picking the arrival date but not passing it.

here is preview

http://www.easterninns.com/test-home/

all the script is in a file called picker.js at

http://www.easterninns.com/js/picker.js

Thanks and appreciate it
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 39914035
Change the script to below, WP uses jQuery instead of $

<script>
jQuery("#search").click(function(e){
     jQuery(this).prop("href",jQuery(this).prop("href") + "jQuery chkDate=" +jQuery("#tmomths").val()+"-"+ jQuery("#tday").val()+"-"+ jQuery("#tyear").val())
})
</script> 

Open in new window


You also need to do this with your datepicker code in picker.js

When you've made the changes let me know.
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39914087
Thanks but I don't have tmonths, tday, tyear anymore since I am using the datepicker so what should be there instead of those.

here is the new code I am trying
	<script type="text/javascript">
     jQuery("#booknow").click(function(e){
       jQuery(this).prop("href",jQuery(this).prop("href") + "jQuery arrival_date=" +jQuery("select#arrmonth").val()+"-"+ jQuery("select#arrday").val()+"-"+ jQuery("select#arryear").val() + "jQuery &stay_nights=" + $("#label").val())
     });
	</script>

Open in new window


Thanks for helping me on this
0
 
LVL 58

Expert Comment

by:Gary
ID: 39914199
Beddy time for me, can you bump this tomorrow if I forget.
0
 
LVL 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 800 total points
ID: 39914372
Have a look at this - it should do what you need:

jQuery(document).ready(function($) {
	$('#arrdatepicker').datepicker();
	$('#depdatepicker').datepicker();
	
	$('#booknow').click(function(){
		arrDate = $('#arrdatepicker').datepicker('getDate');
		chkDate = arrDate.getMonth()+1 + "-" + arrDate.getDate() + "-" + arrDate.getFullYear();
		
		newHref = $('#booknow').attr('href') + '?chkDate=' + chkDate
		$('#booknow').attr('href', newHref);
		return true;
	});
});

Open in new window

0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39915361
Sorry Guys I am sorry this is so confusing, but I need to pass the values to the url which is not on the SAME DOMAIN.

will this be possible by using FORM tag and submit button.

Thanks
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39915371
Here is the test url I am using

http://www.easterninns.com/test-home/

if select the check in and check out dates.  it should display the number of nights next to nights and when clicked on check availability it should append the check in night and number to nights to url.

its not doing any of that :(

Thanks for once again
0
 
LVL 58

Expert Comment

by:Gary
ID: 39915377
You're not calling your function anywhere - add this

$(".hasDatepicker").change(function(){
	if($("#depdatepicker").val()!='' && $("#depdatepicker").val()!='') {        
		var diff = ($("#depdatepicker").datepicker("getDate") - $("#arrdatepicker").datepicker("getDate")) / 1000 / 60 / 60 / 24;
		$('#label').html(diff);
	} 
})

Open in new window


And remove the function dateDifference() {} function

Change this line
$('#booknow').attr('href', newHref);

to

$(this).attr('href', $(this).attr("href") + "&" + newHref);

I assume you should be passing in the number of nights as well?
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39915392
Thanks for replying, I updated the code.

http://www.easterninns.com/test-home/

 but its still not appending the checking date and how would I append the nights. the correct url after appending should look like

https://www.bookonthenet.net/east/premium/eresmain.aspx?id=sEg2pObaWAi6bXotx8goXeSv206wFocAB8q%2fWSTeEMY%3d#&arrival_date=03-12-2014&stay_nights=2

I need to pass the date to arrival_date and number of nights to stay_nights

the #booknow href is https://www.bookonthenet.net/east/premium/eresmain.aspx?id=sEg2pObaWAi6bXotx8goXeSv206wFocAB8q%2fWSTeEMY%3d#&

Thanks once again
0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39915741
This is a full working copy of the code you need;

jQuery(document).ready(function($) {
	$('#arrdatepicker').datepicker();
	$('#depdatepicker').datepicker();
	
	$('.hasDatepicker').change(function() {
		arrDate = $('#arrdatepicker').datepicker('getDate');
		depDate = $('#depdatepicker').datepicker('getDate');
		
		if (arrDate != null && depDate != null) {
			numOfDays = Math.ceil((depDate - arrDate) / (1000 * 60 * 60 * 24)) ;
			arrivalDate = arrDate.getMonth()+1 + "-" + arrDate.getDate() + "-" + arrDate.getFullYear();
			newHref = $('#booknow').attr('href') + 'arrival_date=' + numOfDays + '&stay_nights=' + numOfDays; 

			$('#label').html(numOfDays);
			$('#booknow').attr('href', newHref);
		}
	});
});

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39915940
You need to separate the href appending function from the onchange - people change their dates.

$(".hasDatepicker").change(function(){
	if($("#depdatepicker").val()!='' && $("#depdatepicker").val()!='') {        
		var diff = ($("#depdatepicker").datepicker("getDate") - $("#arrdatepicker").datepicker("getDate")) / 1000 / 60 / 60 / 24;
		$('#label').html(diff);
	} 
}) 
$("#booknow").click(function(){
	arrDate = $('#arrdatepicker').datepicker('getDate');
	arrivalDate = arrDate.getMonth()+1 + "-" + arrDate.getDate() + "-" + arrDate.getFullYear();
	$(this).attr('href', $(this).attr('href') + '&arrival_date=' + numOfDays + '&stay_nights=' + $("#label").html()) 
})

Open in new window

0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39919180
Ok I have updated the code you guys have given:

If I try like Mr. Chris Code, the dates keep getting appended

here is the code of Mr. Chris

    jQuery(document).ready(function($) {
	$('#arrdatepicker').datepicker();
	$('#depdatepicker').datepicker();
	$('.hasDatepicker').change(function() {
		arrDate = $('#arrdatepicker').datepicker('getDate');
		depDate = $('#depdatepicker').datepicker('getDate');
		
		if (arrDate != null && depDate != null) {
			numOfDays = Math.ceil((depDate - arrDate) / (1000 * 60 * 60 * 24)) ;
			arrivalDate = arrDate.getMonth()+1 + "-" + arrDate.getDate() + "-" + arrDate.getFullYear();
			newHref = $('#booknow').attr('href') + '&arrival_date=' + arrivalDate + '&stay_nights=' + numOfDays; 

			$('#label').html(numOfDays);
			$('#booknow').attr('href', newHref);
		}
	  });
    });

Open in new window


but If try like Mr. Gary, It's not working at all

and here Mr. Gary

    jQuery(document).ready(function($) {
	$('#arrdatepicker').datepicker();
	$('#depdatepicker').datepicker();
    $(".hasDatepicker").change(function(){
	if($("#depdatepicker").val()!='' && $("#depdatepicker").val()!='') {        
		var diff = ($("#depdatepicker").datepicker("getDate") - $("#arrdatepicker").datepicker("getDate")) / 1000 / 60 / 60 / 24;
		$('#label').html(diff);
	} 
}) 
$("#booknow").click(function(){
	arrDate = $('#arrdatepicker').datepicker('getDate');
	arrivalDate = arrDate.getMonth()+1 + "-" + arrDate.getDate() + "-" + arrDate.getFullYear();
	$(this).attr('href', $(this).attr('href') + '&arrival_date=' + arrivalDate + '&stay_nights=' + $("#label").html());
})
    });

Open in new window


here is preview again which is currently using Mr. Gary's code.

http://www.easterninns.com/test-home/

Thanks again
0
 
LVL 58

Expert Comment

by:Gary
ID: 39919194
Looks like you have my code, which looks to be working fine.
When I am transferred to the booking engine it has the correct dates.
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39919198
Hmm really I tried selecting dates and hit check it always defaults to today's date in the booking engine
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39919201
Its only working the first time
0
 
LVL 58

Expert Comment

by:Gary
ID: 39919206
I've checked it 4 or 5 times going back and forth and it works fine.
Do an hard refresh in your browser in case you are using old code.
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39919210
because its still appending the arrival date and number of nights after the first time

https://www.bookonthenet.net/east/premium/eresmain.aspx?id=sEg2pObaWAi6bXotx8goXeSv206wFocAB8q%2fWSTeEMY%3d&arrival_date=3-12-2014&stay_nights=1&arrival_date=3-13-2014&stay_nights=1

Thanks
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39919217
Ok I think I know what happened, I had target="_blank" that seems to give the issue
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39919236
How I can get it to work with target="_blank" Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39919237
Don't see a target in the link.
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39919242
I removed it :)
0
 
LVL 58

Expert Comment

by:Gary
ID: 39919244
So all good now?
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39919246
I added target="_blank" back because if I didn't there is no way to get back to main site.
0
 
LVL 58

Accepted Solution

by:
Gary earned 1200 total points
ID: 39919259
Ok, leave the _blank then but amend the function to this


$("#booknow").click(function(){
	arrDate = $('#arrdatepicker').datepicker('getDate');
	arrivalDate = arrDate.getMonth()+1 + "-" + arrDate.getDate() + "-" + arrDate.getFullYear();
	$(this).attr('href', 'https://www.bookonthenet.net/east/premium/eresmain.aspx?id=sEg2pObaWAi6bXotx8goXeSv206wFocAB8q%2fWSTeEMY%3d'+ '&arrival_date=' + arrivalDate + '&stay_nights=' + $("#label").html());
})

Open in new window


But...what is the ID? Is it a session ID or some kind of identifier for you?
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39919295
that Id is identifier for us
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39919303
Brilliant simply Brilliant. I wish I can give you million points for your patience :)

Thanks
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39919304
Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39919311
I think Chris deserved some recognition - it was a collaborative exercise.
(I stole some of his code to extend what I started - if you are happy I'll reopen the question so you can assign him something)
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39935800
Okiee dokiee :)
0
 
LVL 1

Author Closing Comment

by:niceoneishere
ID: 39935834
Thanks
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question