양식없이 페이지 제출 jQuery를 사용하여 새로 고침

Question

jQuery를 사용하여 페이지를 새로 고치지 않고 양식을 제출하고 싶습니다. 나는이 같은 온라인 몇 가지 예를 발견 http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

하지만 문제는 하드 코딩 양식 필드가 있습니다 :

<div id="contact_form"> 
    <form name="contact" action=""> 
    <fieldset> 
     <label for="name" id="name_label">Name</label> 
     <input type="text" name="name" id="name" size="30" value="" class="text-input" /> 
     <label class="error" for="name" id="name_error">This field is required.</label> 

     <label for="email" id="email_label">Return Email</label> 
     <input type="text" name="email" id="email" size="30" value="" class="text-input" /> 
     <label class="error" for="email" id="email_error">This field is required.</label> 

     <label for="phone" id="phone_label">Return Phone</label> 
     <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> 
     <label class="error" for="phone" id="phone_error">This field is required.</label> 

     <br /> 
     <input type="submit" name="submit" class="button" id="submit_btn" value="Send" /> 
    </fieldset> 
    </form> 
    </div> 

그리고 자바 스크립트 : 예에 따라서

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; 
    //alert (dataString);return false; 
    $.ajax({ 
    type: "POST", 
    url: "bin/process.php", 
    data: dataString, 
    success: function() { 
     $('#contact_form').html("<div id='message'></div>"); 
     $('#message').html("<h2>Contact Form Submitted!</h2>") 
     .append("<p>We will be in touch soon.</p>") 
     .hide() 
     .fadeIn(1500, function() { 
     $('#message').append("<img id='checkmark' src='images/check.png' />"); 
     }); 
    } 
    }); 
    return false; 

을 위에서 dataString은 하드 코딩 된 양식 필드에서 생성됩니다. 내 양식은 동적이므로 입력 필드의 이름을 모르겠습니다.

참고 : 양식 필드는 동적이지만 양식 이름은 하드 코드되어 있으므로 하나의 옵션은 자식 노드를 통과하여 값을 구문 분석하는 것입니다. 그러나 쉬운 방법이 있는지 궁금 해서요.

Answer 1

data: $("#contact_form form").serializeArray()해야합니다.

Answer 2

Caner, 귀하의 양식이 동적이기 때문에 더 쉬운 방법이 아닙니다. 당신은 다음과 같은 코드를 사용하여 양식을 통해 갈 필요가 :

var message = ""; 
$("#formID input").each(function() { 
    message += $(this).attr("name"); 
}); 

이러한 코드 형태로 각 입력의 이름을 얻을 수 및 메시지라는 문자열로 연결할 것입니다. 이 경우보다 구체적 일 수 있지만 기본 아이디어를 얻고이 코드를 사용하여 필요에 맞춰야합니다.