<form> 태그 외부의 버튼을 사용하여 양식을 제출하십시오.

내가 가지고 있다고 말하십시오 :

<form method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" />

양식 외부의 제출 버튼을 사용하여 해당 양식을 제출하는 방법은 HTML5에서 제출에 대한 작업 속성이 있다고 생각하지만 완전히 크로스 브라우저인지 여부와 확실하지 않은지 확실하지 않습니다. 이 작업을 수행?

업데이트 : 최신 브라우저에서는이 form속성을 사용 하여이 작업을 수행 할 수 있습니다 .

내가 아는 한 자바 스크립트가 없으면이 작업을 수행 할 수 없습니다.

사양은 다음과 같습니다.

컨트롤을 만드는 데 사용되는 요소는 일반적으로 FORM 요소 내부에 나타나지만 사용자 인터페이스를 작성하는 데 사용될 때 FORM 요소 선언 외부에 나타날 수도 있습니다. 이것은 본질적인 이벤트 섹션에서 논의됩니다. 폼 외부의 컨트롤은 성공적인 컨트롤이 될 수 없습니다.

그게 내 대담

submit버튼 제어 여겨진다.

http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

의견에서

버튼이 디자인되어 있기 때문에 버튼을 모두 업데이트 할 수있는 버튼이있는 다중 탭 설정 영역이 있습니다.

input양식 내부를 배치하지 말고 CSS를 사용하여 페이지의 다른 위치에 배치하십시오.

HTML5 에는 form 속성이 있습니다. 원래

<form id="myform" method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" />

나를 위해 잘 작동하는 솔루션은 여전히 ​​여기에 없습니다. 에 시각적으로 숨겨져 <submit>있거나 <input type="submit">요소가 <form>있고 <label>외부에 관련 요소가 있어야합니다. 다음과 같이 보일 것입니다 :

<form method="get" action="something.php">
     <input type="text" name="name" />
     <input type="submit" id="submit-form" class="hidden" />
</form>

<label for="submit-form" tabindex="0">Submit</label>

이제이 링크를 사용하면 <submit>요소를 클릭하여 양식 요소 를 '클릭'할 수 있습니다 <label>.

jQuery를 사용할 수 있다면 이것을 사용할 수 있습니다

<form method="get" action="something.php" id="myForm">
    <input type="text" name="name" />

    <input type="submit" style="display:none" />
</form>

<input type="button" value="Submit" id="myButton" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#myButton").click(function() {
           $("#myForm").submit();
       });
    });
</script>

따라서 결론은 제출과 같은 버튼을 만들고 실제 제출 버튼을 양식에 넣고 (물론 숨기고) '가짜 제출'버튼을 클릭하여 jquery로 양식을 제출하는 것입니다. 도움이 되길 바랍니다.

<form method="get" id="form1" action="something.php">

</form>

<!-- External button-->
<button type="submit" form="form1">Click me!</button>

이것은 양식에 대한 원격 제출 버튼을 갖기 위해 저에게 효과적이었습니다.

약간의 수정으로 다른 솔루션과 유사합니다.

<form method="METHOD" id="FORMID">
   <!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>

https://www.w3schools.com/tags/att_form.asp

이 시도:

<input type="submit" onclick="document.forms[0].submit();" />

비록 id에 양식을 추가하고 대신에 액세스하는 것이 좋습니다 document.forms[index].

언제든지 jQuery를 사용할 수 있습니다.

<form id="myForm">
  <!-- form controls -->
</form>
<input type="submit" id="myButton">

<script>
$(document).ready(function () {
  $("#myButton").click(function () {
    $("#myForm").submit();
  });
});
</script>

여기에 최고의 아이디어를 통합하고 Offerein 's로 강조 표시된 문제에 대한 솔루션을 포함하는 매우 견고한 솔루션이 있습니다. 자바 스크립트가 사용되지 않습니다.

IE (및 Edge 13)와의 이전 버전과의 호환성에 관심이 있다면 form="your-form" 속성을 사용할 수 없습니다 .

display none과 함께 표준 제출 입력을 사용하고 양식 외부에 레이블을 추가하십시오.

