Onchange Dropdown Add Parameters To Url In Inputbox

i am designing affiliate program, in which each user has his own link-code aka tracking url. and i am willing to add extra parameters to it depending on the drop down selection whi

Solution 1:

Try this... It 'll help. *UPDATED WORKING DEMO*

var SourceUrl = "http://www.google.com/?tracker=blah1";
var queryUrl = "";
var landingUrl = "";
$(function() {
  $('#querySelct').on('change', function () {
      if($(this).val() == 0) {
         queryUrl = "";
      } else {
          queryUrl = $(this).val();
      }
      MakeUrl();
      return false;
  });

    $('#landingSelect').on('change', function () {
      if($(this).val() == 0) {
         landingUrl = "";
      } else {
         landingUrl = $(this).val();
      }
     MakeUrl();
     return false;
  });
});

function MakeUrl() {
    var finalUrl = SourceUrl + queryUrl + landingUrl;
   $('#urlBox').val(finalUrl);
  $('#MyLink').attr('href', finalUrl);
}

Solution 2:

You can use getElementById to get the values from the <select> fields and set them into your textfield.

DEMO: http://jsfiddle.net/g6U4a/1/

HTML

<select id="queryid">
<option value="0" label="choose one">choose one</option>
<option value="&queryid=1" label="option 1">option 1</option>
<option value="&queryid=2" label="option 2">option 2</option>
<option value="&queryid=3" label="option 3">option 3</option>
<option value="&queryid=4" label="option 4">option 4</option>
<option value="&queryid=5" label="option 5">option 5</option>
<option value="&queryid=6" label="option 6">option 6</option>  
</select>

<br>

<select id="cid" name="landingpage">
<option value="0" label="choose one">choose one</option>
<option value="&cid=1" label="landing 1">landing 1</option>
<option value="&cid=2" label="landing 2">landing 2</option>
</select>

<input type="button" id="change" value="Create URL" onclick="createUrl()" /><br>

<input type="text" id="result" placeholder="placeholder" readonly><br>

JAVASCRIPT

function createUrl() {
    var google = "http://www.google.com/";
    document.getElementById("result").value = google + document.getElementById("queryid").value +  document.getElementById("cid").value;
}

Solution 3:

You could do something like this:

<select id="yourSelect" name="landingpage">
<option value="" label="choose one">choose one</option>
<option value="www.yourdomain.com&cid=1" label="landing 1">landing 1</option>
<option value="www.yourdomain.com&cid=2" label="landing 2">landing 2</option>
</select>


$(function(){
  $('#yourSelect').on('change', function () {
      var url = $(this).val();
      if (url) {
          window.location = url;
      }
      return false;
  });
});

Solution 4:

Give selector for selectbox like

var urlToAppend1=$('#nicheId :selected').val();

originalurl='http://www.google.com/?tracker=blah1';
var url='';
url+=originalurl;
url+=urlToAppend;

Solution 5:

Try it.

$(function(){
        $('select').change(function() {

            var arr = new Array();
            $('select option:selected').each(function(){
                var value = $(this).val();
                if(value != "0"){
                    arr.push($(this).val());
                }
            });
            // selected value are now concatenating here.
            var str = arr.join('');
            alert(str);
        });

    });