Javascript submit 안될 때 - Javascript submit andoel ttae

두 방법 모두 폼의 submit 이벤트를 트리거합니다. 이벤트 핸들러에선 데이터를 체크하는데, 데이터에 에러가 있는 경우 에러를 출력한 다음 event.preventDefault()를 호출하곤 합니다. 이렇게 되면 폼은 서버에 전송되지 않습니다.

아래 폼에서 두 동작을 각각 수행해 보세요.

1. 텍스트 필드로 이동해 Enter 키를 누릅니다.
2. <input type="submit">을 클릭합니다.

참고로 두 동작 모두

<form onsubmit="return false">
 <input type="text" size="30" value="여기에 포커스를 준 다음에 Enter 키 누르기">
 <input type="submit" value="제출" onclick="alert('클릭 이벤트가 트리거 되었습니다!')">
</form>

<form onsubmit="return false">
 <input type="text" size="30" value="여기에 포커스를 준 다음에 Enter 키 누르기">
 <input type="submit" value="제출" onclick="alert('클릭 이벤트가 트리거 되었습니다!')">
</form>

<form onsubmit="alert('submit!');return false">
  1. input 필드에 포커스를 준 다음 Enter 키 누르기: <input type="text" value="text"><br>
  2. '제출' 버튼 누르기: <input type="submit" value="제출">
</form>

submit과

<form onsubmit="return false">
 <input type="text" size="30" value="여기에 포커스를 준 다음에 Enter 키 누르기">
 <input type="submit" value="제출" onclick="alert('클릭 이벤트가 트리거 되었습니다!')">
</form>

input 필드에서 Enter 키를 눌러 폼을 전송하면 <input type="submit">에 있는

<form onsubmit="return false">
 <input type="text" size="30" value="여기에 포커스를 준 다음에 Enter 키 누르기">
 <input type="submit" value="제출" onclick="alert('클릭 이벤트가 트리거 되었습니다!')">
</form>

클릭을 하지 않았는데도

<form onsubmit="return false">
 <input type="text" size="30" value="여기에 포커스를 준 다음에 Enter 키 누르기">
 <input type="submit" value="제출" onclick="alert('클릭 이벤트가 트리거 되었습니다!')">
</form>

데모를 살펴봅시다.

<form onsubmit="return false">
 <input type="text" size="30" value="여기에 포커스를 준 다음에 Enter 키 누르기">
 <input type="submit" value="제출" onclick="alert('클릭 이벤트가 트리거 되었습니다!')">
</form>

submit 메서드

form.submit()을 호출하면 자바스크립트로 직접 폼을 서버에 전송할 수 있습니다.

form.submit() 메서드가 호출된 다음엔 submit 이벤트는 생성되지 않습니다. 개발자가 form.submit()을 호출했다면 스크립트에서 이미 필요한 모든 조치를 했다고 가정하기 때문입니다.

submit버튼 누르면 전송완료가 떠야하는데

파일에 액세스할 수 없음
이동, 수정 또는 삭제되었을 수 있습니다.

이렇게 뜹니다 뭐가 잘못된걸까요?

server.js 

app.get('/', function(요청, 응답){
  응답.sendFile(__dirname + '/index.html')
});

app.get('/write', function(요청, 응답){
  응답.sendFile(__dirname + '/write.html')
});

app.post('/add', function(요청, 응답){
  응답.send('전송완료!')
})

wrtie.html

          오늘의 할일
         
       

          날짜
         
       

submit is not a function at button event 오류 시

onclick 이벤트 부분의 name 값에 submit 이라는 명을 넣었기 때문이다.

	
<input type="button" name="submit" value="Confirm" onclick="button_event();" />

 위 글에서 보면 name="submit" 이라는 부분 때문.

아래와 같이 바꿔 보자

	
<input type="button" name="submit_send" value="Confirm" onclick="button_event();" />

 해결!

공유하기

게시글 관리

form 에 여러 내요을 담아 전송할 때

Ajax나 화면단 처리를 위해 기본 submit 이벤트를 .preventDefault()로 막아둔 다음,

여러가지 로직 처리 후 .submit()로 처리하는 경우가 많은데요.

아무 생각없이 사용하다가 막혔는데, 

서버, 클라이언트 콘솔창에 아무것도 안뜨고 실행이 안되었습니다.

검색해도 나오지도 않고,,

여튼 알아보니 submit 역할을 하던 버튼의 id가 "submit"이었기 때문입니다.

두시간은 날린거 같은데 허무하네요.

대소문자를 가리지 않기 때문에 submit이라는 id 자체를 쓰면 안될 듯 합니다.

공유하기

게시글 관리

저작자표시 변경금지

'Dev- > java script, jQuery, Ajax' 카테고리의 다른 글