<for> ট্যাগের বাইরে একটি বোতাম ব্যবহার করে ফর্ম জমা দিন

Question

বলুন আমার আছে:

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

<input type="submit" />

আমি ফর্মের বাইরে যে ফর্মটি জমা দিতে যাচ্ছি তার সাথে ফর্মটি জমা দেওয়ার বিষয়ে আমি কীভাবে যাব, আমি এইচটিএমএল 5-তে মনে করি যে জমা দেওয়ার জন্য একটি ক্রিয়া বৈশিষ্ট্য রয়েছে তবে আমি নিশ্চিত নই যে এটি সম্পূর্ণ ক্রস-ব্রাউজারে আছে এবং যদি তা নেই তবে এটা কর?

Comments

আমি মনে করি না আপনি জাভাস্ক্রিপ্ট ছাড়াই এটি করতে পারবেন। ব্রাউজার কীভাবে জানবে যে এটি কী রূপ? বেশ কয়েকটি থাকতে পারে। আপনি ফর্মের ভিতরে জমা বোতামটি কেন রাখতে পারবেন না?

— কিথ

আপনি যদি জেএস ব্যবহার করতে না চান তবে আমার কাছে এটি কৌতূহলের বাইরে এইচটিএমএল (<5) এ অসম্ভব বলে মনে হচ্ছে, আপনার কোডে এই জাতীয় ব্যবস্থা কেন থাকবে?

— কুমার

আমার কাছে সমস্ত আপডেট করার জন্য একটি বোতামের সাথে একাধিক ট্যাবড সেটিংস অঞ্চল রয়েছে, এর নকশার কারণে বোতামটি ফর্মের বাইরে থাকবে। আমি কেবল এইচটিএমএল 5 বিকল্প বা একটি জেএস সমাধানের সাথে রোল করতে যাচ্ছি কারণ এই প্রশ্নটি অনর্থক বলে মনে হচ্ছে।

— ড্যারিল

@Kumar আমিও ভেবেছিলাম এটা অসম্ভব হতে পারে, কিন্তু এটা দেখে মনে হচ্ছে তাই না stackoverflow.com/a/23456905/932473

— ডেভ

আজকাল উত্তরটি বিকাশকারী.মোজিলা.আর.ইন.ইউইউএস

— ডকস / ওয়েব

Answer 1

আপডেট: আধুনিক ব্রাউজারগুলিতে আপনি এটি করতে formবৈশিষ্ট্যটি ব্যবহার করতে পারেন ।

---

যতদূর আমি জানি, আপনি জাভাস্ক্রিপ্ট ছাড়া এটি করতে পারবেন না।

অনুমান যা বলে তা এখানে

নিয়ন্ত্রণগুলি তৈরি করতে ব্যবহৃত উপাদানগুলি সাধারণত একটি ফর্ম উপাদানটির ভিতরে উপস্থিত হয় তবে তারা যখন ইন্টারফেস তৈরির জন্য ব্যবহৃত হয় তখন এটি একটি ফরএম উপাদান ঘোষণার বাইরেও উপস্থিত হতে পারে। এটি অন্তর্নিহিত ইভেন্টগুলি বিভাগে আলোচনা করা হয়েছে। নোট করুন যে কোনও ফর্মের বাইরের নিয়ন্ত্রণগুলি সফল নিয়ন্ত্রণ হতে পারে না।

এটা আমার সাহসী

একটি submitবোতাম একটি নিয়ন্ত্রণ হিসাবে বিবেচিত হয়।

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

মন্তব্য থেকে

আমার কাছে সমস্ত আপডেট করার জন্য একটি বোতামের সাথে একাধিক ট্যাবড সেটিংস অঞ্চল রয়েছে, এর নকশার কারণে বোতামটি ফর্মের বাইরে থাকবে।

inputফর্মের অভ্যন্তরটি কেন রাখবেন না , তবে পৃষ্ঠার অন্য কোথাও অবস্থানের জন্য সিএসএস ব্যবহার করবেন?

Comments

: অবগতির জন্য, HTML5 এর সমর্থন, এখনো নিখুঁত নয় কিন্তু এটা আছে হচ্ছে impressivewebs.com/html5-form-attribute

