html jqueryに入力フィールドの値を自動的に取得

Question

入力フィールド（id = "leweb_value_99"）からhtmlタグ（p、spanまたはdiv）に値を読み込みたいとします。

値は入力フィールドで値が変更されたときに読み取られ、入力フィールドleweb_value_99は機能する場合は非表示になります。

私のコード今のところ：

$(document).ready(function() { 
 
\t \t 
 
\t \t // BÜROFLÄCHEN 
 
     $('#leweb_value_1').change(function() { // WENN SELECT CHANGED 
 
      $('#leweb_value_1_input').val(''); // TEXTFELD LEEREN 
 
      var selectValue = $(this).val()*0.2; // VALUE AUS SELECT 
 
      $('#leweb_value_1_input').val(selectValue); // TEXTFELD FÜLLEN 
 
\t \t \t leweb_price(); 
 
     }); \t 
 
\t \t 
 
\t \t // SANITÄRFLÄCHEN 
 
     $('#leweb_value_2').change(function() { // WENN SELECT CHANGED 
 
      $('#leweb_value_2_input').val(''); // TEXTFELD LEEREN 
 
      var selectValue = $(this).val()*0.45; // VALUE AUS SELECT 
 
      $('#leweb_value_2_input').val(selectValue); // TEXTFELD FÜLLEN 
 
\t \t \t leweb_price(); 
 
     }); \t 
 
\t \t 
 
\t \t // KÜCHENFLÄCHEN 
 
     $('#leweb_value_3').change(function() { // WENN SELECT CHANGED 
 
      $('#leweb_value_3_input').val(''); // TEXTFELD LEEREN 
 
      var selectValue = $(this).val()*0.45; // VALUE AUS SELECT 
 
      $('#leweb_value_3_input').val(selectValue); // TEXTFELD FÜLLEN 
 
\t \t \t leweb_price(); 
 
     }); \t \t \t 
 

 
\t \t // REINIGUNGSINTERVALLE 
 
     $('#leweb_value_5').change(function() { // WENN SELECT CHANGED 
 
      $('#leweb_value_5_input').val(''); // TEXTFELD LEEREN 
 
      var selectValue = $(this).val(); // VALUE AUS SELECT 
 
      $('#leweb_value_5_input').val(selectValue); // TEXTFELD FÜLLEN 
 
\t \t \t leweb_price(); 
 
     }); \t 
 

 
\t \t function leweb_price() { 
 
\t \t \t \t var a = parseInt($('#leweb_value_1_input').val()); 
 
\t \t \t \t var b = parseInt($('#leweb_value_2_input').val()); 
 
\t \t \t \t var c = parseInt($('#leweb_value_3_input').val()); 
 
\t \t \t \t var z = parseInt($('#leweb_value_5_input').val()); 
 
\t \t \t \t var total = (a+b+c)*z; 
 
\t \t \t \t if(!isNaN(total)){ 
 
\t \t \t \t $('#leweb_value_99').val(total); 
 
\t \t \t \t } 
 
\t \t } \t \t 
 
\t \t 
 
\t });

\t \t <form id="ajax-contact-form" method="post"> 
 

 
\t \t <p>Büroflächen m² Anzahl</p> 
 
\t \t <input type="text" name="leweb_value_1" id="leweb_value_1" value="" /> 
 
\t \t <input type="hidden" name="leweb_value_1_input" id="leweb_value_1_input" value="0" /> 
 

 
\t \t <p>Sanitärflächen m² Anzahl</p> 
 
\t \t <input type="text" name="leweb_value_2" id="leweb_value_2" /> 
 
\t \t <input type="hidden" name="leweb_value_2_input" id="leweb_value_2_input" value="0" /> 
 

 
\t \t <p>Küchenflächen m² Anzahl</p> 
 
\t \t <input type="text" name="leweb_value_3" id="leweb_value_3" /> 
 
\t \t <input type="hidden" name="leweb_value_3_input" id="leweb_value_3_input" value="0" /> 
 

 
\t \t <p>Reinigungsintervalle</p> 
 
\t \t \t <select id="leweb_value_5" class="leweb_value_5" name="leweb_value_5" value="0" /> 
 
\t \t \t \t <option value="">Anzahl waehlen</option> 
 
\t \t \t \t <option value="1">1x pro Woche</option> 
 
\t \t \t \t <option value="2">2x pro Woche</option> 
 
\t \t \t \t <option value="3">3x pro Woche</option> 
 
\t \t \t \t <option value="4">4x pro Woche</option> 
 
\t \t \t \t <option value="5">5x pro Woche</option> 
 
\t \t \t \t <option value="6">6x pro Woche</option> 
 
\t \t \t \t <option value="7">7x pro Woche</option> 
 
\t \t \t </select> 
 
\t \t \t <input type="hidden" id="leweb_value_5_input" name="leweb_value_5_input" value="1" /><br> \t 
 
\t \t \t 
 
\t \t <p class="price-box"><strong>Preis in € (pro Woche)</strong></p> 
 
\t \t <p class="price-input weekly"> 
 
\t \t \t <input class="price-field" type="text" id="leweb_value_99" name="leweb_value_99" value="0" /> \t 
 
\t \t </p>

Answer 1

すでに＃1 leweb_value_99を更新しているとして、あなたは、同じ機能でHTMLタグを更新することができます。 含まれるpタグにスパンを追加すると、関数が呼び出されるたびにHTMLを値に置き換えることができます。

<p class="price-input weekly"> 
<span></span> 
     <input class="price-field" type="text" id="leweb_value_99" name="leweb_value_99" value="0" /> 
    </p> 

アップデートはJavaScriptこの

if(!isNaN(total)){ 
       $('#leweb_value_99').val(total); 
$('.price-input.weekly span').html(total) 
      } 

にまた隠しにご入力フィールドを設定する必要があります。