prosource

쿼리 양식 필드 값 가져오기

probook 2023. 11. 4. 10:53
반응형

쿼리 양식 필드 값 가져오기

저는 jquery 템플릿을 사용하여 같은 페이지에 여러 요소를 동적으로 생성하고 있습니다.각 요소는 이렇게 생겼습니다.

<div id ="DynamicValueAssignedHere">
    <div class="something">Hello world</div>
    <div class="formdiv">
        <form name="inpForm">
            <input type="text" name="FirstName" />
            <input type="submit" value="Submit" />
        </form>
    </div>
</div>

Jquery를 이용해서 제출 양식을 처리하고 싶습니다.만약 문제가 생기면 폼 값을 이전 값으로 되돌리고 싶습니다.제 질문은 Jquery를 사용하여 입력 상자의 값을 얻으려면 어떻게 해야 합니까?예를 들어, 나는 함으로써 클래스 "something"으로 디브의 가치를 얻을 수 있습니다.

var something = $(#DynamicValueAssignedHere).children(".something").html();

비슷한 방식으로 텍스트 상자의 가치를 다시 찾을 수 있기를 원합니다.지금은 제가.

var text = $(#DynamicValueAssignedHere).children(".formdiv").findnext('input[name="FirstName"]').val();

하지만 효과가 없는 것 같습니다.

사용해야 합니다.value attribute가치를 얻다

<input type="text" name="FirstName" value="First Name" />

해보세요.

var text = $('#DynamicValueAssignedHere').find('input[name="FirstName"]').val();

그것은 당신이 하고 있는 것보다 훨씬 더 간단할 수 있습니다.

HTML:

<input id="myField" type="text" name="email"/>

자바스크립트:

// getting the value
var email = $("#myField").val();

// setting the value
$("#myField").val( "new value here" );

html 필드를 검색하지 않는 대체 접근 방식:

var $form = $('#' + DynamicValueAssignedHere).find('form');
var formData = $form.serializeArray();
var myFieldName = 'FirstName';
var myFieldFilter = function (field) {
  return field.name == myFieldName;
}
var value = formData.filter(myFieldFilter)[0].value;


$("form").submit(function(event) {
    
      var firstfield_value  = event.currentTarget[0].value;
     
      var secondfield_value = event.currentTarget[1].value; 
     
      alert(firstfield_value);
      alert(secondfield_value);
      event.preventDefault(); 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" >
<input type="text" name="field1" value="value1">
<input type="text" name="field2" value="value2">
</form>

입력의 ID를 알고 있는 경우에는 다음 항목만 사용하면 됩니다.

var value = $("#inputID").val();

var textValue = $("input[type=text]").val()

모든 텍스트 상자의 모든 값을 가져옵니다.당신은 아이들, 첫째 아이 등의 방법을 사용하여 연마할 수 있습니다.양식별 $('form[name=form1] input[type=text]')처럼 대상 요소에 ID를 사용하기 쉽지만 순수하게 동적인 경우 모든 입력 값을 얻을 수 있고 JS로 루프스루할 수 있습니다.

다음과 같이 입력 필드 값을 얻을 수 있습니다.$('input[fieldAttribute=value]').val()

여기 예가 있습니다.

displayValue = () => {

  // you can get the value by name attribute like this
  
  console.log('value of firstname : ' + $('input[name=firstName]').val());
  
  // if there is the id as lastname
  
  console.log('value of lastname by id : ' + $('#lastName').val());
  
  // get value of carType from placeholder  
  console.log('value of carType from placeholder ' + $('input[placeholder=carType]').val());

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="formdiv">
    <form name="inpForm">
        <input type="text" name="firstName" placeholder='first name'/>
        <input type="text" name="lastName" id='lastName' placeholder='last name'/>
        
        <input type="text" placeholder="carType" />
        <input type="button" value="display value" onclick='displayValue()'/>
        
    </form>
</div>

다음 라인을 사용해 볼 수 있습니다.

$("#DynamicValueAssignedHere .formdiv form").contents().find("input[name='FirstName']").prevObject[1].value

언급URL : https://stackoverflow.com/questions/11654449/jquery-get-form-field-value

반응형