रिटर्न की बटन दबाने पर फॉर्म कैसे जमा करें?

Question 1

क्या कोई मुझे बता सकता है कि जब रिटर्न कुंजी दबाया जाता है और फॉर्म में कोई बटन नहीं होता है तो HTML फॉर्म कैसे जमा करें? सबमिट बटन नहीं है । मैं इसके बजाय एक कस्टम div का उपयोग कर रहा हूं।

Question 2

IMO, यह सबसे साफ जवाब है:

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

स्निपेट का विस्तार करें

बेहतर अभी तक, यदि आप कस्टम डिव का उपयोग करके फॉर्म जमा करने के लिए जावास्क्रिप्ट का उपयोग कर रहे हैं, तो आपको इसे बनाने के लिए जावास्क्रिप्ट का उपयोग करना चाहिए, और डिस्प्ले सेट करने के लिए: बटन पर कोई भी शैली नहीं। इस तरह से जावास्क्रिप्ट अक्षम उपयोगकर्ताओं को अभी भी सबमिट बटन दिखाई देगा और उस पर क्लिक कर सकते हैं।

यह नोट किया गया है कि प्रदर्शन: कोई भी आईई को इनपुट को अनदेखा करने का कारण नहीं होगा। मैंने एक नया JSField उदाहरण बनाया जो एक मानक रूप में शुरू होता है, और सबमिट को छुपाने और नई div बनाने के लिए प्रगतिशील वृद्धि का उपयोग करता है। मैंने स्ट्रिपलिंगवर्यर से सीएसएस स्टाइल का उपयोग किया ।

Question 3

जब प्रवेश कुंजी दबाया जाता है तो फॉर्म जमा करने के लिए इन लाइनों के साथ एक जावास्क्रिप्ट फ़ंक्शन बनाएं।

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

फिर ईवेंट को ईवेंट में जोड़ें जो आपको आवश्यक है जैसे कि div टैग पर:

<div onKeyPress="return checkSubmit(event)"/>

यह वैसे भी Internet Explorer 7 का डिफ़ॉल्ट व्यवहार है (हालांकि पहले के संस्करण भी)।

Question 4

मैंने विभिन्न जावास्क्रिप्ट / jQuery- आधारित रणनीतियों की कोशिश की, लेकिन मेरे पास मुद्दे थे। उपयोगकर्ता द्वारा अंतर्निहित ऑटो-पूर्ण सूची से चयन करने के लिए उपयोगकर्ता द्वारा दर्ज की गई कुंजी का उपयोग करने पर आकस्मिक जमा करने से उत्पन्न नवीनतम समस्या। मैंने अंततः इस रणनीति पर स्विच किया, जो मेरी कंपनी द्वारा समर्थित सभी ब्राउज़रों पर काम करती है:

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

यह क्रिस मैरास्टी-जॉर्ज द्वारा वर्तमान में स्वीकार किए गए उत्तर के समान है, लेकिन परहेज द्वारा display: none , यह सभी ब्राउज़रों पर सही ढंग से काम करने के लिए प्रकट होता है।

अपडेट करें

मैंने एक नकारात्मक शामिल करने के लिए ऊपर दिए गए कोड को संपादित किया tabindexताकि यह टैब कुंजी पर कब्जा न करे। हालांकि यह तकनीकी रूप से HTML 4 में मान्य नहीं होगा, HTML5 कल्पना में भाषा शामिल है ताकि यह काम कर सके जिस तरह से अधिकांश ब्राउज़र पहले से ही इसे वैसे भी लागू कर रहे थे।

Question 5

<button>टैग का उपयोग करें । W3C मानक से:

बटन तत्व बटन के साथ निर्मित बटन की तरह ही INPUT तत्व के साथ बनाया गया है, लेकिन वे अमीर प्रतिपादन संभावनाएं प्रदान करते हैं: बटन तत्व सामग्री हो सकती है। उदाहरण के लिए, एक BUTTON तत्व जिसमें एक छवि कार्य होता है जैसे और एक INPUT तत्व जैसा हो सकता है जिसका प्रकार "छवि" पर सेट है, लेकिन BUTTON तत्व प्रकार सामग्री की अनुमति देता है।

मूल रूप से एक और टैग है, <button>जिसमें कोई जावास्क्रिप्ट की आवश्यकता नहीं है , वह भी एक फॉर्म सबमिट कर सकता है। यह एक <div>टैग ( <img />बटन के अंदर सहित ) के तरीके से बहुत स्टाइल किया जा सकता है । <input />टैग के बटन लगभग लचीले नहीं हैं।

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

पर सेट करने के तीन प्रकार हैं <button>; वे <input>बटन प्रकारों के लिए मैप करते हैं।

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

मानक

मैं के <button>साथ टैग का उपयोग करेंसीएसएस-स्प्राइट और थोड़ा सा सीएसएसरंगीन और कार्यात्मक रूप बटन प्राप्त करने के लिए स्टाइलिंग। ध्यान दें कि सीएसएस लिखना संभव है, उदाहरण के लिए, तत्व के <a class="button">साथ स्टाइल के लिए लिंक साझा करें <button>।

Question 6

मेरा मानना है कि आप यही चाहते हैं।

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

हर बार जब एक कुंजी दबाया जाता है, तो फ़ंक्शन दर्ज () कहा जाएगा। यदि कुंजी दबाया गया प्रवेश कुंजी (13) से मेल खाता है, तो sendform () को बुलाया जाएगा और पहले सामना किए गए फॉर्म को भेजा जाएगा। यह केवल फ़ायरफ़ॉक्स और अन्य मानकों के अनुरूप ब्राउज़र के लिए है।

