JQuery - 특정 폼 안에 있는 id 찾기

빙 봇을 통해 구한 답이긴 하지만, 정리가 완전 깔끔하다.

jquery로 특정 폼 안에 있는 input 요소를 id로 찾는 방법은 다음과 같습니다.

• 폼의 id나 name을 알고 있다면, $("#form_id").find("#input_id") 또는 $("form[name='form_name']").find("#input_id")와 같이 폼의 셀렉터 뒤에 .find() 메소드를 사용하여 input의 id를 인자로 넘겨줍니다12.
• 폼의 id나 name을 모르거나 여러 폼 중 하나를 선택하고 싶다면, $("form").eq(index).find("#input_id")와 같이 eq() 메소드를 사용하여 원하는 폼의 인덱스를 지정해줍니다3. 인덱스는 0부터 시작합니다.

예를 들어, 다음과 같은 HTML 코드가 있다고 가정해보겠습니다.

<form id="form1" name="formA">
  <input id="name" type="text" value="Alice"/>
  <input id="age" type="number" value="20"/>
</form>
<form id="form2" name="formB">
  <input id="name" type="text" value="Bob"/>
  <input id="age" type="number" value="30"/>
</form>

이때, 첫 번째 폼의 name input의 값을 가져오려면 다음과 같이 작성할 수 있습니다.

var name1 = $("#form1").find("#name").val(); // "Alice"
var name2 = $("form[name='formA']").find("#name").val(); // "Alice"
var name3 = $("form").eq(0).find("#name").val(); // "Alice"

두 번째 폼의 age input의 값을 가져오려면 다음과 같이 작성할 수 있습니다.

var age1 = $("#form2").find("#age").val(); // "30"
var age2 = $("form[name='formB']").find("#age").val(); // "30"
var age3 = $("form").eq(1).find("#age").val(); // "30"

참고로, input 요소의 값은 .val() 메소드로 얻을 수 있습니다4.

도움이 되셨으면 좋겠습니다.😊

 

https://api.jquery.com/descendant-selector/

Descendant Selector (“ancestor descendant”) | jQuery API Documentation

가을속 오렌지 찾기

© 2023 BJ