구글 스프레드 시트를 DB로 사용하기# 2

구글 스프레드시트를 DB로 사용하는 것은 지난 번에 성공했는데, 지난 번에 성공하지 못한 것이 2가지 있다. 첫번째는 form 태그 안에 들어 있는 <input type="submit">을 이용하면 늘 새로운 페이지로 새로고침 되는 것이었다. 그러다보니, 추가로 결과를 화면에 프린트할 수 없었다. 두번째는 구글 스프레드시트에 저장되어있는 정보를 javascript 를 이용하여 parsing 해오는 것이다. 이번에 해결한 것은 첫번째 문제이다.

Form submit 이후 새로고침 막기

새로고침을 막는 방법은 아무리 찾아봐도 잘 모르겠고, 구글링을 한참해본 결과, 다른 창으로 (window.open()) 열어주고 그 창에서 submission을 하게 하면 되는 것이었다. 그 창에서 submission을 진행하고 이후에 열린 새창을 (.close()) 닫아주면 되는 것이었다. 그러면 내가 원하는대로 되더라.

//Sumbission 이후 새로운 창 띄우고 지우기
       var gsWin = window.open('about:blank','payviewer','width=500,height=500');
       var frm =document.MpCalcForm;
       frm.action = " google form url";
       //action 은 php나 원하는 url
       frm.target ="payviewer";
       //target은 url을 보여주고자 하는 페이지
       frm.method ="post";
       frm.submit();
//sumbission을 하고 창을 close 시킴
       gsWin.close();

HTML form의 정보를 가져오는 방법은 document.Form_name 을 이용해서 가져올 수 있었다. action&target&method를 지정해주고 submit을 해주면 완료!!

나는 DB로 구글 스프레드 시트로 사용할 것이기 때문에, 정보가 submission 되는 곳은 바로 구글 Form!! 그래서 google form url을 action에 넣어주고, target은 새로이 만들어준 payviewer 창으로 보내준다. 그리고 method는 post로 지정하면 끝. 

window를 바로 끄다보니 google form에 데이터가 입력 안됨

close가 바로 시행되다보니, 구글 폼에 결과값이 입력안되는 문제가 있었다. 그래서 시간을 조금 지연하면 될 것으로 생각해서 javascript의 setTimeout()기능을 통해서 원하는 바를 이룰 수 있었다)

setTimeout(function() {gsWin.close();}, 500);

Form 과 Input tag에 대해 새로 알게된 사실

1. Input tag 중에서 radiobox는 name을 다르게 지정해줘야 여러 radio 중에서 하나를 고르게 된다. name을 모두 같게 하면... 그 모든 것이 같은 radio로 체크된다. (아마 틀리지 않을 듯)
2. 여러 Radio 중에서 같은 name인 경우에는 하나만 required로 써두면 해당항목에 대해서는 필수항목으로 바뀐다. 모든 태그에 required라 쓸 필요없다.
3. Form을 javascript 에서 읽어가려면, <form name="Form_Name" action="" method="post">로 해두면 document.Form_Name   으로 읽어갈 수 있다.
4. 처음에 name이 아닌 id로 지정해두어서 고생했다. html 사용에 대해서 기본이 없으면 이렇게 고생한다.

 

참고한 블로그&페이지

보편적이지 않은 개발#3] 구글 스프레드 시트를 DB처럼 이용해보자

새창을 여는 window.open() 함수 사용법

[Javascript] submit 후 팝업창 닫기