यदि आपको यह कोड उपयोगी लगता है, तो कृपया मुझे वोट देना सुनिश्चित करें!

Question 7

यहाँ है कि मैं इसे jQuery के साथ कैसे करता हूं

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

अन्य जावास्क्रिप्ट भी अलग नहीं होगा। पकड़ "13" के कीपर तर्क के लिए जाँच कर रहा है, जो कि प्रवेश कुंजी है

Question 8

निम्न स्क्रिप्ट का उपयोग करें।

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

प्रत्येक फ़ील्ड के लिए जब उपयोगकर्ता को हिट करने के लिए फॉर्म सबमिट करना चाहिए, तो प्रस्तुतकर्ता फ़ंक्शन को निम्नानुसार कॉल करें।

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

Question 9

मैं इस विधि का उपयोग करता हूं:

<form name='test' method=post action='sendme.php'>
    <input type=text name='test1'>
    <input type=button value='send' onClick='document.test.submit()'>
    <input type=image src='spacer.gif'>  <!-- <<<< this is the secret! -->
</form>

असल में, मैं सिर्फ टाइप इमेज का एक अदृश्य इनपुट जोड़ता हूं (जहां " स्पेसर। Gif " 1x1 पारदर्शी gif है)।

इस तरह, मैं इस फॉर्म को 'सेंड' बटन के साथ जमा कर सकता हूं या बस कीबोर्ड पर एंटर दबाकर ।

यह चाल है!

Question 10

आप केवल सबमिट बटन पर div सबमिट शैलियाँ लागू क्यों नहीं करते हैं? मुझे यकीन है कि इसके लिए एक जावास्क्रिप्ट है, लेकिन यह आसान होगा।

Question 11

यदि आप asp.net का उपयोग कर रहे हैं, तो आप फॉर्म पर defaultButton विशेषता का उपयोग कर सकते हैं ।

Question 12

मुझे लगता है कि आपके पास वास्तव में सबमिट बटन या सबमिट छवि होनी चाहिए ... क्या आपके पास "सबमिट डिव" का उपयोग करने का कोई विशिष्ट कारण है? यदि आप सिर्फ कस्टम स्टाइल चाहते हैं तो मैं सलाह देता हूं <input type="image"...। http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

Question 13

उत्तरों पर विस्तार करते हुए, यह वही है जो मेरे लिए काम करता है, शायद कोई इसे उपयोगी पाएगा।

एचटीएमएल

<form method="post" action="/url" id="editMeta">
   <textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>

जे एस

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}

Question 14

इनलाइन जावास्क्रिप्ट का उपयोग करने के बजाय, क्रिस मारस्टी-जॉर्ज के उदाहरण के समान। अनिवार्य रूप से उन क्षेत्रों में onkeypress जोड़ें, जिनके साथ आप काम करना चाहते हैं। यह उदाहरण पासवर्ड फ़ील्ड पर कार्य करता है।

<html>
<head><title>title</title></head>
<body>
  <form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
  <input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>

Question 15

चूंकि display: noneबटन और इनपुट सफारी और IE में काम नहीं करेंगे, मैंने पाया कि बिना किसी अतिरिक्त जावास्क्रिप्ट हैक्स की आवश्यकता के सबसे आसान तरीका, बस <button />फॉर्म में एक बिल्कुल स्थिति जोड़ना और इसे स्क्रीन से दूर रखना है।

<form action="" method="get">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <div class="yourCustomDiv"/>
  <button style="position:absolute;left:-10000px;right:9990px"/>
</form>

यह सितंबर 2016 तक सभी प्रमुख ब्राउज़रों के वर्तमान संस्करण में काम करता है।

स्पष्ट रूप से अपनी इच्छानुसार (और अधिक अर्थपूर्ण रूप से सही) शैली के <button/>रूप में वांछित।

Question 16

"ऑटोफोकस" विशेषता का उपयोग करके डिफ़ॉल्ट रूप से बटन पर इनपुट फ़ोकस देने का काम करता है। वास्तव में फॉर्म के भीतर किसी भी नियंत्रण पर क्लिक करने से फॉर्म पर ध्यान दिया जाता है, प्रपत्र के लिए एक आवश्यकता RETURN पर प्रतिक्रिया करने के लिए। तो, "ऑटोफोकस" ऐसा करता है कि आपके लिए उपयोगकर्ता कभी भी फॉर्म के भीतर किसी अन्य नियंत्रण पर क्लिक नहीं करता है।

इसलिए, "ऑटोफोकस" महत्वपूर्ण अंतर बनाता है यदि उपयोगकर्ता RETURN को मारने से पहले किसी भी प्रकार के नियंत्रण पर क्लिक नहीं करता है।

लेकिन फिर भी, जेएस के बिना काम करने के लिए अभी भी 2 शर्तें पूरी होनी बाकी हैं:

क) आपको जाने के लिए एक पृष्ठ निर्दिष्ट करना होगा (यदि खाली नहीं है तो यह काम नहीं करेगा)। मेरे उदाहरण में यह hello.php है

b) नियंत्रण को दिखना होगा। आप इसे छिपाने के लिए पृष्ठ पर ले जा सकते हैं, लेकिन आप प्रदर्शन का उपयोग नहीं कर सकते: कोई भी या दृश्यता: छिपा हुआ नहीं। मैंने जो किया, उसे इनलाइन शैली का उपयोग करने के लिए इसे पृष्ठ के बाईं ओर 200px से स्थानांतरित करना था। मैंने ऊँचाई 0px बनाई ताकि यह जगह न ले। क्योंकि अन्यथा यह अभी भी ऊपर और नीचे अन्य नियंत्रणों को बाधित कर सकता है। या आप तत्व को भी तैर सकते हैं।

<form action="hello.php" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>