— Shackrock

আমি এখানে কিছুটা দেরি করেছি, তবে আপনি কীভাবে ইনপুটটি ফর্মটিতে রাখতে পারেন তবে এটি অন্য কোথাও রেখে দিতে পারেন?

— সিজিএফ

আপনি এই উদ্দেশ্যে এইচটিএমএল 4

— ডিগ্রি

জো এর কাঠামোর উত্তর হিসাবে কাজ করে - উত্তরটি আর বৈধ নয়,

— পিটার

প্রস্তাবিত জাভাস্ক্রিপ্ট সমাধানগুলির সাথে একটি উদ্বেগ রয়েছে। সর্বশেষতম ক্রোমে উদাহরণস্বরূপ, এইচটিএমএল 5 বৈধকরণ (প্রয়োজনীয়, ইত্যাদি) এড়িয়ে গেছে। আমি যে সমাধানটি ভাবতে পারি তার দুটি জমা বোতাম রয়েছে, একটি লুকানো। একটি ক্লিক লুকানো বোতামে ট্রিগার করা উচিত। যথাযথ বৈধতা ছাড়াই ফর্মটি জমা দেওয়া উচিত নয়।

— বিজয়ী n।

Answer 2

এইচটিএমএল 5 এ ফর্মের বৈশিষ্ট্য রয়েছে । মূলত

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

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

Comments

এটি যে কেউ এটি ব্যবহার করার পরিকল্পনা করছে তাদের জন্য এটি IE তে কাজ করে না। আমি এটি ব্যবহার করেছি কিন্তু তারপরে আইই ব্রাউজারগুলিতে ম্যানুয়ালি ফর্মটি জমা দেওয়ার জন্য ইভেন্ট ফাংশন কলব্যাক জমা দেওয়ার সিদ্ধান্ত নিয়েছি।

— racl101

কোন আইই সংস্করণ হুবহু?

— mwld

আমি এটি একটি <button type="submit" form="frmFoo" onclick="!this.form&&$('#'+$(this).attr('form')).submit()">কৌতূহলজনক ফ্যালব্যাক হিসাবে করেছি : পরীক্ষাগুলি প্রকাশিত হিসাবে, এটি.ফর্মটি সংযুক্ত ফর্মটি ডমলেমেন্ট, অন্যথায় এটি বাতিল হয়ে গেলে। // সম্পাদনা: jQuery, তবে ভ্যানিলা দিয়েও সম্ভব, খুব বেশি

— অ্যাড্রিয়ান ফেডার

আপনি যদি এমএস এজ এ ফর্মের বৈশিষ্ট্যটি দেখতে চান তবে দয়া করে এখানে ভোট দিন: wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…

— এম্কুরজ

@ অ্যাড্রিয়ানফিডার ফ্যালব্যাকের একটি ভ্যানিলা-জেএস সংস্করণটি হবে:<button type="submit" form="frmFoo" onclick="!this.form && document.getElementById('myform').submit()">

— রোমারিকড্রিগন

Answer 3

আমার জন্য দুর্দান্ত কাজ করে এমন একটি সমাধান এখনও এখানে অনুপস্থিত। এটির জন্য চাক্ষুষভাবে লুকানো <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>।

Comments

জেএস এবং বড় পরিবর্তনগুলির প্রয়োজন ছাড়াই ইমহো আরও ভাল সমাধান :)

— আন্তন হাসান

আইই 11 এও কাজ করে। আমি জানি, আপনি প্রায়শই একই বাক্যে "কাজ" এবং "আইই" দেখতে পাবেন না।

— শিম

কোনও অসম্পূর্ণতা ছাড়াই ভাল সমাধান। টুইটার বুটস্ট্র্যাপ ব্যবহার করে, আপনি কেবল লেবেল CSS শ্রেণীর জন্য "বিটিএন বিটিএন-প্রাথমিক" ব্যবহার করতে পারেন এবং এটি নিখুঁত কাজ করে।

— জুয়ান্ডা

খুব সুন্দর সমাধান, তবে এই পদ্ধতিটি ব্যবহার করার ক্ষেত্রে একটি আপত্তি থাকতে পারে। এ labelহ'ল ফোকাসযোগ্য উপাদান (এএফআইকে) নয় তাই কোনও ব্যবহারকারীর পক্ষে এটি স্বজ্ঞাত নয় যে কেবল 'বোতামে' নেভিগেট করতে কীবোর্ড ব্যবহার করছে এবং উদাহরণস্বরূপ সেই বোতামটি সক্রিয় করতে স্পেস টিপুন। (আমি বুঝতে পারি যে আপনি <enter>পরিবর্তে টিপতে পারেন , তবে কেবল কীবোর্ডের সাহায্যে ফর্ম নেভিগেট করতে কেবল মানুষই ব্যবহৃত হয় না)

— অউকে

ফোকাস করতে labelট্যাব বোতাম মাধ্যমে আপনি ব্যবহার করতে পারেন tabindex: এইচটিএমএল অ্যাট্রিবিউট <label for="submit-form" tabindex="0">Submit</label>অনুযায়ী এই প্রশ্নের

— MarthyM

Answer 4

আপনি যদি 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>

সুতরাং, নীচের লাইনটি হ'ল জমা দেওয়ার মতো একটি বোতাম তৈরি করা এবং ফর্মটিতে আসল জমা বোতামটি রাখা (অবশ্যই এটি লুকিয়ে রাখা), এবং 'ফেক সাবমিট' বোতামটি ক্লিক করে জ্যাকুয়ারির মাধ্যমে ফর্ম জমা দিন। আশা করি এটা সাহায্য করবে.

Comments

এটি এইচটিএমএল 5 রেডি করা ব্রাউজার এবং IE উভয় ক্ষেত্রেই কাজ করতে, আমার jQuery এখানে রয়েছে$('button[form]').click(function (){ var formId = $(this).attr('form'); $('#' + formId).submit(); });

— স্নোক

Answer 5

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

</form>

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

এটি আমার পক্ষে কাজ করেছে, কোনও ফর্মের জন্য একটি রিমোট সাবমিট বাটন রাখতে।

Comments

ধন্যবাদ মানুষ, এই সাধারণ বৈশিষ্ট্যের জন্য আমি জেএস কোডের লাইন লিখতে চাই না। PS: আমার অ্যাপ্লিকেশনটির আইই সমর্থন করার দরকার নেই

— মণি

আপনি যদি এমএস এজ-ফর্ম এট্রিবিউট বৈশিষ্ট্যটি দেখতে চান তবে দয়া করে এখানে ভোট দিন: wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…

— এম্কুরজ

Answer 6

এখানে অন্য একটি সমাধানের মতো, সামান্য পরিবর্তন সহ:

<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

Comments

এটি সেরা উত্তর, আইএমও। সোজা এমডিএন থেকে বোতামের ফর্মের বৈশিষ্ট্য: বোতামটির সাথে সম্পর্কিত ফর্ম উপাদানটি (তার ফর্মের মালিক)। গুণটির মানটি অবশ্যই একই নথিতে একটি <for> উপাদানটির আইডি বৈশিষ্ট্য হতে হবে। যদি এই বৈশিষ্ট্যটি নির্দিষ্ট না করা থাকে তবে <বাটন> উপাদান একটি পূর্বসূরীর <ফর্ম> উপাদানটির সাথে যুক্ত হবে, যদি এর কোনও উপস্থিতি থাকে। এই অ্যাট্রিবিউটটি আপনাকে <ডাব্লু >> উপাদানের বংশধর হিসাবে নয়, কোনও ডকুমেন্টের মধ্যে <বোতাম> উপাদানগুলিকে <for> উপাদানগুলির সাথে সংযুক্ত করতে সক্ষম করে।

— অ্যালেক্সাশাআরিগান

সচেতন থাকুন: এটি ইন্টারনেট এক্সপ্লোরার ১১ এ কাজ করে না here

— মার্ক ডিক্স

Answer 7

এটা চেষ্টা কর:

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

যদিও আমি idফর্মটিতে একটি যুক্ত করার পরিবর্তে এটির মাধ্যমে অ্যাক্সেস করার পরামর্শ দেব document.forms[index]।

Comments

