Question

我想从输入字段（id =“leweb_value_99”）读出一个值到html标签（p，span或div）。

当输入字段中的值发生变化时，应该读取该值，如果输入字段有效，则输入字段leweb_value_99将被隐藏。

到目前为止我的代码：

   $(document).ready(function() {
		
		// 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
			leweb_price();
        });	
		
		// 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
			leweb_price();
        });	
		
		// 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
			leweb_price();
        });			

		// 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
			leweb_price();
        });	

		function leweb_price() {
				var a = parseInt($('#leweb_value_1_input').val());
				var b = parseInt($('#leweb_value_2_input').val());
				var c = parseInt($('#leweb_value_3_input').val());
				var z = parseInt($('#leweb_value_5_input').val());
				var total = (a+b+c)*z;
				if(!isNaN(total)){
				  $('#leweb_value_99').val(total);
				}
		}		
		  
	});

		<form id="ajax-contact-form" method="post">

		<p>Büroflächen m² Anzahl</p>
		<input type="text" name="leweb_value_1" id="leweb_value_1" value="" />
		<input type="hidden" name="leweb_value_1_input" id="leweb_value_1_input" value="0" />

		<p>Sanitärflächen m² Anzahl</p>
		<input type="text" name="leweb_value_2" id="leweb_value_2" />
		<input type="hidden" name="leweb_value_2_input" id="leweb_value_2_input" value="0" />

		<p>Küchenflächen m² Anzahl</p>
		<input type="text" name="leweb_value_3" id="leweb_value_3" />
		<input type="hidden" name="leweb_value_3_input" id="leweb_value_3_input" value="0" />

		<p>Reinigungsintervalle</p>
			<select id="leweb_value_5" class="leweb_value_5" name="leweb_value_5" value="0" />
				<option value="">Anzahl waehlen</option>
				<option value="1">1x pro Woche</option>
				<option value="2">2x pro Woche</option>
				<option value="3">3x pro Woche</option>
				<option value="4">4x pro Woche</option>
				<option value="5">5x pro Woche</option>
				<option value="6">6x pro Woche</option>
				<option value="7">7x pro Woche</option>
			  </select>
			<input type="hidden" id="leweb_value_5_input" name="leweb_value_5_input" value="1" /><br>	
			
		<p class="price-box"><strong>Preis in € (pro Woche)</strong></p>
		<p class="price-input weekly">
			<input class="price-field" type="text" id="leweb_value_99" name="leweb_value_99" value="0" />	
		</p>

Answer 1

由于您已经在更新#leweb_value_99，因此可以在同一功能中更新HTML标记。将span添加到包含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)
            }

您还应将输入字段设置为隐藏。

自动获取输入字段的值到html jquery

1 个答案: