獲取輸入表單值並將其連接起來

我陷入了這個小問題：我只是無法理解如何從每個輸入表單獲取值並將其連接。例如，如果在一個表單中我會寫「Hello」，而在另一個「World」中，它應該在.results類的div中返回「Hello World」。提前致謝！獲取輸入表單值並將其連接起來

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <style> 
     </style> 
    </head> 

    <body> 
    <input type=text value=""/> 
    <input type=text value=""/> 
    <input type=text value=""/> 
    <input type=text value=""/> 
    <div class="results"></div> 
    </body> 

    <script> 
    $(document).ready(function() { 
       $('input').keyup(function() { 
       $('.results').html('<b>' + $(this).val() + '</b>'); 
       }); 
      }); 
    </script> 
</html>

來源

2017-01-01 Alice Jarmusch

任何原因，你正在使用的4個輸入什麼是表面上一個值？ –

順便說一句，你有多個輸入，或多個表單標籤（多輸入）？ – sinisake

你可以試試這個

$(document).ready(function() { 
    var finalResult; 
    $('input').keyup(function() { 
     $('input[type=text]').each(function(){ 
     finalResult+=$(this).val(); 
     }); 
     $('.results').html(finalResult); 
    }); 
});

來源

2017-01-01 18:04:31

感謝您的努力，但每次我嘗試插入某些內容時，都會返回undefined，然後使最後一次輸入翻倍。我也有這樣的問題，但我找不到解決方案。 –

這是一個簡單的例子，在形式的地址的情況下，我只指定input他們只能過濾，只要你想，你可以指定選等不同標籤，我已經分別把它叫做這樣var $inputs = $('#add_location_form :input');，但你可以在filter函數之前each

$(document).ready(function() { 
 

 
$('input').keyup(function() { 
 
    var concat_string = ''; 
 
    var $inputs = $('#add_location_form :input'); 
 
    $inputs.each(function() { 
 
     var value = $(this).val(); 
 
     concat_string += value + ' '; 
 
     $('.results').html('<b>' + concat_string + '</b>'); 
 

 
    }); 
 
}); 
 
});

.formitem { 
 
    padding: 10px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" action="add_location.php" name="add_location_form" id="add_location_form"> 
 

 

 
    <div class="formitem"> 
 
    <label for="street">Street Address:</label> 
 
    <input type="text" id="street" name="street" /> 
 
    </div> 
 

 
    <div class="formitem"> 
 
    <label for="city"> City:</label> 
 
    <input type="text" id="city" name="city" /> 
 
    </div> 
 

 
    <div class="formitem"> 
 
    <label for="zip">Zip:</label> 
 
    <input type="text" id="zip" name="zip" /> 
 
    </div> 
 

 

 

 

 
</form> 
 
<div class="results"></div>

只需使用

來源

2017-01-01 18:04:45

但綁定使用ID，這是唯一的，我在這裏有輸入。我看到了這個解決方案，但我沒有成功應用它。 –

@AliceJarmusch我已更新答案檢查並讓我知道 –

試試這個：

<script> 
    $(document).ready(function() { 

       $('input').keyup(function() { 
        var concat_string = ''; 
        $("input").each(function(){ 
         var value = $(this).val(); 
         concat_string+=" "+value ; 
        }); 
       $('.results').html('<b>' + concat_string + '</b>'); 
       }); 
      }); 
    </script>

Working Fiddle

來源

2017-01-01 18:05:54

我也在考慮這個問題，但是each（）是否保證能夠保持順序？ –

謝謝，但它仍然無法正常工作。它返回參考錯誤：val未定義。 –

@AliceJarmusch：有一個錯字..更新了我的代碼 –

由我自己解決了，但是感謝大家的幫助：

$(document).ready(function() { 
      $('input').keyup(function() { 
      $('.results').html(""); 
      $('input').each(function() { 
      $('.results').append($(this).val()+" "); 
      }); 
     }); 
     }); 
</script>

來源

2017-01-02 08:54:11

獲取輸入表單值並將其連接起來

回答

相關問題