# submit
0731 / Ajax
Call XML and JSON from HTML XML from HTML xml 파일(data1.xml) 생성 html 파일의 <body> html에서 btn1 버튼 클릭 시 ajax 작동 ajax에서 필요한 요소는 type, url, dataType, success function 등 있음 type은 get과 post 방식 중 선택 get : 서버로부터 데이터를 반환 반환 받으며, 민감한 정보가 없고 안전한 요청일 시 사용 post : 서버에 데이터를 제출하며, 민감한 정보가 포함되고 미확인된 요청일 시 사용 success function은 파일 불러오기에 성공 시 작동하는 함수 statusCode는 오류 발생 시 오류의 종류에 따라 작동하는 함수 정의 xml에서는 each() 함수(반복문) 사용 시 element를 불러올 때 $(element)와 같이 코드 사용 JSON from HTML -
HTML Forms
HTML Forms > HTML ``은 유저의 입력을 수집하는 데 쓰이고 대부분 서버 상으로 전송된다. `` 요소 ` 요소는 유저의 다양한 입력을 받는 ` 요소를 위한 컨테이너라고 생각하면 된다. `요소내 `은 자동으로 서버에 데이터를 보낸다. `` 요소 `` 말 그대로 텍스트를 입력하는 한줄의 필드이다. type 속성이 생략되었을 경우, 기본적으로 type="text"로 처리된다 . 예를 들면, `와 `는 동일한 의미를 갖는다 `<input
TIL 230531
-문제 영화 소개 페이지를 제작중에 있다. form 태그 안에 있는 input에 영화 이름을 입력하고 검색을 하면 해당 영화가 나와야하는데 "enter"키를 누르면 자꾸 새로고침이 되어서 노출이 되지 않는 상황이. -원인 form 태그 내부에 button이 존재할 경우 reload현상이 발생한다. form 태그 내부의 button은 기본적으로 type:submit을 갖기때문에 이벤트를 막아줄 방법이 필요했다. (기본적으로 브라우저는 이벤트 발생시 최상위까지 이벤트를 실행한다.->이벤트 버블링) -시도 1.event.preventDefault() : 브라우저의 기본 동작 제어 2.form 내부 button의 type을 button으로 바꿔주기 -> 단순히 type만 바꿔서는 submit 요소가 존재하기에 reload 현상 지속됐다. 2.form 태그 내부의 무의미한 input을 생성하기 : -> input 생성으로도 해결되지 않았다. 3.onsubmit 이벤트를 사용해 f
230316 스물 한 번째 수업_HTML
\*자동완성 벗어날 때 ctrl + spacebar 하면 선택됨 하이퍼링크: 하이퍼링크 기능은 웹 문서의 가장 핵심 클릭을 통해 연결된 웹으로 이동하여 사용을 편리하게 함 텍스트를 클릭하여 링크로 이동하는 방법, 이미지를 클릭하여 링크로 이동하는 방법, 현재 페이지 내에서 링크로 이동하는 방법 a태그는 href 태그가 반드시 쌍으로 같이 써줘야 됨 화면에는 링크표시 문구만 보여짐 img에서 src를 꼭 써줘야 이미지가 보여지는 것처럼 a에서는 href를 꼭 써줘야함 폼(form) 태그: 서
[Html/Javascript] <button> Tag
✅ `의 type 3가지 : submit,reset,button` ✅ ``의 기본 type = "submit" ``을 이용한 클릭 이벤트 함수 실행 중 에러 `을 이용해 회원가입 페이지를 만들다가 전송버튼을 ` 사용 사용자 아이디가 공백이면 바로 밑 하단에 안내 메시지를 보여주는 기능 구현 중에 안내문구만 잠깐 깜박였다 사라지고 submit이 되는 현상 발견 클릭 했을 때 버튼에 이벤트를 발생하기 위해 type='button' 명시함 `` 으로 유효성 검사 후 해당 입력 칸의 알림 텍스트를 보여줄 수 있게 됨
Js-addEventListener
eventListener >MDN문서 >listen할 이벤트 찾는 방법 ex) h1 html element mdn 이런식으로 검색! 개중 Web APIs가 적힌 게시글확인! heading html event window event event onclick ... localStorage API (
Front-end 국비지원 #059일
JQuery & JQuery UI >JQuery UI 의 사용법은 #52일차에 기록해두었다. URL : https://velog.io/@nuyhes/Front-end-%EA%B5%AD%EB%B9%84%EC%A7%80%EC%9B%90-052%EC%9D%BC >## 이번 수업에 JQuery UI 를 사용하는 이유 Cross browsing 을 위해 어느 브라우저에서 봐도 같은 모양이 나와야 좋기 때문이다. > >ex ) select 박스를 보면 CHROME(크롬) , FIREFOX(파이어폭스 브라우저 비교 CHROME(크롬) select 
디폴트 버튼타입은 button이 아니다!?
버튼에도 타입이 있다. 타입을 지정하지 않으면 submit으로 간주한다. ㅇㅅㅇ!! 나는 디폴트로 button을 갖고있을 줄 알았는데... 그래서 그런지 form 내에 버튼을 두개 만들어서 하나에 타입을 명시적으로 'submit'을 주고 나머지 하나엔 하지 않았더니 이상한 알람이 콘솔에 떴다. 그래서 Button 컴포넌트에서 type이 지정되지 않으면 디폴트로 'button'값을 갖게 만들었다.
바닐라 JS 챌린지 day7 Login
4.Login 4.0 Input Values 모든 것은 HTML에서 시작되어야함 HTML에서 작성 후 JS에서 기능 구현 1) HTML form 마크업 사용자가 이름을 작성할 수 있도록 ``태그 작성 안에 텍스트를 넣기위해 type="text" 미리 작성할 말은 placeholder="텍스트를 입력하세요" 그리고 버튼만들기 Log In 위에 것들을 `로 묶어주고, id="login-form"`으로 작성 묶어준 후에 아래 input과 button 요소를 js에서 손쉽게 찾기 위함이다 2) JS 기능 구현 input과 button 요소를 담을 변수 선언 버튼 클릭 시 원하는 기능을 실행하도록 addEventListener 실행 addEventListener 실행될 때 실행될 함수 만들기 4.1 Form Submissio
React fetch를 이용하여 submit 이벤트 구현하기
내가 참고한 블로그는 여기다 그중에서도 마지막에 있는 POST request using fetch with set HTTP headers 부분을 참고했다. 포기하고 수업을 들을까 했는데 포기하지 않았던 나를 칭찬한다. 구현하고나니까 너무너무너무 뿌듯하다 ㅎㅎ 📌 코드 💡 약간의 설명 작성한 form을 서버에 추가하기 위하여 method는 POST로 했다. body 부분은 서버의 데이터 형식에 맞게 조금 수정했다. fetch의 첫번째 인자로 서버의 url을 넣어줬다. 버튼을 누르면 home페이지로 돌아갈 수 있도록 useNavigate를 사용했다. window.location.reload(): form을 작성하고 등록을 눌러준 이후 게시글 페이지로 가면 게시글이 추가되어있지
<input>태그의 type속성
기본형 `` 가장 많이 사용하는 요소 아이디나 이름, 주소, 통합검색 등의 텍스트를 입력할 때 주로 사용됨 |title|desc| |:---:|:---:| |hidden|사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가짐| |text|한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자| |search|검색상자| |tel|전화번호 입력필드| |url|url 주소입력| |email|메일 주소 입력| |password|비밀번호입력●●●●| |datetime|| |dateline|| |number|| |range|| |checkbox|| |radio|| |datetime-local, date, mondth, time, color, file, image, submit, reset, button|| input태그의 type 속성 중, submit/reset/button은 버튼을 만드는 속성을 가지고 있으며,
프로그램 호출시 새창으로 호출하기 (ABAP4_CALL_TRANSACTION)
프로그램 호출시 새창으로 호출하기. 호출할 프로그램의 초기화면이 단일값(PARAMETER)면 CALL TRANSACTION, 다중값(SELECT-OPTIONS)이면 SUBMIT을 사용하여 호출한다. 기존 SUBMIT으로 호출했던 프로그램을, New session으로 불러와달라는 요청이 있다. 기존: ABAP4CALLTRANSACTION 사용 먼저 호출할 프로그램 화면 파라미터에 메모리아이디를 부여한다. 그리고 기존 프로그램에 아래로직을 추가하는데, 이때 PARID 에는 호출할 프로그램의 파라미터 이름을 넣는것이 아닌, 파라미터에 부여한 MEMORY ID 이름을 넣어주는거다.
01. 회원가입 html form 잡기
1. form태그로 회원가입 양식 감싸는 폼 잡기 ... 2. 그 안에 회원가입 양식 종류대로 작성 `` type : text, password 아이디, 비밀번호, 비밀번호 확인, 이름, 이메일, 연락처 div.form-group > ( label > span, div > input ) 2-1.아이디 아이디 * 2-2.비밀번호, 비밀번호 확인
중복 클릭으로 인한 중복 데이터 처리
중복 클릭으로 인한 중복 데이터 처리 🔥 문제 - 중복 클릭으로 인한 중복 데이터 팀 프로젝트 중 회원 가입을 구현하면서 만나게 된 문제점, 중복 클릭 처음엔 중복 회원 방지를 구현해 두었으니 괜찮지 않을까 싶었지만 바보 같은 생각이였다. 중복 클릭은 꽤 강력했다. 클라이언트에서 중복 클릭이 발생 했을 때 첫 번째 데이터로 중복 회원 방지 로직을 통과하고 그 사이에 똑같은 정보를 보내서 중복 데이터가 저장되는 것으로 보였다. 테스트로 회원가입 버튼을 난사해본 결과 너무 쉽게 중복 회원이 생성 되었다… 🧯 해결 - 자바 스크립트 활용하기 (구글링) submit 중복 클릭 방지라고 구글링을 해보니 다양한 방법이 나왔다. 나는 그 중에서 클릭시 바로 버튼을 비활성화
JS- `<form>`의 reset, submit 처리
reset submit ``요소의 action속성에 지정된 페이지로 사용자의 입력내용을 전송하는 기능. ``요소를 클릭하거나 아래의 자바스크립트 구문의 호출을 통해서 구현된다. submit 이벤트 ``요소에 onsubmit 이벤트 적용후 return false; 처리 ` submit 이벤트를 통해서 JS함수를 호출할 경우 JS함수에서는 맨 마지막에 강제로 submit 처리를 해야만 한다. > JS함수 안에 에러가 있을 경우 그 이후 부분은 실행되지 않기 때문에페이지가 새로고침되는 현상이 발생한다. 이 경우 한 블록씩 코드를 지워가면서 에러가 발생하는 위치를 찾아야 한다.
JS-Form객체와 input태그 제어
from 객체 document객체의 하위 객체 중 하나 form 유효성 검사 등 여러가지 form요소에 관련된 작업 수행 01. form요소의 객체 획득하기 1-1. id속성값으로 접근하는 경우 var myform = document.getElementById("form의 id값"); 1-2. name속성값으로 접근하는 경우 var myform = document.form의 name값; 02. 획득한 ` 안의 ` 요소 접근 2-1. id속성값으로 접근하는 경우 var inputEle = document.getElementById(input의 id값"); 2-2. name속성값으로 접근하는 경우 var myform = document.form의 name값; var inputEle = myfrom.input의 name값;
[JavaScript] submit 이벤트 막기 (새로고침 방지)
index.html 전체 코드 코드 상세 위와 같이 브라우저에서 To do list를 등록하고자 하는 todo-form이라는 Id를 가진 form 태그가 있다. submit 을 하면 새로고침 되는 게 아니라, 그저 사용자가 입력한 정보가 `` 태그 안에 동적으로 생성되게 하고 싶다. 해당 기능을 만들 todo.js 파일을 js 폴더 안에 만들고 import 한다. todo.js 전체 코드 코드 상세 form 태그 가져오기 getElementById html에서 todo-form을 id로 가진 Element를 가져오는 변수를 선언한다. submit 이벤트 방지 만들기 addEventListener 어떤 동작도 하지 않는 function을 만들고, toDoForm에서 submit 액션이 일어날 때 해당 function이 작동되도록 하면 된다. 👼 Reference [노마
ajax / form
Ajax와 form의 차이 서버와 데이터를 주고받는 방식에는 ajax와 form 두 가지 방식이 있다. ajax는 비동기 방식, form은 동기 방식이라는 차이점이 있다. Ajax 비동기 통신 Ajax는 비동기 방식으로 서버와 통신한다. 비동기라함은 페이지 전환 없이 데이터를 주고받을 수 있다는 것을 말한다. 즉, 페이지 전체가 아닌 일부분만을 업데이트 할 수 있는 방식이다. 서버에서 데이터를 가져오는 동안 다른 작업을 동시에 바로 진행할 수있다. 대기 시간이 줄어들어 웹페이지를 효율적으로 사용할 수 있고, 역동성 있게 표현할 수 있다. 위의 코드가 기본적인 ajax 작성 코드이다. url에 적힌 주소로 data를 보내서 type의 형태로 데이터를 보내주고 dataType의 형태로 데이터를 받아온다. success는 통신성공시 실행되는 callback 함수이다. form 동기
검색 history 추가
검색 history 기능 추가. 참 많이 돌아왔다 이 기능은 사실 스크래퍼 챌린지 하다가 다른 우수 졸업자들의 작품을 보고 영감을 받아서 만들려고 했던건데 자바스크립트로 구현되어있어서 자바스크립트 공부하고 다시 만들자고 했던건데 드디어 다 구현했다! 그럼 우선 history가 위치할 틀을 html, form 태그 밑에 추가해주자 history.js 추가 x 버튼을 history 옆에 추가하여 x를 눌렀을때 history가 없어지도록 했고 이전 history와 같은 history를 검색했을때는 history가 추가되지 않도록 했다.\ 로직순서는 아래와 같다.(todo list 만들때 사용되던 코드랑 거의 같다) 1. 엔터를 눌렀을때 input.value를 가져온다. 2. 가져온 value를 display 함수에 pass 하고 그 함수에서 li, button 을 만든다음 value와 합쳐서 history 클래스안에 추가한다. **3. history