Nice programing

Jquery 양식 필드 값 가져 오기

nicepro 2020. 11. 6. 20:02
반응형

Jquery 양식 필드 값 가져 오기


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"클래스를 사용하여 div의 값을 얻을 수 있습니다.

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;

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

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

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

이것은 모든 텍스트 상자의 모든 값을 가져옵니다. children, firstchild 등과 같은 메서드를 사용하여 다듬을 수 있습니다. $ ( 'form [name = form1] input [type = text]') 형식과 같이 요소를 대상으로 지정하는 데 ID를 사용하는 것이 더 쉽지만 순전히 동적 인 경우 모든 것을 얻을 수 있습니다. 그런 다음 입력 값을 JS로 반복합니다.


// for getting the value from input type text
var value = $("input[type=text]").val();
// for getting the value from by input type name
var textValue = $("input[name=text]").val()

$("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>


입력 필드 값은 다음과 같이 얻을 수 있습니다. $('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

반응형