입력 양식 값 가져 오기 및 연결

이 작은 문제에 봉착했습니다. 어떻게 모든 입력 양식에서 값을 가져 와서 연결시킬 수 있는지 이해할 수 없습니다. 예를 들어, 한 양식에서 "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 개 입력을 사용하고 하나의 가치? –

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

고맙습니다.하지만 무언가를 삽입하려고 할 때마다 정의되지 않은 값을 반환하고 마지막 입력을 두 배로 늘립니다. 나는 또한 이런 종류의 문제가 있었지만 나는 해결책을 찾을 수 없다. –

을 시도 할 수 있습니다 나는 별도로 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 기능에서 사용할 수있는 자신이 해결

<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:04:45

하지만 bind는 고유 한 ID를 사용하며 여기에 입력 값이 있습니다. 이 솔루션을 보았지만 적용하지 못했습니다. –

@AliceJarmusch 나는 대답 체크를 업데이트했고 알려 주었다. –

이 시도

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

출처

2017-01-01 18:05:54

나는 그것에 대해서도 생각하고 있었다. –

감사하지만, 여전히 제대로 작동하지 않습니다. 참조 오류를 반환합니다. val이 정의되지 않았습니다. –

@AliceJarmusch : 오타가 발생했습니다. 내 코드를 업데이트했습니다. –

을하지만, 모두 감사합니다 도움 :

출처

2017-01-02 08:54:11

입력 양식 값 가져 오기 및 연결

답변

관련 문제