Tammu
asked on
How to pass select box selected option value to an Anchor tag as query string
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
here is the anchor I am trying to pass the values
so basically the url should look like
any example or reference is appreciated
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>
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>
so basically the url should look like
<a href="http://www.mysite.com/page/book.html?chkDate=03-06-2014">Search</a>
any example or reference is appreciated
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;
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;
ASKER
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
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
all the script is in a file called picker.js at
http://www.easterninns.com
Thanks and appreciate it
Change the script to below, WP uses jQuery instead of $
You also need to do this with your datepicker code in picker.js
When you've made the changes let me know.
<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>
You also need to do this with your datepicker code in picker.js
When you've made the changes let me know.
ASKER
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
Thanks for helping me on this
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>
Thanks for helping me on this
Beddy time for me, can you bump this tomorrow if I forget.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
will this be possible by using FORM tag and submit button.
Thanks
ASKER
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
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
You're not calling your function anywhere - add this
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?
$(".hasDatepicker").change(function(){
if($("#depdatepicker").val()!='' && $("#depdatepicker").val()!='') {
var diff = ($("#depdatepicker").datepicker("getDate") - $("#arrdatepicker").datepicker("getDate")) / 1000 / 60 / 60 / 24;
$('#label').html(diff);
}
})
And remove the function dateDifference() {} function
Change this line
$('#booknow').attr('href',
to
$(this).attr('href', $(this).attr("href") + "&" + newHref);
I assume you should be passing in the number of nights as well?
ASKER
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&st ay_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
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&st
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
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);
}
});
});
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())
})
ASKER
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
but If try like Mr. Gary, It's not working at all
and here Mr. Gary
here is preview again which is currently using Mr. Gary's code.
http://www.easterninns.com/test-home/
Thanks again
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);
}
});
});
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());
})
});
here is preview again which is currently using Mr. Gary's code.
http://www.easterninns.com/test-home/
Thanks again
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.
When I am transferred to the booking engine it has the correct dates.
ASKER
Hmm really I tried selecting dates and hit check it always defaults to today's date in the booking engine
ASKER
Its only working the first time
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.
Do an hard refresh in your browser in case you are using old code.
ASKER
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&sta y_nights=1 &arrival_d ate=3-13-2 014&stay_n ights=1
Thanks
https://www.bookonthenet.net/east/premium/eresmain.aspx?id=sEg2pObaWAi6bXotx8goXeSv206wFocAB8q%2fWSTeEMY%3d&arrival_date=3-12-2014&sta
Thanks
ASKER
Ok I think I know what happened, I had target="_blank" that seems to give the issue
ASKER
How I can get it to work with target="_blank" Thanks
Don't see a target in the link.
ASKER
I removed it :)
So all good now?
ASKER
I added target="_blank" back because if I didn't there is no way to get back to main site.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
that Id is identifier for us
ASKER
Brilliant simply Brilliant. I wish I can give you million points for your patience :)
Thanks
Thanks
ASKER
Thanks
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)
(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)
ASKER
Okiee dokiee :)
ASKER
Thanks
Open in new window
You might want to spell months correctly - I've used your spelling