ส่งแบบฟอร์มโดยใช้ปุ่มนอกแท็ก <form>

พูดว่าฉันมี:

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

<input type="submit" />

ฉันจะส่งฟอร์มที่มีปุ่มส่งที่อยู่นอกฟอร์มได้อย่างไรฉันคิดว่าใน HTML5 มีแอตทริบิวต์การดำเนินการสำหรับส่ง แต่ฉันไม่แน่ใจว่าเป็นเบราว์เซอร์ที่สมบูรณ์หรือไม่และถ้าไม่มี ทำเช่นนี้?

ปรับปรุง: ในเบราว์เซอร์ที่ทันสมัยคุณสามารถใช้formแอตทริบิวต์การทำเช่นนี้

เท่าที่ฉันรู้คุณไม่สามารถทำได้หากไม่มี javascript

นี่คือสิ่งที่สเป็คพูดว่า

องค์ประกอบที่ใช้ในการสร้างตัวควบคุมโดยทั่วไปจะปรากฏขึ้นภายในองค์ประกอบ FORM แต่อาจปรากฏภายนอกการประกาศองค์ประกอบ FORM เมื่อใช้เพื่อสร้างส่วนต่อประสานผู้ใช้ สิ่งนี้ถูกกล่าวถึงในส่วนของเหตุการณ์ภายใน โปรดสังเกตว่าการควบคุมภายนอกฟอร์มไม่สามารถควบคุมได้สำเร็จ

นั่นคือตัวหนาของฉัน

submitปุ่มถือว่าการควบคุม

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

จากความคิดเห็น

ฉันมีพื้นที่การตั้งค่าแบบแท็บหลายปุ่มพร้อมด้วยการอัปเดตทั้งหมดเนื่องจากการออกแบบของมันปุ่มจะอยู่ด้านนอกของแบบฟอร์ม

ทำไมไม่วางinputข้างในแบบฟอร์ม แต่ใช้ CSS เพื่อวางตำแหน่งที่อื่นบนหน้า?

ใน HTML5 มีแอตทริบิวต์แบบฟอร์ม เป็นพื้น

<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();" />

ถึงแม้ว่าผมจะขอแนะนำการเพิ่มรูปแบบและการเข้าถึงโดยที่แทนiddocument.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 ไม่ใช้จาวาสคริปต์

หากคุณสนใจความเข้ากันได้ย้อนหลังกับ IE (และแม้แต่ Edge 13) คุณจะไม่สามารถใช้form="your-form" แอตทริบิวต์ได้ได้

ใช้อินพุตส่งแบบมาตรฐานโดยไม่แสดงอะไรเลยและเพิ่มป้ายกำกับไว้นอกแบบฟอร์ม:

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

display: none;หมายเหตุการใช้งานของ นี่คือเจตนา การใช้.hiddenคลาสbootstrap ขัดแย้งกับ jQuery's .show()และ.hide()และได้ถูกเลิกใช้แล้วใน Bootstrap 4

ตอนนี้เพียงเพิ่มป้ายกำกับสำหรับการส่งของคุณ (สไตล์สำหรับ bootstrap):

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

ไม่เหมือนกับโซลูชันอื่น ๆ ฉันยังใช้tabindex - ตั้งค่าเป็น 0 ซึ่งหมายความว่าตอนนี้เราเข้ากันได้กับการแท็บคีย์บอร์ด เพิ่มแอตทริบิวต์ให้มันรูปแบบrole="button" CSS cursor: pointerและ voila ( ดูซอนี้ )

งานนี้สมบูรณ์แบบ! ;)

สิ่งนี้สามารถทำได้โดยใช้ 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;}

ทำงานให้ฉัน

ฉันใช้วิธีนี้และชอบมันมันตรวจสอบแบบฟอร์มก่อนที่จะส่งยังเข้ากันได้กับซาฟารี / 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>