onchange下拉菜单将参数添加到inputbox中的url [英] onchange dropdown add parameters to url in inputbox

问题描述

我正在设计联盟计划，其中每个用户都有自己的链接代码，也就是跟踪网址。
，并且我愿意为其添加额外的参数，具体取决于下拉选择，这将是不同的着陆页。

例如，

原始网址

  http://www.google.com/tracker/blah1 
  

，如果用户从下拉菜单中选择值，则应该像

  http://www.google.com/tracker/blah1/queryid/1 
  

我使用此代码在输入框中将最终用户的网址显示为只读。

 < ; input size =100type =textvalue =<？= $ url;？>只读> & nbsp;< a target =_ blankhref =<？= $ url;？>>连结< / a>< / b> 
  

这两个下拉就是这样。

 < select name =niche> 
< option value =0label =选择一个>选择一个< / option> 
< option value =/ queryid / 1label =option 1> option 1< / option> 
< option value =/ queryid / 2label =option 2> option 2< / option> 
< option value =/ queryid / 3label =option 3> option 3< / option> 
< option value =/ queryid / 4label =option 4> option 4< / option> 
< option value =/ queryid / 5label =option 5> option 5< / option> 
< option value =/ queryid / 6label =option 6> option 6< / option> 
< / select>通过选择选项1 ，它应该添加 / queryid / 1来添加
  

到url的末尾。
如果没有被选中，那么没有变化。

 < select name =landingpage> 
< option value =0label =选择一个>选择一个< / option> 
< option value =/ cid / 1label =landing 1> landing 1< / option> 
< option value =/ cid / 2label =landing 2> landing 2< / option> 
< / select>通过选择登陆1 将会添加 / cid / 1  $ / code> 

/ strong>到网址的末尾。
如果没有选择，那么没有变化。



那么我该怎么做？

感谢您的时间。

update：更新了当前使用htaccess重写规则的下拉列表的值。

更新：
i正在按照Rishi Php演示的规定使用 http://jsfiddle.net/g6U4a/2/

但默认情况下它不显示 SourceUrl
it应在默认情况下显示源url，但在用户更改下拉值时显示。
如何实现这一点？

更新：
Rishi Php修复了加载默认网址。
这里是代码。 http://jsfiddle.net/g6U4a/3/
感谢你们所有人。

不要忘记在标题中加入这个元素

 <脚本SRC = http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js >< /脚本> 
  

被取代

  var SourceUrl =http://www.google.com/?tracker=blah1; 
  

with

  var SourceUrl =<？= $ url;？>; 
  

所以每个会员都会有独特的链接

解决方案

试试这个......它会帮助你。 * 更新工作示例 *

  var SourceUrl =http://www.google.com/?tracker=blah1; 
 var queryUrl =; 
 var landingUrl =; （$（this）.val（）== 0）函数（）{
 $（'＃querySelct'）。 {
 queryUrl =; 
} else {
 queryUrl = $（this）.val（）; 
} 
 MakeUrl（）; 
 return假（
））; 
 
 $（'＃landingSelect'）。on（'change'，function（）{
 if（$（this）.val（）= = 0）{
 landingUrl =; 
} else {
 landingUrl = $（this）.val（）; 
} 
 MakeUrl（）; 
返回false; 
}）; 
}）; 
 
函数MakeUrl（）{
 var finalUrl = SourceUrl + queryUrl + landingUrl; 
 $（'＃urlBox'）。val（finalUrl）; 
 $（'＃MyLink'）。attr（'href'，finalUrl）; 
} 
  

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 which will be different landing pages.

e.g. original url

http://www.google.com/tracker/blah1

and if user selects value from down the url should be like

http://www.google.com/tracker/blah1/queryid/1

i am using this code for displaying the url to the end user in the input box set as readonly.

<input size="100" type="text" value="<?=$url;?>" readonly> &nbsp;- &nbsp;<a  target="_blank" href="<?=$url;?>">Link</a></b>

theres gonna be two drop down like these.

<select name="niche">
<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>

by selecting option 1 it should add /queryid/1 to the end of the url. if none is selected then no change will be there.

<select 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>

by selecting landing 1 will add /cid/1 to the end of the url. if none is selected then no change will be there.

so how do i do this ?

Thanks for your time.

update: updated the values of dropdown as currently using htaccess rewrite rules.

update: i am using as specified by "Rishi Php" demo is here http://jsfiddle.net/g6U4a/2/

but by default its not showing SourceUrl it should show the source url by default , in the box but it shows it when user changes drop down values. how can i achieve this ??

update: "Rishi Php" fixed the issue of on load default url. here is the code. http://jsfiddle.net/g6U4a/3/ Thanks to all of you guys.

dont forget to add this in header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

replaced

var SourceUrl = "http://www.google.com/?tracker=blah1";

with

var SourceUrl = "<?=$url;?>";

so each affiliate will have unique link

解决方案

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);
}

这篇关于onchange下拉菜单将参数添加到inputbox中的url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！