হ্যাঁ আমি জাভাস্ক্রিপ্ট দিয়ে এটি কীভাবে করতে জানি তা যদি আপনি দেখতে পান তবে আমি এটি জাভাস্ক্রিপ্ট হিসাবে ট্যাগ করি নি।

— ড্যারিল

আমি দুঃখিত, আপনার পোস্ট থেকে পরিষ্কার ছিল না যে আপনি নন জেএস উপায় খুঁজছেন (আমি ভেবেছিলাম আপনি এটি জেএস এর অধীনে ট্যাগ করা মিস করেছেন)।

— মিচিফ

আপনি যদি অন্য কোনও ফর্মের ভিতরে বোতাম ব্যবহার করে কোনও বাহ্যিক ফর্ম জমা দিতে চান তবে এটি করার সর্বোত্তম উপায়।

— ওয়াহিদ আমিরি

Answer 8

আপনি সর্বদা jQuery ব্যবহার করতে পারেন:

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

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

Answer 9

এখানে একটি চমত্কার দৃ so় সমাধান যা এখন পর্যন্ত সেরা ধারণাগুলি অন্তর্ভুক্ত করে পাশাপাশি আফেরিনের সাথে হাইলাইট করা একটি সমস্যার আমার সমাধানও অন্তর্ভুক্ত করে। কোনও জাভাস্ক্রিপ্ট ব্যবহার করা হয়নি।

আপনি যদি IE (এবং এমনকি এজ 13) এর সাথে পিছনের দিকের সামঞ্জস্যতা সম্পর্কে চিন্তা করেন তবে আপনি form="your-form" গুণটি ব্যবহার করতে পারবেন না ।

কোনওটিই প্রদর্শন সহ স্ট্যান্ডার্ড জমা ইনপুট ব্যবহার করুন এবং ফর্মের বাইরে এর জন্য একটি লেবেল যুক্ত করুন:

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

এর ব্যবহারটি নোট করুন display: none;। এটা ইচ্ছাকৃত। বুটস্ট্র্যাপ এর ব্যবহার .hiddenjQuery এর মধ্যে দিয়ে বর্গ দ্বন্দ্ব .show()এবং .hide()এবং যেহেতু বুটস্ট্র্যাপ 4 অবচিত হয়েছে।

এখন কেবল আপনার জমা দেওয়ার জন্য একটি লেবেল যুক্ত করুন (বুটস্ট্র্যাপের জন্য স্টাইলযুক্ত):

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

অন্যান্য সমাধানগুলির বিপরীতে, আমি ট্যাবিনডেক্সও 0 ব্যবহার করে রাখছি - যার অর্থ আমরা এখন কীবোর্ড ট্যাবিংয়ের সাথে সামঞ্জস্যপূর্ণ। role="button"বৈশিষ্ট্য যুক্ত করা এটিকে CSS স্টাইল দেয় cursor: pointer। এট ভয়েলা ( এই ঝাঁকুনি দেখুন )।

Comments

নিস! আইই 11 এবং ফায়ারফক্সের সাথে দুর্দান্ত কাজ করেছেন। ধন্যবাদ!

— eaglei22

@ agগলই 22 এটি শুনে আনন্দিত :)

— জোনাথন

আপনার পক্ষে অন্য কোথাও থেকে সমস্ত বৈশিষ্ট্য / পরামর্শ একসাথে রাখার জন্য এটি খুব সহায়ক, তাই আপনাকে ধন্যবাদ। যাইহোক, আপনি এখন বোতাম / লেবেলে ট্যাব করতে পারলেও, কীবোর্ড থেকে এটি "ক্লিক" করার কোনও উপায় আমি দেখতে পাচ্ছি না, উদাহরণস্বরূপ টিপে Enterকোনও প্রভাব নেই। সুতরাং, এটিতে ট্যাব সক্ষম হওয়া কিছুটা অর্থহীন বলে মনে হয়। জাভাস্ক্রিপ্ট ব্যবহার না করে এটি করার কোনও উপায় আছে?

— অ্যান্ড্রু উইলিয়ামস

