Submit 후 input 초기화..
본문
required이 충족되면 Submit 후 input 초기화되어야 하는데...어떻게 하면될까요?ㅜㅜㅜㅜㅜ
구글에서 여러 코드 적용시켜봤는데 오류가 나네요..
답변 5
질문을 더 구체적으로 해보세요. 어떤 코드가 그런지....
소스코드를 보여주시면 답변드리기 수월할 것 같습니다 :)
기본적인 폼 서브밋은 페이지가 이동하기 때문에 초기화를 할수 없습니다.
Ajax 나 iframe 방식인 경우 관련된 부분의 소스코드가 있어야 상세한 답변이 가능하며
다음은 iframe 방식의 서브밋 후 setTimeout 으로 억지효과를 만드는 예제입니다.
<form method="post" name="frm" target="ifr" action="action.php">
<input type="text" name="txt_00" required="required" /><br />
<input type="text" name="txt_01" /><br />
<input type="submit" />
</form>
<iframe src="about:blank" name="ifr"></iframe>
<script>
document.forms['frm'].onsubmit = function () {
var frm = this;
setTimeout(function () {
frm.reset();
}, 500);
return true;
}
</script>
<form onsubmit="return newsAjax(this);" >
<div class="col-group input-box" id="news">
<input type="email" placeholder="Enter Email *" name="wr_1" required>
<button type="submit" class=" center subscribe-btn" name="submit" >SubScribe to Newsletter <img src="./img-1/main-newsletter-arrow.png" alt=""></button>
</div>
<div class="col-group agree-box">
<input type="checkbox" name="check" id="check" required>
<label for="check">I agree to receiving marketing and promotional materials</label>
</div>
</form>
이렇게 세팅해주셨는데 아무것도 몰라서 ,, 뭐가뭔지 모르겠네요..
Ajax 방식으로 동작하는 예제입니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function newsAjax(frmobj) {
$.ajax({
method: 'POST',
url: 'action.php',
data: { wr_1: frmobj.wr_1.value }
})
.done(function (data) {
console.log(data);
})
.fail(function (msg) {
console.log(msg);
})
.always(function (arg) {
// console.log(arg);
frmobj.reset();
});
return false;
}
</script>
<form onsubmit="return newsAjax(this);" >
<div class="col-group input-box" id="news">
<input type="email" placeholder="Enter Email *" name="wr_1" required>
<button type="submit" class=" center subscribe-btn" name="submit" >SubScribe to Newsletter <img src="./img-1/main-newsletter-arrow.png" alt=""></button>
</div>
<div class="col-group agree-box">
<input type="checkbox" name="check" id="check" required>
<label for="check">I agree to receiving marketing and promotional materials</label>
</div>
</form>
form에 reset이라는 기능이 있는데 확인해보세요~
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=javaking75&logNo=220073457187
submit 후 페이지 페이지 이동을 막은것으로 봐서 ajax 처리등이 되어있는것 같은데
아래 URL 참고하셔서 폼 내부 input 을 초기화 하실수 있습니다.
답변을 작성하시기 전에 로그인 해주세요.