AJAX form submisson

게임 서버 판매자 용 CMS를 코딩 중이지만 문제가 발생했습니다. 나는 다음과 같은 코드가 있습니다AJAX form submisson

것은이

<div id="ServerResponse" align="center"></div> 
<form id="RegistrationForm" method="post" action="/account.php?do=create"> 
    <input type='text' placeholder='{#Name#}' id='Name' name="Name" autocomplete="off"> 
    <input type='text' placeholder='{#Surname#}' id='Surname' name="Surname" autocomplete="off"><br /> 
    <select name="day" id="day" style='width: 55px;'> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
    <option value="11">11</option> 
    <option value="12">12</option> 
    <option value="13">13</option> 
    <option value="14">14</option> 
    <option value="15">15</option> 
    <option value="16">16</option> 
    <option value="17">17</option> 
    <option value="18">18</option> 
    <option value="19">19</option> 
    <option value="20">20</option> 
    <option value="21">21</option> 
    <option value="22">22</option> 
    <option value="23">23</option> 
    <option value="24">24</option> 
    <option value="25">25</option> 
    <option value="26">26</option> 
    <option value="27">27</option> 
    <option value="28">28</option> 
    <option value="29">29</option> 
    <option value="30">30</option> 
    <option value="31">31</option> 
    </select> 

    <select name="month" id="month" style='width: 90px;'> 
    <option value="January">January</option> 
    <option value="February">February</option> 
    <option value="March">March</option> 
    <option value="April">April</option> 
    <option value="May">May</option> 
    <option value="June">June</option> 
    <option value="July">July</option> 
    <option value="August">August</option> 
    <option value="September">September</option> 
    <option value="October">October</option> 
    <option value="November">November</option> 
    <option value="December">December</option> 
    </select> 

    <select name="year" id="year" style='width: 70px;'> 
    <option value="1950">1950</option> 
    <option value="1951">1951</option> 
    <option value="1952">1952</option> 
    <option value="1953">1953</option> 
    <option value="1954">1954</option> 
    <option value="1955">1955</option> 
    <option value="1956">1956</option> 
    <option value="1957">1957</option> 
    <option value="1958">1958</option> 
    <option value="1959">1959</option> 
    <option value="1960">1960</option> 
    <option value="1961">1961</option> 
    <option value="1962">1962</option> 
    <option value="1963">1963</option> 
    <option value="1964">1964</option> 
    <option value="1965">1965</option> 
    <option value="1966">1966</option> 
    <option value="1967">1967</option> 
    <option value="1968">1968</option> 
    <option value="1969">1969</option> 
    <option value="1970">1970</option> 
    <option value="1971">1971</option> 
    <option value="1972">1972</option> 
    <option value="1973">1973</option> 
    <option value="1974">1974</option> 
    <option value="1975">1975</option> 
    <option value="1976">1976</option> 
    <option value="1977">1977</option> 
    <option value="1978">1978</option> 
    <option value="1979">1979</option> 
    <option value="1980">1980</option> 
    <option value="1981">1981</option> 
    <option value="1982">1982</option> 
    <option value="1983">1983</option> 
    <option value="1984">1984</option> 
    <option value="1985">1985</option> 
    <option value="1986">1986</option> 
    <option value="1987">1987</option> 
    <option value="1988">1988</option> 
    <option value="1989">1989</option> 
    <option value="1990">1990</option> 
    <option value="1991">1991</option> 
    <option value="1992">1992</option> 
    <option value="1993">1993</option> 
    <option value="1994">1994</option> 
    <option value="1995">1995</option> 
    <option value="1996">1996</option> 
    <option value="1997">1997</option> 
    <option value="1998">1998</option> 
    <option value="1999">1999</option> 
    <option value="2000">2000</option> 
    <option value="2001">2001</option> 
    <option value="2002">2002</option> 
    <option value="2003">2003</option> 
    <option value="2004">2004</option> 
    <option value="2005">2005</option> 
    <option value="2006">2006</option> 
    <option value="2007">2007</option> 
    <option value="2008">2008</option> 
    <option value="2009">2009</option> 
    <option value="2010">2010</option> 
    <option value="2011">2011</option> 
    <option value="2012">2012</option> 
    <option value="2013">2013</option> 
    <option value="2014">2014</option> 
    </select> 

    </br> 

    <input type='text' placeholder='{#Username#}' id='Username' name="Username" autocomplete="off"><br /> 
    <input type='password' placeholder='{#Password#}' id='Password' name="Password" autocomplete="off"><br /> 
    <input type='password' placeholder='{#RPassword#}' id='RPassword' name="RPassword" autocomplete="off"><br /> 
    <input type='text' placeholder='EMail' id='Email' name="Email" autocomplete="off"><br /> 
    <input type='submit' value='{#Registration#}'> <input type="reset" value="{#ResetF#}"><br /> 