@ অ্যান্ড্রু উইলিয়ামস এটি একটি ভাল বিষয়। দুর্ভাগ্যক্রমে আমি জাভাস্ক্রিপ্ট ছাড়াই ক্লিক ইভেন্টটি ট্রিগার করতে আপনার কীবোর্ডটি ব্যবহার করার কোনও উপায় দেখতে পাচ্ছি না। পিএস: পোস্টটি আপনার পক্ষে সহায়ক হলে দয়া করে উজ্জীবিত হন। এটির জন্য আপনার কোনও মূল্য ব্যয় হয় না তবে যে কেউ সহায়ক উত্তর উত্পন্ন করে তার পক্ষে এর অর্থ অনেক বেশি।

— জোনাথন

এবং আমি আপনাকে ঝাপটায় এবং অবৈধ <input... />স্ব-সমাপনী বাক্য গঠন ঠিক করার জন্য আপনাকেও ভালবাসি , যা একেবারে নির্দোষভাবে এবং ভুলভাবে এখানে (খুব) যথাযথ অকার্যকর নো-ক্লোজ ট্যাগ ব্যবহার করে! :) কুডোস!

— জেড

Answer 10

এই কাজ নিখুঁত! ;)

এটি আজাক্স ব্যবহার করে এবং আমি যা বলি তা দিয়ে করা যেতে পারে: "একটি ফর্ম মিরর উপাদান"। বাইরে কোনও উপাদান সহ একটি ফর্ম পাঠানোর পরিবর্তে, আপনি একটি জাল ফর্ম তৈরি করতে পারেন। আগের ফর্মের দরকার নেই।

<!-- 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>

আপনি যদি পিতামাতার ফর্মটি জমা না দিয়ে অন্য ফর্মের মধ্যে কিছু ডেটা প্রেরণ করতে চান তবে এটি খুব দরকারী f

এই কোডটি সম্ভবত প্রয়োজন অনুসারে অভিযোজিত / অনুকূলিত করা যেতে পারে। এটি পুরোপুরি কাজ করে !! ;) আপনি যদি এর মতো একটি নির্বাচন বিকল্প বাক্স চান তাও কাজ করে:

<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>

আমি আশা করি এটি যেমন কেউ আমাকে সাহায্য করেছিল তেমন সাহায্য করেছিল। ;)

Answer 11

সম্ভবত এটি কাজ করতে পারে, তবে আমি জানি না এটি বৈধ এইচটিএমএল কিনা।

<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>

Comments

এই উত্তরটি নিজেই এই প্রশ্নের জন্য ইতিমধ্যে বিদ্যমান। stackoverflow.com/a/23456905/2968465

— জয়ন্ত ভাওয়াল

Answer 12

আমার একটি সমস্যা ছিল যেখানে আমি একটি টেবিল সেল উপাদান থেকে ফর্মটি আড়াল করার চেষ্টা করছিলাম, তবে এখনও ফর্মগুলি জমা দেওয়ার বোতামটি দেখান। সমস্যাটি হ'ল ফর্ম উপাদানটি এখনও একটি অতিরিক্ত ফাঁকা জায়গা নিয়েছিল, আমার টেবিল ঘরের বিন্যাসটি অদ্ভুত দেখায়। প্রদর্শন: কোনও কিছুই এবং দৃশ্যমানতা: লুকানো বৈশিষ্ট্যগুলি কাজ করে না কারণ এটি জমা দেওয়ার বোতামটিও আড়াল করে রাখবে, যেহেতু এটি যে ফর্মটি আমি আড়াল করার চেষ্টা করছিলাম তার মধ্যে এটি অন্তর্ভুক্ত ছিল। সহজ উত্তরটি হ'ল সিএসএস ব্যবহার করে কিছুতেই ফর্মগুলির উচ্চতা নির্ধারণ করা হয়েছিল

সুতরাং,

সিএসএস -

    #formID {height:4px;}

আমার জন্য কাজ।

Answer 13

আমি এইভাবে ব্যবহার করেছি, এবং দয়া করে এটি পছন্দ করেছে, এটি জমা দেওয়ার আগে ফর্মটি বৈধতা দেয় যা সাফারি / গুগলের সাথে সামঞ্জস্যপূর্ণ। কোন 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>