form안에 버튼이 여러 개일 때, 특정 버튼 눌렀을 때만 제출하게 하기

10899 단어 html html

1. 문제

이런 폼이 있다고 해보자. 이미지를 업로드하고 크롭을 한 다음 제출해야한다.

<!DOCTYPE html>
<html>
    <body>
        <form action="/req/submit" method="POST" >
            ...
            <button id="crop">사진 크롭</button>
            <button id="submit" type="submit" ></button></input>
        </form>
    </body>
</html>

그런데 사진 크롭 버튼을 누르면 그냥 제출되어버린다. 다음과같이 사진 크롭버튼을 밑으로 빼면?

<!DOCTYPE html>
<html>
    <body>
        <form action="/req/submit" method="POST" >
            ...
            <button id="submit" type="submit" ></button></input>
        </form>
        <button id="crop">사진 크롭</button>
    </body>
</html>

제출 버튼 밑에 사진 크롭버튼이 있어서 안 예쁘다.

2. 해결 방안

실제 제출버튼을 안보이게 숨기고, 페이크버튼과 크롭버튼을 form 바깥으로 뺀다.
페이크 버튼을 누르면 실제 제출 버튼이 눌리게 하면 된다.

<!DOCTYPE html>
<html>
    <body>
        <form action="/req/submit" method="POST" >
            ...
            <button id="submit" type="submit" >진짜 제출 버튼</button>
        </form>
        <button id="crop">사진 크롭</button>
        <button style="display:none;"  onclick="submit();">가짜 제출 버튼</button>
        <script>
            function submit() {
                document.getElementById("submit").click();
            };
        </script>
    </body>
</html>

Author And Source

이 문제에 관하여(form안에 버튼이 여러 개일 때, 특정 버튼 눌렀을 때만 제출하게 하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sangeun-jo/form안에-버튼이-여러-개일-때-특정-버튼-눌렀을-때만-제출하게-하기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다