Dynamically fill html input

У меня есть ссылка (тег), в которой я хочу, чтобы она динамически заполнялась в зависимости от того, какие значения имеют два других ввода текста, используя jquery.Dynamically fill html input

Например

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 guys – antonakis

Вы хотите, чтобы они были динамически заполнены .... с/на что? Имя входов? Значения входов? Измените свой вопрос и дайте более подробную информацию о том, чего вы хотите достичь, и, пожалуйста, покажите, что вы пробовали до сих пор. – NewToJS

@NewToJS значения. Благодарим вас за обратную связь. – antonakis

Я добавил некоторый класс и идентификатор в текстовом поле, тег и события изменения я установить путь, 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 http://codepedia.info/category/learn-jquery/ (Learn 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

Dynamically fill html input

ответ

Смежные вопросы