入力フォームの値を取得して連結します

私はこの小さな問題に悩まされました。どのようにすべての入力フォームから値を取得して連結することができないのか分かりません。たとえば、あるフォームで "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

何らかの理由1つの値？ –

Btw、複数の入力、または複数のフォームタグ（複数の入力あり）を持っていますか？ – sinisake

あなたはこれは、私が唯一inputが希望どおりに選択し、他の異なるタグを指定することができ、それらのみをフィルタリングするために指定したフォームのアドレスシナリオに単純な例である。この

$(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

ありがとう、私は何かを挿入しようとしているときに、それは未定義を返し、最後の入力を2倍にします。私もこの種の問題を抱えていましたが、解決策を見つけることはできません。 –

を試すことができます、私は別にこのvar $inputs = $('#add_location_form :input');ようにそれを求めているが、あなたは、単に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>

前 filter機能で使用することができます

出典

2017-01-01 18:04:45

しかし、bindは一意の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

私はそれについても考えていましたが、それぞれのことを順番に保つことが保証されていますか？ –

ありがとうございますが、それでも正しく動作しません。参照エラーを返します：valは定義されていません。 –

@AliceJarmusch：typo..updated my code –

が、おかげで助けをみんな：あなたは表向きである何のために4つの入力を使用している

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

出典

2017-01-02 08:54:11

入力フォームの値を取得して連結します

答えて

関連する問題