लिंक पर क्लिक करके जावास्क्रिप्ट के साथ फ़ॉर्म कैसे जमा करें?

123

सबमिट बटन के बजाय मेरे पास एक लिंक है:

<form>

  <a href="#"> submit </a>

</form>

क्या मैं इसे क्लिक करने पर फॉर्म जमा कर सकता हूं?

— रेतीला
स्रोत

मैं इसका उपयोग एक पृष्ठ में पूरी तरह से छिपे हुए रूप को एकीकृत करने के लिए करता हूं। लेकिन लिंक से पहले और बाद में लाइन ब्रेक हैं। क्या वे रूप तत्व से आते हैं? और मैं एक नया टैब / पृष्ठ में लिंक खोलना चाहूंगा, target="_blank"काम नहीं करता।

— जेपीटी

1

tl;

<a role="button" aria-label="submit form" href="javascript:void(0)" onclick="document.querySelector('form').submit()">Submit</a>

— डॉआर

210

सबसे अच्छा तरीका

सबसे अच्छा तरीका एक उपयुक्त इनपुट टैग सम्मिलित करना है:

<input type="submit" value="submit" />

सबसे अच्छा जेएस रास्ता

<form id="form-id">
  <button id="your-id">submit</button>
</form>

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

यदि आप पहले से ही ऐसा नहीं करते हैं, तो किसी DOMContentLoadedघटना के द्वारा बाद वाले जावास्क्रिप्ट कोड को एक घटना के loadलिए चुनें (केवल पिछड़े कांपिटिव के लिए चुनें ):

window.addEventListener("DOMContentLoaded", function () {
  var form = document.... // copy the last code block!
});

आसान, अनुशंसित तरीका नहीं (पूर्व उत्तर)

onclickलिंक और idफ़ॉर्म में एक विशेषता जोड़ें :

<form id="form-id">

  <a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>

</form>

सब तरह से

आप जो भी रास्ता चुनते हैं, आपके पास formObject.submit()अंततः कॉल होता है (जहां टैग formObjectका DOM ऑब्जेक्ट है <form>)।

आपको इस तरह के एक इवेंट हैंडलर को भी बांधना होगा, जो कॉल करता है formObject.submit(), इसलिए जब उपयोगकर्ता किसी विशिष्ट लिंक या बटन पर क्लिक करता है तो उसे कॉल किया जाता है। इसके दो तरीके हैं:

अनुशंसित: डोम ऑब्जेक्ट के लिए एक घटना श्रोता को बांधें।

// 1. Acquire a reference to our <form>.
//    This can also be done by setting <form name="blub">:
//       var form = document.forms.blub;

var form = document.getElementById("form-id");


// 2. Get a reference to our preferred element (link/button, see below) and
//    add an event listener for the "click" event.
document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

अनुशंसित नहीं: इनलाइन जावास्क्रिप्ट डालें। इस तकनीक के अनुशंसित नहीं होने के कई कारण हैं। एक प्रमुख तर्क यह है कि आप स्क्रिप्ट (JS) के साथ मार्कअप (HTML) मिलाते हैं। कोड असंगठित और बल्कि अप्राप्य हो जाता है।
```
<a href="#" onclick="document.getElementById('form-id').submit();">submit</a>

<button onclick="document.getElementById('form-id').submit();">submit</button>
```

अब, हम उस बिंदु पर आते हैं जिस पर आपको यूआई तत्व के लिए फैसला करना होगा जो सबमिट () कॉल को ट्रिगर करता है।

एक बटन
```
<button>submit</button>
```
एक लिंक
```
<a href="#">submit</a>
```

इवेंट श्रोता को जोड़ने के लिए पूर्वोक्त तकनीकों को लागू करें।

— ComFreek
स्रोत

मैं इसे लागू करना चाहता था लेकिन यह मेरी तरफ से काम नहीं करता। यहाँ एक fiddle, jsfiddle.net/rbhr9wt2

— user1149244 8

@ user1149244 jsFiddle पर जावास्क्रिप्ट फलक में "जावास्क्रिप्ट" पर क्लिक करें और फिर "लोड टाइप" को "कोई रैप - इन <body>" (या <सिर>) पर सेट करें। डिफ़ॉल्ट रूप से यह "onLoad" पर सेट हो जाता है जिसके बाद DOMContentReady अब और फायर नहीं करता है।

— 9

3

नोट: यदि आपके फॉर्म में अट्रैक्ट का बटन है name="submit", तो submit()आपके फॉर्म की विधि सुलभ नहीं होगी।

— 2540625

ऑन्कलिक विधि की सिफारिश क्यों नहीं की जाती है?

— नू एवरेस्ट

@nueverest An <input type="submit">का अर्थ, कहना, से अधिक अर्थ है <a href="#" onclick="...">। स्क्रीन्रेडर्स के संबंध में यह विशेष रूप से महत्वपूर्ण है। यदि आपको बाद का उपयोग करना चाहिए, तो मैं सुझाव दूंगा कि आप ARIA का उपयोग करें ।

— कॉमफ्रीक

65

यदि आप jQuery का उपयोग करते हैं और इनलाइन समाधान की आवश्यकता होगी, तो यह बहुत अच्छा काम करेगा;

<a href="#" onclick="$(this).closest('form').submit();">submit form</a>

इसके अलावा, आप प्रतिस्थापित करना चाह सकते हैं

<a href="#">text</a>

साथ में

<a href="javascript:void(0);">text</a>

इसलिए लिंक क्लिक करते समय उपयोगकर्ता आपके पृष्ठ के शीर्ष पर स्क्रॉल नहीं करता है।

— मौरिस
स्रोत

1

मेरा मानना है कि इसे <span> पाठ </ span> में बनाना बेहतर होगा। यह लिंक नहीं है, और href: जावास्क्रिप्ट अच्छी नहीं है। (जल्द ही अगले सुरक्षा कारणों से बुरा बनने के लिए ... इनवाइटेड जावास्क्रिप्ट को किसी दिन प्रतिबंधित किया जाना चाहिए।

— मिल्के पैटरन

मैं सहमत हूँ। प्रश्न की प्रकृति को देखते हुए मैं सरल उत्तर के लिए गया। मैं व्यक्तिगत रूप से उपयोग करता हूं href="#"और फिर jquery के साथ उन सभी लिंक का चयन करता हूं और ईवेंट हैंडलर e.preventDefault()में कॉल clickकरता हूं ताकि ब्राउज़र स्क्रॉल न हो।

— मौरिस

3

मैं व्यक्तिगत रूप से इस उत्तर को पसंद करता हूं। यदि आपका पृष्ठ JQuery का उपयोग कर रहा है, तो सरल और स्वच्छ और लागू करना आसान है। बहुत लचीला भी, क्योंकि मेरे पास एक पृष्ठ है जिस पर कई रूप हैं और यह त्रुटिपूर्ण रूप से काम करता है।

— जॉन कॉन्टारिनो

यदि आप एक क्लिक पर जावास्क्रिप्ट का उपयोग कर सकते हैं तो "#" पर क्लिक करें जावास्क्रिप्ट कॉल के अंत में "वापसी झूठी"

— लुमिस

23

आप फार्म और लिंक कुछ आईडी दे सकते हैं और फिर onclickलिंक और submitफॉर्म की घटना के लिए सदस्यता लें :

<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>

और फिर:

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};

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

— डारिन दिमित्रोव
स्रोत

4

HTML और CSS - कोई जावास्क्रिप्ट सॉल्यूशन नहीं

अपने बटन को बूटस्ट्रैप लिंक की तरह बनाएं

HTML:

<form>
    <button class="btn-link">Submit</button>
</form>

सीएसएस:

.btn-link {

    background: none;
    border: none;
    padding: 0px;
    color: #3097D1;
    font: inherit;

}

.btn-link:hover {

    color: #216a94;
    text-decoration: underline;

}

— डैरेन मर्फी
स्रोत

उत्कृष्ट, जब यह सरल हो सकता है तो इसे जटिल क्यों बनाया जाए। हालाँकि, मुझे लगता है कि यह और भी अच्छा लगता है यदि आप "कर्सर: पॉइंटर;" भी जोड़ते हैं। होवर वर्ग में, इसलिए कर्सर हाथ में बदल जाता है।

— लुमिस

3

यह किसी भी विशेष कार्य के बिना अच्छी तरह से काम करता है। साथ ही php के साथ लिखना बहुत आसान है।<input onclick="this.form.submit()"/>

— क्रिस
स्रोत

ओपी ने कहा कि इनपुट तत्व नहीं लिंक पर क्लिक करके ।

— राहिल वज़ीर

क्या कुछ इस तरह से काम कर सकता है<input onclick="this.form.submit()"> Some Text</input>

— CodyBugstein

2

<form id="mailajob" method="post" action="emailthijob.php">
    <input type="hidden" name="action" value="emailjob" />
    <input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>

<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>

— शशांक
स्रोत

3

क्या आप बता सकते हैं कि आपका जवाब वास्तव में सवाल का जवाब कैसे देता है? कृपया इसे और संदर्भ जोड़ें।

1

document.getElementById("theForm").submit();

यह मेरे मामले में सही काम करता है।

आप इसे फंक्शन में भी इस्तेमाल कर सकते हैं,

function submitForm()
{
     document.getElementById("theForm").submit();
}

अपनी फॉर्म आईडी के रूप में "theForm" सेट करें। हॊ गया।

— चिंतन ठुम्मर
स्रोत

0

यहां आपके प्रश्न का सबसे अच्छा समाधान है: फॉर्म के अंदर आपके पास ये कोड हैं:

<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>

CSS फ़ाइल में, यह करें:

button{
  display: none;
}

जेएस में आप यह करते हैं:

$("a").click(function(){
   $("button").trigger("click");
})

तुम वहाँ जाओ।

— iamwave007
स्रोत