</form> 

</center>

, 나는 AJAX 포스트를 통해 데이터를 게시하려면이 양식을 할 수 아니에요을, 그냥 account.php?do=create 페이지가 열립니다.

이 문제를 해결하는 데 도움을 주시기 바랍니다 수 있습니까? jquery.js 같은

모든 JS는 jquery.form.js는 내가 AJAX 물건을 할이 코드를 사용하고

포함되어 있습니다 : 나는 스마티를 사용하고 또한

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var options = { 
     target: "#ServerResponse", 
     timeout: 3000 
    }; 

    $('#RegistrationForm').submit(function() { 
     $(this).ajaxSubmit(options); 
     return false; 
    }); 
    }); 
</script>

, 그리고 코드는 언급 위는 {literal}{/literal} 태그 안에 있습니다.

출처

2014-01-28 Ivan Zhivolupov

콘솔에 오류가 있습니까? DOMReady? – dfsq

'$ ('# RegistrationForm') 바로 뒤에있는 –

e.preventDefault()'submit? (function() {'아마도? –

Submit은 event이며 제출 이벤트의 기본 동작을 취소하려면 event.preventDefault();을 사용해야합니다. See Here

로 preventDefault

이벤트 취소 할 경우에서 preventDefault 방법은 일반적으로 이벤트의 결과로서 구현함으로써 취해진 기본 동작 의미 이벤트가 취소되어야하는 것을 의미 에 사용 이 발생하지 않습니다. 이벤트 흐름의 모든 단계에서 preventDefault 메서드 이 호출되면 이벤트가 취소됩니다. 과 연결된 모든 기본 작업은 발생하지 않습니다. 취소 불가능한 이벤트에 대해이 메서드를 호출해도 아무런 효과가 없습니다. preventDefault가 호출되면 나머지 이벤트 전파 기간 동안 이 효력을 유지합니다. 이 메소드는 이벤트 플로우의 모든 단계에서 사용될 수 있습니다.

어쩌면 이런 방식으로 시도해보십시오.

$('#RegistrationForm').submit(function(e) { 
e.preventDefault(); 
var postData = $(this).serialize(); 
var formURL = $(this).attr("action"); 
$.ajax({ 
    type: "POST", 
    url: formURL, 
    timeout: 3000, 
    data: postData, 
    success: function(response){ 
     $("#ServerResponse").html(response); 
    }   
    }); 
});

출처

2014-01-28 15:40:48

Thx,하지만 sinse 및 현명한 사용 html5, 나는 각 양식 필드에 필요한 태그를 적용한, 또한 오류 페이지를 만들었습니다. 어쨌든 Thx 4 당신의 도움 –

시도 양식 요소 onsubmit="return false"

그게 해결되지 않는 경우에 추가, 대신 그냥 아무것도하지 않습니다, 그것은 onsubmit="functionName();return false"

을하거나 폼 요소에 이벤트 핸들러를 추가 할, 자바 스크립트 속성을 사용하지 않는 것이 특별한 경우

출처

2014-01-28 11:24:12 David

여전히 똑같은 일, 그냥 무시하는 이유는 무엇입니까? –

조치 값을 #로 바꾸고 수정했는지 확인하십시오. – David

Saf10 (최신 버전), Chrome (최신 버전), Firefox (최신 버전) IE10에서 동일한 결과를 얻으 려합니다. 제출 버튼을 클릭하면 언급 된 페이지로 리디렉션됩니다.브라우저 캐시가 비활성화되어 있고 서버 측 캐시도 비활성화되어 있습니다. –

AJAX form submisson

답변

관련 문제