jquery에서 텍스트 상자 값을 설정하는 방법


107

jquery를 사용하여 특정 값을 텍스트 상자에 올바르게로드하려면 어떻게해야합니까? 아래 하나를 시도했지만 [object Object]as 출력을 얻습니다 . 이것에 대해 가르쳐주세요. 저는 jquery를 처음 사용합니다.

proc = function(x, y) {
  var str1 = $('#pid').value;
  var str2 = $('#qtytobuy').value;
  var str3 = $('#subtotal').load('compz.php?prodid=' + x + '&qbuys=' + y);
  $('#subtotal').val(str3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form name="yoh" method="get">
  Product id: <input type="text" name="pid" value=""><br/> 
  Quantity to buy:<input type="text" name="qtytobuy" value="" onkeyup="proc(document.yoh.pid.value, this.value);"></br>

  Subtotal:<input type="text" name="subtotal" id="subtotal" value=""></br>
  <div id="compz"></div>

</form>


str3은 무엇입니까? 어디에서 선언합니까? 해당 객체의 속성이 필요할 때 객체를 값으로로드하려는 것 같습니다.
Fgblanch

죄송합니다. st3 = $ ( '# subtotal'). load ( 'compz.php? prodid ='+ x + '& qbuys ='+ y);
Wern Ancheta

답변:


170

URL에 대한 호출의 응답을 'compz.php?prodid=' + x + '&qbuys=' + y텍스트 상자의 값으로 설정하고 싶 습니까? 그렇다면 다음과 같이해야합니다.

$.get('compz.php?prodid=' + x + '&qbuys=' + y, function(data) {
    $('#subtotal').val(data);
});

참고: get()

코드에 두 가지 오류가 있습니다.

  • load()두고 HTML 지정된 요소로 아약스에서 반환 :

    서버에서 데이터를로드하고 반환 된 HTML을 일치하는 요소에 배치합니다.

    이 방법으로는 텍스트 상자의 값을 설정할 수 없습니다.

  • $(selector).load()jQuery 객체를 반환 합니다 . 기본적으로 객체는 [object Object]문자열로 처리 될 때로 변환됩니다 .

추가 설명 :

URL이 5.

HTML이 다음과 같은 경우 :

<div id="foo"></div>

다음의 결과

$('#foo').load('/your/url');

될거야

<div id="foo">5</div>

그러나 코드에는 입력 요소가 있습니다. 이론적으로 (유효한 HTML이 아니며 눈치 채신대로 작동하지 않음) 동등한 호출은

<input id="foo">5</input>

하지만 실제로는

<input id="foo" value="5" />

따라서 load(). 당신은 다른 방법을 사용하고, 응답을 얻고 그것을 가치로 설정해야합니다.


결과가로드되는 위치를 변경하고 싶다면 정말 더 어려워 지나요? 위의 코드는 div에로드 할 때 작동합니다.
Wern Ancheta

1
@Ieyasu Sawada : 글쎄, 현재 당신은 그것이 작동한다고 생각한 것처럼 작동하지 않기 $('#subtotal').val(str3);때문에 JavaScript 객체를 전달 load()하고 있습니다. 예,를 사용 load()하여 텍스트 또는 HTML을 div텍스트 상자 값 으로로드 할 수는 없습니다.
Felix Kling

@Ieyasu Sawada : 추가 설명을 위해 내 업데이트를 참조하십시오.
Felix Kling

마지막 질문 하나? 출력에서 ​​실제 결과 전에 공백을 얻는 이유는 무엇입니까? jquery에서 제거 할 수 있습니까? 기본적으로 compz.php에는 더 나은 가독성을 위해 많은 공백이 포함되어 있으며 이러한 공백은 실제로 결과와 함께 출력됩니다
Wern Ancheta

@Ieyasu 사와다 : 당신은 reglular 식으로 예를 들어 일반 자바 스크립트 기능을 사용할 수 있습니다 :data = data.replace(/\s+/, '');
펠릭스 클링

56

점을 유의 .value속성이 자바 스크립트 기능입니다. jQuery를 사용하려면 다음을 사용하십시오.

$('#pid').val()

가치를 얻기 위해, 그리고 :

$('#pid').val('value')

설정합니다.

http://api.jquery.com/val/

두 번째 문제와 관련하여 load방법을 사용하여 HTML 값을 자동으로 설정하려고 시도한 적이 없습니다 . 확실히 다음과 같이 할 수 있습니다.

$('#subtotal').load( 'compz.php?prodid=' + x + '&qbuys=' + y, function(response){ $('#subtotal').val(response);
});

위의 코드는 테스트되지 않았습니다.

http://api.jquery.com/load/


2
참조 목적으로 관련 jQuery API 페이지를 지적 할 가치가 val()있습니다.
David는 Monica를

1
지적하기에는 너무 기본적이지만, 아마도? 내 겸손한 의견 ... 어쨌든 업데이트되었습니다!
Mauro 2011

compz.php는 입력에있는 두 숫자의 곱을 계산합니다. 계산 된 값을로드하는 부분을 추측합니다. $ ( '# subtotal'). load ( 'compz.php? prodid ='+ x + '& qbuys ='+ y); 객체로 취급되기 때문에 객체 객체를 출력으로 보는 것입니다. 그러면 어떻게 일반 값으로 변환합니까
Wern Ancheta

1
너무 기본적인 것은 아닙니다 . 질문을 다시보세요. 그가 페이지를 보거나 그 내용을 알았다면 그는 아마도 질문하지 않았을 것입니다 =)
David는 Monica

1
진짜 문제를 지적하는 것은 좋은 출발점이되었을 것입니다. Peace and Love;)
Mauro

5

.val ()은 현재 선택된 값을 선택하기 위해 선택과 함께 작동한다는 점을 지적하고 싶습니다.


0

시험

subtotal.value= 5 // some value

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.