動態填充html輸入

我有一個鏈接（一個標籤），我希望它可以根據其他兩個文本輸入作爲值使用jquery動態填充。動態填充html輸入

例如

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>

任何提示，指導理解。

編輯：填充輸入的值。

來源

2015-08-19 antonakis

感謝您的歡迎downvotes。編輯：感謝upvotes球員 – antonakis

你想讓他們動態填充....與/到什麼？輸入的名稱？輸入值？請編輯您的問題，並提供您希望實現的更多細節，並請顯示您迄今嘗試的內容。 – NewToJS

@NewToJS的值。感謝您的反饋將立即做。 – antonakis

我增加了一些class和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的

來源

2015-08-19 09:19:07

謝謝。它工作正常。 – antonakis

@antonakis：很高興我的回答幫了你，在這裏我的博客你可能會發現一些有趣的jQuery Stuff http://codepedia.info/category/learn-jquery/（瞭解jQuery） –

您可以更改文本，如：

$("#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()); 
 
});

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

來源

2015-08-19 09:22:14 Tushar

謝謝。我感謝您的幫助 – antonakis

基本上一樣接受的答案。具有基本驗證的情況下，真正的驗證程序會過度殺傷。請注意，標題具有誤導性......它不是輸入內容而是錨定標記。

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

應該包括主題（和做的伎倆）。

來源

2015-08-19 10:31:54 Leo128

動態填充html輸入

回答

相關問題