Получить значение поля ввода автоматически в html jquery

Я хочу прочитать значение из поля ввода (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>

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

    Вы также должны установить поле ввода скрытым.