<form id="your-form">
  <input type="submit" id="your-form-submit" style="display: none;">
</form>

의 사용에 유의하십시오 display: none;. 이것은 의도적 인 것입니다. 부트 스트랩의 .hidden클래스를 사용하면 jQuery .show()및 and와 충돌 .hide()하므로 Bootstrap 4에서는 더 이상 사용되지 않습니다.

이제 제출 용 레이블을 추가하십시오 (부트 스트랩 스타일).

<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
  Submit
</label>

다른 솔루션과 달리 tabindex ( 0으로 설정) 도 사용 하고 있습니다. 이제 키보드 태 빙과 호환됩니다. role="button"속성을 추가하면 CSS 스타일이 제공됩니다 cursor: pointer. 에일 라 ( 이 바이올린 참조 ).

이것은 완벽하게 작동합니다! ;)

이것은 Ajax를 사용하여 수행 할 수 있으며 "폼 미러 요소"라고 부릅니다. 외부에 요소가있는 양식을 보내는 대신 가짜 양식을 작성할 수 있습니다. 이전 양식은 필요하지 않습니다.

<!-- This will do the trick -->
<div >
    <input id="mirror_element" type="text" name="your_input_name">
    <input type="button" value="Send Form">
</div>

코드 아약스는 다음과 같습니다.

    <script>
        ajax_form_mirror("#mirror_element", "your_file.php", "#your_element_response", "POST");

        function ajax_form_mirror(form, file, element, method) {
            $(document).ready(function() {
                // Ajax
                $(form).change(function() { // catch the forms submit event
                    $.ajax({                // create an AJAX call...
                        data: $(this).serialize(),      // get the form data
                        type: method,                   // GET or POST
                        url: file,                      // the file to call
                        success: function (response) {   // on success..
                        $(element).html(response);  // update the DIV
                        }
                    });

                    return false; // cancel original event to prevent form submitting
                });
            });
        }
   </script>

부모 양식을 제출하지 않고 다른 양식으로 일부 데이터를 보내려는 경우 매우 유용합니다.

이 코드는 필요에 따라 조정 / 최적화 될 수 있습니다. 완벽하게 작동합니다 !! ;) 다음과 같은 선택 옵션 상자를 원하는 경우에도 작동합니다.

<div>
    <select id="mirror_element" name="your_input_name">
        <option id="1" value="1">A</option>
        <option id="2" value="2">B</option>
        <option id="3" value="3">C</option>
        <option id="4" value="4">D</option>
    </select>
</div>

나는 그것이 나를 돕는 것처럼 누군가를 도왔기를 바랍니다. ;)

어쩌면 이것이 효과가 있을지 모르지만 이것이 유효한 HTML인지 모르겠습니다.

<form method="get" action="something.php">
    <input type="text" name="name" />
    <input id="submitButton" type="submit" class="hide-submit" />
</form>

<label for="submitButton">Submit</label>

표 셀 요소에서 양식을 숨기려고했지만 여전히 양식 제출 버튼을 표시하는 문제가있었습니다. 문제는 양식 요소가 여전히 여분의 빈 공간을 차지하여 테이블 셀의 형식이 이상하게 보였습니다. 표시 : 없음 및 가시성 : 숨겨진 속성은 제출 버튼을 숨기려고했기 때문에 작동하지 않았습니다. 간단한 대답은 CSS를 사용하여 양식 높이를 거의 아무것도 설정하지 않는 것입니다.

그래서,

CSS-

    #formID {height:4px;}

나를 위해 일했다.

나는이 방법을 사용했으며 친절하게 그것을 좋아했으며 제출하기 전에 양식을 확인하고 safari / Google과 호환됩니다. jquery 없음 nn

        <module-body>
            <form id="testform" method="post">
                <label>Input Title</label>
                <input name="named1" placeholder="Placeholder"  title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>
            </form>
        </module-body>
        <module-footer>
            <input type="button" onclick='if (document.querySelector("#testform").reportValidity()) { document.querySelector("#testform").submit(); }' value="Submit">
            <input type="button" value="Reset">
        </module-footer>