Question

使用jQuery，如何从文本框中获取值，然后根据值加载新页面？

例如，假设文本框在page1.php上包含“hello”，如何更改锚标记的默认行为现在加载以下

使page2.php？TXT =你好

到目前为止，我有以下内容：

<script type="text/javascript">
    $(document).ready(function(){
    $("a.mylink").click(function(event){
        alert("link clicked");
        event.preventDefault();
    });
});
</script>

Answer 1

Html

    <input type="text" id="demoQuery" />
    <a id='demoLink' href='javascript:'>Iam a link</a>

<强>的Javascript

jQuery('#demoLink').bind('click',function(e){
      e.preventDefault();
      document.location.href="someUrl.php?text="+ jQuery('#demoQuery').val();     
});

Answer 2

您可以使用文本框的blur事件，因此在用户完成输入后，可以使用以下jQuery更新锚点：

$("#textBoxId").blur(function() {
    var text = $(this).val();
    var end = text.length == 0 ? "" : "?txt=" + text;
    $("a.mylink").attr("href", "Page2.php" + end);
});

只需更改锚点的href即可。然后你不需要自己处理锚click。锚点只会重定向到“Page.php？txt = Hello”。这将确保链接始终是最新的，并且如果用户右键单击并在新窗口中选择打开，则链接将起作用。

或者您可以反过来处理锚点击：

$("a.mylink").click(function(e) {
   var text = $("#textBoxId").val();
   document.location.href = $(this).attr("href") + "?txt=" + text;
   e.preventDefault();
});

但是，如果用户右键单击，则不会触发此事件。

Answer 3

在锚标记上设置click事件，以便在单击时添加查询字符串。

$('a').click(function() {
   var querystring = $('input').serialize();
   this.href += querystring;
});

这使用jQuery的serialize方法。选择器是您要将字段传递到下一页的每个输入或字段的位置。祝你好运！

无需使用event.preventDefault。

jQuery anchor preventDefault

3 个答案: