লিঙ্কে ক্লিক করে কীভাবে জাভাস্ক্রিপ্টের সাথে একটি ফর্ম জমা করবেন?


123

সাবমিট বাটনের পরিবর্তে আমার একটি লিঙ্ক রয়েছে:

<form>

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

</form>

ক্লিক করা হলে আমি কি এটি ফর্মটি জমা দিতে পারি?


আমি এটি কোনও পৃষ্ঠায় সম্পূর্ণ লুকানো ফর্মকে সংহত করতে ব্যবহার করি। তবে লিঙ্কটির আগে এবং পরে লাইন ব্রেক রয়েছে। তারা কি ফর্ম উপাদান থেকে আসে? এবং আমি একটি নতুন ট্যাব / পৃষ্ঠায় লিঙ্কটি খুলতে চাই, target="_blank"মনে হয় এটি কাজ করে না।
জেপিটি

1
tl; dr <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()শেষ পর্যন্ত আপনি কল করেছেন ( ট্যাগের formObjectDOM অবজেক্টটি কোথায় <form>)।

আপনাকে এমন ইভেন্ট হ্যান্ডলারকেও আবদ্ধ করতে হবে, যেটি কল করে formObject.submit(), তাই যখন ব্যবহারকারী কোনও নির্দিষ্ট লিঙ্ক বা বোতামটি ক্লিক করেন তখন ডাকে। দুটি উপায় আছে:

  • প্রস্তাবিত: একটি ইভেন্ট শ্রোতাকে DOM অবজেক্টের সাথে আবদ্ধ করুন।

    // 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();
    });
  • প্রস্তাবিত নয়: ইনলাইন জাভাস্ক্রিপ্ট Inোকান। এই কৌশলটি সুপারিশ না করার বিভিন্ন কারণ রয়েছে। একটি প্রধান যুক্তি হ'ল আপনি স্ক্রিপ্টগুলির (জেএস) সাথে মার্কআপ (এইচটিএমএল) মিশ্রণ করুন। কোডটি অসংগঠিত হয়ে যায় এবং বরং কল্পনাতীত হয়।

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

এখন, আমরা সেই বিন্দুতে পৌঁছেছি যেখানে আপনাকে ইউআই উপাদানটি সিদ্ধান্ত নিতে হবে যা জমা () কলটি ট্রিগার করে।

  1. একটি বোতাম

    <button>submit</button>
  2. একটি লিংক

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

ইভেন্ট শ্রোতা যুক্ত করতে পূর্বোক্ত কৌশলগুলি প্রয়োগ করুন।


আমি এটি প্রয়োগ করতে চেয়েছিলাম তবে এটি আমার পক্ষে কাজ করছে বলে মনে হচ্ছে না। এখানে একটি ফ্রিডল
ব্যবহারকারী 1149244

@ user1149244 জাভাস্ক্রিপ্ট ফলকের jsFizz এ "জাভাস্ক্রিপ্ট" এ ক্লিক করুন এবং তারপরে "লোড প্রকার" সেট করুন "কোনও মোড়ক না - <body>" তে (বা <শিরোনাম)। ডিফল্টরূপে এটি "onLoad" তে সেট করা আছে যার পরে DOMContentReady আর গুলি চালায় না।
কমফ্রিচ

3
নোট: আপনার ফর্ম ATTR সঙ্গে কোনো বোতাম থাকে name="submit", submit()আপনার ফর্ম পদ্ধতি প্রবেশযোগ্য হবে না।
2540625

অনক্লিক পদ্ধতিটি কেন সুপারিশ করা হয় না?
নিউ এভারেস্ট

@ নিউভারেস্ট আন <input type="submit">এর আরও অর্থপূর্ণ অর্থ রয়েছে, যা বলুন <a href="#" onclick="...">। স্ক্রিনডারদের ক্ষেত্রে এটি বিশেষভাবে গুরুত্বপূর্ণ। যদি আপনি অবশ্যই উত্তরোত্তর ব্যবহার করেন তবে আমি এআরআইএ ব্যবহারের পরামর্শ দেব ।
কমফ্রিচ

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

এইচটিএমএল এবং সিএসএস - জাভাস্ক্রিপ্ট সমাধান নেই

আপনার বোতামটি বুটস্ট্র্যাপ লিঙ্কের মতো প্রদর্শিত করুন

এইচটিএমএল:

<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

এটি কোনও বিশেষ ক্রিয়াকলাপ ছাড়াই ভাল কাজ করে। পিএইচপি দিয়ে লেখার জন্য আরও অনেক সহজ।<input onclick="this.form.submit()"/>


ওপিতে একটি লিঙ্কে ইনপুট উপাদান নয় ক্লিক করে বলা হয়েছে
রহিল উজির

এর মতো কিছু করে এই কাজ করা যাবে<input onclick="this.form.submit()"> Some Text</input>
কোডিবাগস্টাইন

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();
} 

"ফর্ম "টিকে আপনার ফর্ম আইডি হিসাবে সেট করুন। হয়ে গেছে।


0

আপনার প্রশ্নের সর্বোত্তম সমাধানটি এখানে: ফর্মের ভিতরে আপনার এই কোডগুলি রয়েছে:

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

সিএসএস ফাইলে, এটি করুন:

button{
  display: none;
}

জেএসে আপনি এটি করেন:

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

এই নাও.

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.