Question

如何获取所选的radiobtn值和表单中输入的关键字，并使用jquery或javascript将其传递给按钮点击的URL？如果单选按钮被选为“全部”并且键入的关键字为“舞蹈”且网址为http://myschool.com/event.aspx，那么我希望在点击按钮时添加这样的网址：http://myschool.com/event.aspx?all&dance

<div class="EventRadios" style="color:#574319; font:13px Trebuchet">
    <input type="radio" name="EventType" value="All" />All &nbsp;  
    <input type="radio" name="EventType" value="Class" />Class &nbsp;  
    <input type="radio" name="EventType" value="Event" />Event &nbsp;    
    <input type="radio" name="EventType" value="Support Group" />Support Group &nbsp;&nbsp;<br /><br />
</div>
<input name="KeywordBox" class="BasicSearchInputBox" type="text" value="Keyword Search..."/>
<div class="searchBtnHolder"><a class="searchButton" href="#" type="submit"><span>Search</span></a></div>

Answer 1

最佳选择是jQuery BBQ，这样您也可以保留历史记录。

请查看此示例：http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/

您的问题的简单答案是获取所有表单值并使用您的值创建url字符串并发送到location.href =“您的网址+值”;

$(".searchButton").click(function(){
    var radioVal =  $('input:radio[name=EventType]:checked').val();
    var textVal = $("input:text[name=keywordBox]").val();

    value = "r="+ radioVal + "&t=" + textVal;
    location.href = "yourURL" + value;

});

Answer 2

您可以使用.serialize()方法：

var queryString = $('#myForm').serialize();

会给你类似的东西：

EventType=All&KeywordBox=blablabla

然后您可以加载您想要的页面：

document.location = 'http://myschool.com/event.aspx?'+queryString;

摘要：

<form id="myForm" method="GET"><div class="EventRadios" style="color:#574319; font:13px Trebuchet">
    <input type="radio" name="EventType" value="All" />All &nbsp;  
    <input type="radio" name="EventType" value="Class" />Class &nbsp;  
    <input type="radio" name="EventType" value="Event" />Event &nbsp;    
    <input type="radio" name="EventType" value="Support Group" />Support Group &nbsp;&nbsp;<br /><br />
</div>
<input name="KeywordBox" class="BasicSearchInputBox" type="text" value="Keyword Search..."/>
<div class="searchBtnHolder"><a class="searchButton" href="#" type="submit"><span>Search</span></a></div></form>
<script type="text/javascript">
  $('.searchButton').click(function(ev){

    var queryString = $('#myForm').serialize();
    document.location = 'http://myschool.com/event.aspx?'+queryString;
  });
</script>

你正在寻找什么？

在buttonclick jquery上为URL添加查询字符串

2 个答案: