JavaScript를 사용하여 텍스트 입력 필드의 값을 얻으려면 어떻게합니까?

JavaScript로 검색하고 있습니다. 양식을 사용하지만 내 페이지에서 다른 것을 엉망으로 만듭니다. 이 입력 텍스트 필드가 있습니다.

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

그리고 이것은 내 JavaScript 코드입니다.

<script type="text/javascript">
  function searchURL(){
    window.location = "http://www.myurl.com/search/" + (input text value);
  }
</script>

텍스트 필드의 값을 JavaScript로 가져 오려면 어떻게합니까?

입력 요소를 양식 요소 안에 래핑하지 않고 입력 텍스트 상자 값을 직접 얻는 다양한 방법이 있습니다.

방법 1 :

document.getElementById('textbox_id').value 원하는 상자의 가치를 얻기 위해

예를 들어 document.getElementById("searchTxt").value;

참고 : 메소드 2,3,4 및 6은 요소 콜렉션을 리턴하므로 [whole_number]를 사용하여 원하는 발생을 얻으십시오. 첫번째 요소의 사용 [0], 두 번째 용도 1 등 ...

방법 2 :

document.getElementsByClassName('class_name')[whole_number].value라이브 HTMLCollection을 반환하는 사용

예를 들어 document.getElementsByClassName("searchField")[0].value; 이것이 페이지의 첫 번째 텍스트 상자 인 경우입니다.

방법 3 :

document.getElementsByTagName('tag_name')[whole_number].value라이브 HTMLCollection도 반환하는 사용

예를 들어, document.getElementsByTagName("input")[0].value; 이것이 페이지의 첫 번째 텍스트 상자 인 경우입니다.

방법 4 :

document.getElementsByName('name')[whole_number].value 또한 라이브 NodeList를 반환합니다.

예를 들어, document.getElementsByName("searchTxt")[0].value; 이것이 페이지에서 이름이 'searchtext'인 첫 번째 텍스트 상자 인 경우입니다.

방법 5 :

document.querySelector('selector').valueCSS 선택기를 사용하여 요소를 선택 하는 강력한 기능 을 사용하십시오.

예를 들어, 이름으로 선택한 태그 이름으로 선택한 클래스로 선택한 document.querySelector('#searchTxt').value;ID로
document.querySelector('.searchField').value;선택
document.querySelector('input').value;
document.querySelector('[name="searchTxt"]').value;

방법 6 :

document.querySelectorAll('selector')[whole_number].value CSS 선택기를 사용하여 요소를 선택하지만 해당 선택기를 가진 모든 요소를 ​​정적 노드 목록으로 반환합니다.

예를 들어, 이름으로 선택한 태그 이름으로 선택한 클래스로 선택한 document.querySelectorAll('#searchTxt')[0].value; ID로
document.querySelectorAll('.searchField')[0].value;선택
document.querySelectorAll('input')[0].value;
document.querySelectorAll('[name="searchTxt"]')[0].value;

지원하다

Browser          Method1   Method2  Method3  Method4    Method5/6
IE6              Y(Buggy)   N        Y        Y(Buggy)   N
IE7              Y(Buggy)   N        Y        Y(Buggy)   N
IE8              Y          N        Y        Y(Buggy)   Y
IE9              Y          Y        Y        Y(Buggy)   Y
IE10             Y          Y        Y        Y          Y
FF3.0            Y          Y        Y        Y          N    IE=Internet Explorer
FF3.5/FF3.6      Y          Y        Y        Y          Y    FF=Mozilla Firefox
FF4b1            Y          Y        Y        Y          Y    GC=Google Chrome
GC4/GC5          Y          Y        Y        Y          Y    Y=YES,N=NO
Safari4/Safari5  Y          Y        Y        Y          Y
Opera10.10/
Opera10.53/      Y          Y        Y        Y(Buggy)   Y
Opera10.60
Opera 12         Y          Y        Y        Y          Y

유용한 링크

1. 자세한 내용을 포함한 모든 버그에 대해 이러한 방법의 지원을 보려면 여기를 클릭하십시오.
2. 정적 컬렉션과 라이브 컬렉션의 차이점 여기를 클릭하십시오.
3. NodeList와 HTMLCollection의 차이점 여기를 클릭하십시오

//creates a listener for when you press a key
window.onkeyup = keyup;

//creates a global Javascript variable
var inputTextValue;

function keyup(e) {
  //setting your input text to the global Javascript Variable for every key press
  inputTextValue = e.target.value;

  //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

코드 펜에서이 기능을 참조하십시오.

다음과 같이 입력을 저장할 변수를 만듭니다.

var input = document.getElementById("input_id").value;

그런 다음 변수를 사용하여 입력 값을 문자열에 추가합니다.

= "Your string" + input;

다음을 입력 할 수 있어야합니다.

var input = document.getElementById("searchTxt");

function searchURL() {
     window.location = "http://www.myurl.com/search/" + input.value;
}

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

더 좋은 방법이 있다고 확신하지만 모든 브라우저에서 작동하는 것으로 보이며 JavaScript를 작성, 개선 및 편집하려면 최소한의 이해가 필요합니다.

또한 다음과 같이 태그 이름으로 호출 할 수 있습니다. form_name.input_name.value; 따라서 특정 형식으로 결정된 입력의 특정 값을 갖게됩니다.

이거 한번 해봐

<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
    window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>

Chrome 및 Firefox에서 테스트되었습니다.

요소 ID별로 가치를 얻으십시오.

<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">

양식 요소에서 값을 설정하십시오.

<form name="calc" id="calculator">
  <input type="text" name="input">
  <input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>

https://jsfiddle.net/tuq79821/

또한 자바 스크립트 계산기 구현을 살펴보십시오 : http://www.4stud.info/web-programming/samples/dhtml-calculator.html

@ bugwheels94에서 업데이트 :이 방법을 사용할 때이 문제를 알고 있어야 합니다.

더 많은 입력 필드가 있으면 onkeyup을 사용할 수 있습니다. 네 개 또는 입력 document.getElementById('something').value이 있다고 가정하면 성가신 것입니다. 입력 필드의 값을 가져 오려면 4 줄을 작성해야합니다.

따라서 키업 또는 키 다운 이벤트시 객체에 값을 저장하는 함수를 만들 수 있습니다.

예 :

<div class="container">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</div>

자바 스크립트 :

<script>
    const data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data.fname); //get first name from object
        console.log(data); //return object
    }
</script>

form.elements를 사용하여 양식의 모든 요소를 ​​가져올 수 있습니다. 요소에 ID가 있으면 .namedItem ( "id")로 찾을 수 있습니다. 예:

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

출처 : w3schools

당신이 경우 inputA의입니다 form당신이 좋아 할 수있는 제출 후 값을 얻으려면

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">

    function submitLoginForm(event){
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

이 방법의 이점 : 예를 들어 페이지 에 입력 및 정보를 위한 2 form 가 있습니다. senderreceiver

경우 당신은 사용하지 않는 form다음 GET 값에 대해
- 당신은 2 개의 다른 설정할 수 있습니다 id(또는 tag또는 name같은 각 필드에 대해 ...) sender-name와 receiver-name, sender-address와 receiver-address, ...
- 당신이 다음 후, 2 입력에 같은 값을 설정하면 getElementsByName(또는 getElementsByTagName.. .) 0 또는 1은 sender또는 receiver입니다. 나중에 formhtml에서 2의 순서를 변경하면 이 코드를 다시 확인해야합니다

경우 사용 form, 당신은 사용할 수 있습니다 name, address...

<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>

간단한 js

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

당신은 가치를 읽을 수 있습니다

searchTxt.value

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

<button class="search">Search</button>

jQuery를 사용하는 경우 플러그인 formInteract를 사용하여 다음을 수행하면됩니다.

// Just keep the HTML as it is.

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

페이지 하단에이 플러그인 파일을 포함시키고 다음 코드를 작성하십시오.

// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();

search.getAjax("http://www.myurl.com/search/", function(rsp){
    // Now do whatever you want to with your response
});

또는 매개 변수화 된 URL을 사용하는 경우 다음을 사용하십시오.

$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
    // Now do work with your response;
})

https://bitbucket.org/ranjeet1985/forminteract 프로젝트 링크는 다음과 같습니다.

이 플러그인은 양식의 값 가져 오기, 값을 양식에 넣기, 양식의 유효성 검증 등과 같은 여러 목적으로 사용할 수 있습니다. 프로젝트의 index.html 파일에서 코드 예제를 볼 수 있습니다.

물론 나는이 프로젝트의 저자이며 모두 더 나은 것을 만들기를 환영합니다.