自動獲取輸入字段的值，以HTML的jQuery

我想讀出從輸入字段（ID =「leweb_value_99」）的值到HTML標記（P，SPAN或DIV）。自動獲取輸入字段的值，以HTML的jQuery

值應該被讀出時，如果它的工作價值的變化在輸入欄，輸入框的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>

來源

2016-05-24 Jo Le

什麼問題呢？當你運行leweb_price函數時，所有的輸入都被填充了嗎？因爲如果沒有設置這些值中的任何一個值，它將不起作用，如果輸入字段爲空，則必須將該值設置爲0。 –

因爲你已經更新＃leweb_value_99可以更新相同功能的HTML標籤。跨度添加到含對標籤，然後你就可以在每一個函數被調用的時間與你的價值來取代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) 
      }

您還應該設置你的輸入欄隱藏。

來源

2016-05-24 16:57:40 darrenallen7

自動獲取輸入字段的值，以HTML的jQuery

回答

相關問題