Question

我有一个链接（标记），我希望它可以根据其他两个文本输入作为值动态填充，使用jquery。

例如

Category: <input type="text" name="category"><br>
Sub-Category: <input type="text" name="subcat"><br>


<a href="http://domain.com/cat=$category/sub=$subcat">You will view $subcat under $category</a>

任何提示，指导都表示赞赏。

编辑：填写输入值。

Answer 1

我在文本框，标签和更改事件中添加了一些类和ID，我设置了路径，标签的txt

Category: <input id="txtCategory" type="text" class='myEvent' name="category"><br>
Sub-Category: <input  id="txtSubCat" type="text" class='myEvent' name="subcat"><br>


<a id="myAnchor" href="http://domain.com/cat=$category/sub=$subcat">You will view $subcat under $category</a>

$(".myEvent").on('input', function () {

    var category = $("#txtCategory").val();
    var subCategory = $("#txtSubCat").val();
    var set_hrefSrc = "http://domain.com/cat=" + category + "/sub=" + subCategory;

    $("#myAnchor").html("you will view" + subCategory + " under " + category).attr("href", set_hrefSrc);

});

<强> JsFiddle Demo

<强> Blog Learn jQuery: Simple and easy jQuery tutorials

Answer 2

您可以更改文字：

＆＃13;

$("#subcat").on('change keyup paste', function() {
  $("#txtsub").text($(this).val());
  $("#nav").attr("href", "http://domain.com/cat=" + $("#category").val() + "/sub=" + $(this).val());
});
$("#category").on('change keyup paste', function() {
  $("#txtcat").text($(this).val());
  $("#nav").attr("href", "http://domain.com/cat=" + $(this).val() + "/sub=" + $("#txtsub").val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Category:
<input type="text" id="category">
<br>Sub-Category:
<input type="text" id="subcat">
<br>


<a id="nav" href="http://domain.com/cat=$category/sub=$subcat">You will view <span id="txtsub"></span> under <span id="txtcat"></span></a>

＆＃13;

Answer 3

基本上与接受的答案相同。具有基本验证功能，以防真正的验证器过度使用。请注意，标题具有误导性......它不是填充的输入，而是锚标记。

<html>

<head>

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

    <script type="application/javascript">

    function your_update_function()
    {
        var category = $("#category").val().trim();
        var subcat = $("#subcat").val().trim();

        if(category && subcat)
        {
            var url = "http://domain.com/cat="+category+"/sub="+subcat;
            var htm = "You will view " + subcat + " under " + category;
            $("#fill_me").attr('href', url).html(htm);
        }
        else
        {
            $("#fill_me").attr('href','#').html('Please write something in both fields above');
        }
    }

    $(function(){

        $("#category, #subcat").on('input', your_update_function);
    });

    </script>

</head>

<body>

Category: <input type="text" name="category" id="category"><br>
Sub-Category: <input type="text" name="subcat" id="subcat"><br>

<a href="http://domain.com/cat=$category/sub=$subcat" id="fill_me"></a>

</body>

应该涵盖主题（并做到这一点）。

动态填充html输入

3 个答案: