var inputs = $('input[type="text"]'); var googleSubmitBtn = $('#google-submit'); var snackbar = $('#snackbar'); var inputName = $('#name'); var inputAge = $('#age'); var inputArea = $('#area'); function isLoading(status){ if(status){ $('html, body').addClass('wait'); googleSubmitBtn.attr('disabled', true).html('입력중...'); } else { $('html, body').removeClass('wait'); googleSubmitBtn.attr('disabled', false).html('입력'); } } function checkInput(){ var isEmpty = false; $.each(inputs, function (index, element) { if (element.value === '') { alert('빈 칸이 있어요.'); isEmpty = true; return false; } }); return isEmpty; } $('#google-submit').click(function () { //빈값 체크 if (checkInput()) { return; } // 입력중.. isLoading(true); $.ajax({ type: "GET", url: "https://script.google.com/macros/s/AKfycbwiHDc2dHHsppLBV9K6RuwWqqFAfkuqtRBMkcIOxo-ph6YP3PEw/exec", data: { "이름": inputName.val(), "나이": inputAge.val(), "사는곳": inputArea.val() }, success: function (response) { isLoading(false); snackbar.html('입력이 완료됐습니다.').addClass('show'); setTimeout(function () { snackbar.removeClass('show'); }, 3000); //값 비워주기 inputName.val(''); inputAge.val(''); inputArea.val(''); }, error: function (request, status, error) { isLoading(false); console.log("code:" + request.status + "\n" + "error:" + error); console.log(request.responseText); } }); });
<div> <label for="name">이름</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">나이</label> <input type="number" id="age" name="age" min="1"> </div> <div> <label for="area">사는곳</label> <input type="text" id="area" name="area"> </div> <div> <button id="google-submit">입력</button> </div> <div id="snackbar"></div>
html.wait *, html.wait, body.wait *, body.wait { cursor: progress !important; } #snackbar { visibility: hidden; min-width: 250px; margin-left: -125px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; left: 50%; bottom: 30px; font-size: 17px; } #snackbar.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; } @-webkit-keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } } @keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } } @-webkit-keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } } @keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } }