JQuery [বন্ধ] ব্যবহার করে একটি ফর্ম জমা দিন

Question

আমি jQuery ব্যবহার করে একটি ফর্ম জমা দিতে চাই। কেউ কোড, একটি ডেমো বা উদাহরণ লিঙ্ক সরবরাহ করতে পারেন?

Answer 1

আপনি ফর্মটি সাধারণভাবে জমা দিচ্ছেন বা এজেএক্স কলের মাধ্যমে তা নির্ভর করে। উদাহরণস্বরূপ ডকুমেন্টেশন সহ আপনি jquery.com এ প্রচুর তথ্য পেতে পারেন । সাধারণত একটি ফর্ম জমা দেওয়ার submit()জন্য, সেই সাইটে পদ্ধতিটি পরীক্ষা করে দেখুন । জন্য AJAX এর , অনেক বিভিন্ন সম্ভাবনার, যদিও আপনি সম্ভবত পারেন ব্যবহার করার বিষয়ে নিশ্চিত ajax()বা post()পদ্ধতি। নোট করুন যে একটি সরলীকৃত এবং সীমিত ইন্টারফেসের post()মাধ্যমে ajax()পদ্ধতিটি কল করার জন্য এটি কেবল একটি সুবিধাজনক উপায় ।

একটি সমালোচনামূলক সংস্থান, আমি প্রতিদিন ব্যবহার করি, আপনার বুকমার্ক করা উচিত কীভাবে jQuery কাজ করে । এটিতে jQuery ব্যবহারের টিউটোরিয়াল রয়েছে এবং বাম-হাতের ন্যাভিগেশন সমস্ত ডকুমেন্টেশন অ্যাক্সেস দেয়।

উদাহরণ:

সাধারণ

$('form#myForm').submit();

AJAX এর

$('input#submitButton').click( function() {
    $.post( 'some-url', $('form#myForm').serialize(), function(data) {
         // ... do something with response from server
       },
       'json' // I expect a JSON response
    );
});

$('input#submitButton').click( function() {
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: $('form#myForm').serialize(),
        success: function(data) {
                   // ... do something with the data...
                 }
    });
});

লক্ষ্য করুন যে উপরের ajax()এবং post()পদ্ধতিগুলি সমান are ajax()ত্রুটিগুলি হ্যান্ডল করার অনুরোধে আপনি যুক্ত করতে পারেন এমন অতিরিক্ত পরামিতি রয়েছে etc.

Comments

আমি সিরিয়াল পদ্ধতিটি অনুপস্থিত ছিল। স্পষ্টতই, আমি jQuery.com এ দেখেছি, তবে তাদের ডক্সগুলি $.postজমা দেওয়ার জন্য ডেটা উত্পন্ন করার জন্য ফর্মটি সুস্পষ্টভাবে ডিকনস্ট্রাক্ট করে এবং পুনর্গঠন করে। ধন্যবাদ!

— নাম 21

আমার কাছে যদি কিছু ডেটা প্রস্তুত থাকে তবে আমি জমা দেওয়ার আগে পোস্টের অনুরোধে (এজাক্স নয়, ফর্ম জমা দেওয়ার অনুরোধ) যুক্ত করতে চাই, আমি কীভাবে এটি করব?

— ア レ ッ ク ス

@ আলেকজান্ডারসুপারট্র্যাম্প - উপরের উদাহরণে ডেটাটি ইউআরএল-এনকোডযুক্ত ফর্ম পরামিতি হিসাবে প্রেরণ করা হচ্ছে। আপনি কেবল অতিরিক্ত ফর্মের পরামিতি হিসাবে ডেটা যুক্ত করতে পারেন। $('form#MyForm').serialize() + '&newData=' + newData + '&moreData=' + moreData। দ্রষ্টব্য: দ্বিতীয়টি ব্যবহার করে ইউআরএল এনকোড করা দরকার encodeURIComponent()। অথবা - আপনি উভয় প্রান্তে জেএসএন এনকোডিং ব্যবহার করতে পরিবর্তন করতে পারেন তবে তারপরে আপনাকে ফর্মের ডেটাটি আপনার অতিরিক্ত ডেটা সহ একটি জাভাস্ক্রিপ্ট ডেটা কাঠামোর মধ্যে স্থাপন এবং সিরিয়ালাইজ করতে হবে। serializeArrayসেক্ষেত্রে আপনি সম্ভবত ফর্মটি ব্যবহার করতে এবং আপনার অন্যান্য ডেটা একত্রীকরণ করতে

— চাইবেন

"আমি একটি জসন প্রতিক্রিয়া আশা করি" আমার জন্য একটি আলাদা সমস্যা সমাধান করেছে (পুনরায়: ফ্লাস্ককে কল ব্যর্থ হয়েছে)।

— scharfmn

আপনার কাছে 'সাবমিট' নামক একটি সাবমিট বাটন থাকলে, এটি হয় নিঃশব্দে ব্যর্থ (jQuery) বা "সাবমিট কোনও ফাংশন নয়" (ভ্যানিলা জেএস) বলে ত্রুটি তৈরি করবে। অন্য যেকোন কিছুতে নামকরণ বোতাম সমাধান করবে । ¯_ (ツ) _ / ¯ 🤷

— fzzylogic

Answer 2

আপনি ব্যবহার করতে হবে $("#formId").submit()।

আপনি সাধারণত কোনও ফাংশন থেকে এটিকে কল করবেন।

উদাহরণ স্বরূপ:

<input type='button' value='Submit form' onClick='submitDetailsForm()' />

<script language="javascript" type="text/javascript">
    function submitDetailsForm() {
       $("#formId").submit();
    }
</script>

আপনি এই সম্পর্কিত আরও তথ্য জেকারি ওয়েবসাইটে পেতে পারেন ।

Comments

আপনি যদি jQuery ব্যবহার করছেন তবে আপনি কেন একটি ইনলাইন অন্লিক অ্যাট্রিবিউট ব্যবহার করবেন?

— nnnnnn

@ ব্র্যাডলিফ্লুড - তার পরিবর্তে তার কী করা উচিত ছিল? আমাদের মতো নবাবিরা জানতে চান?

— মার্কোজেন

@ মার্কোজেইন আমি মনে করি ব্র্যাডলিফ্লুডটি উদাহরণস্বরূপ: "উদাহরণস্বরূপ:" বাক্যাংশটি বোঝায় যে ইনলাইন অনক্লিক বৈশিষ্ট্যটি ব্যবহার করা বেশ কয়েকটি সম্ভাব্য উপায়ের একটি। প্রকৃতপক্ষে, আরও jQuery- জাতীয় ব্যবহার করা হবে .on ('ক্লিক', সাবমিট ডেটেলফর্ম)।

— জান কুকাকা

@ জনকুকাকা - প্রখ্যাত ধন্যবাদ।

— মার্কোজেন

Answer 3

যখন আপনার কোনও বিদ্যমান ফর্ম রয়েছে, এখন এটি jquery - এজ্যাক্স / পোস্টের সাথে কাজ করা উচিত আপনি এখন করতে পারেন:

• আপনার ফর্মের জমা - ইভেন্টে ঝুলুন
• জমা দেওয়ার ডিফল্ট কার্যকারিতা রোধ করুন

• আপনার নিজের জিনিস না

  $(function() {
      //hang on event of form with id=myform
      $("#myform").submit(function(e) {
  
          //prevent Default functionality
          e.preventDefault();
  
          //get the action-url of the form
          var actionurl = e.currentTarget.action;
  
          //do your own request an handle the results
          $.ajax({
                  url: actionurl,
                  type: 'post',
                  dataType: 'application/json',
                  data: $("#myform").serialize(),
                  success: function(data) {
                      ... do something with the data...
                  }
          });
  
      });
  
  });

দয়া করে নোট করুন, serialize()ফাংশনটি উপরের উদাহরণে কাজ করার জন্য , সমস্ত ফর্ম উপাদানগুলির তাদের nameবৈশিষ্ট্য সংজ্ঞায়িত করা প্রয়োজন।

ফর্মের উদাহরণ:

<form id="myform" method="post" action="http://example.com/do_recieve_request">

<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>

@ পিটিএফ - এই নমুনায় পোষ্ট ব্যবহার করে ডেটা জমা দেওয়া হয়েছে, সুতরাং এর অর্থ আপনি আপনার ডেটা অ্যাক্সেস করতে পারবেন

 $_POST['dataproperty1'] 

, যেখানে ডেটাপ্রোপার্টি 1 আপনার জসনে একটি "ভেরিয়েবল-নাম"।

আপনি কোডআইজিটার ব্যবহার করে যদি এখানে নমুনা বাক্য গঠন:

 $pdata = $this->input->post();
 $prop1 = $pdata['prop1'];
 $prop1 = $pdata['prop2'];

Comments

আপনি কেন ফর্মের নির্বাচককে পুনরায় ব্যবহার করছেন, কেন ফর্ম উপাদানটিকে পুনরায় ব্যবহার করবেন না?

— স্লাভা ফমিন দ্বিতীয়

হ্যাঁ, আপনি এটির মতোও করতে পারেন: <form id = "myfor" onsubmit = "do_stuff ()">, তবে জেএস পরে লোড করা / পরাস্ত করা হলে সেই ফাংশনটি উপলব্ধ নাও হতে পারে .. সুতরাং আমি নথিতে এটিকে আরম্ভ করার ভেবেছিলাম। প্রস্তুত .... আমি নিশ্চিত নই যে আমি একই ভাবনায় আছি কিনা, আপনি কি বোঝাতে পারবেন?

— womd

"নাম" বৈশিষ্ট্যটি অবশ্যই সংজ্ঞায়িত করতে হবে তা হাইলাইট করার জন্য ধন্যবাদ

— ccalboni

ডেটা টাইপ: 'অ্যাপ্লিকেশন / জেসন' একটি ত্রুটি। ডেটা টাইপ পড়া উচিত: 'জসন'। উপরের উদাহরণে যেমন রেখে গেছে আপনি পার্স ত্রুটি পাবেন।

— হ্যাঙ্কস্টার

@ হ্যাঙ্কস্টার হ্যাঁ, জসন ছিলেন কিন্তু সম্পাদনা পেয়েছেন ... হল্যান্ডার আপনি কি পরীক্ষা / নিশ্চিত করতে পারবেন?

— womd

Answer 4

JQuery এ আমি নিম্নলিখিতগুলি পছন্দ করব:

$("#form-id").submit()

তবে আবার, সেই কাজটি সম্পাদন করার জন্য আপনার সত্যিই jQuery এর দরকার নেই - কেবল নিয়মিত জাভাস্ক্রিপ্ট ব্যবহার করুন:

document.getElementById("form-id").submit()

Comments

@Windmaomao আপনি কি আপনার ওয়েবপৃষ্ঠায় jQuery অন্তর্ভুক্ত করেছেন? এটি এমনও হতে পারে যে আপনাকে jQuery tead পাশাপাশি ব্যবহার করতে হবে - আমি ইতিমধ্যে নিয়মিত JS সমাধানটি ব্যবহার করার পরামর্শ দিই যদি না আপনি ইতিমধ্যে jQuery অন্তর্ভুক্ত না করেন got

— জার্মানিবার্গ

@ উইন্ডমামাও আমারও একই সমস্যা ছিল। আমার jQuery অন্যান্য সমস্ত ফাংশন চালিয়েছে, কিন্তু ফর্মটি জমা দেয় না। এটি স্রেফ ডকুমেন্ট.জেটলেমেন্টবিআইআইডি পদ্ধতি ব্যবহার করে কাজ করেছে।

— চ্যালেঞ্জঅ্যাকসিটেড

Answer 5

ম্যানুয়াল থেকে: jQuery ডক

$("form:first").submit();

Comments

প্রথম ফর্মটি সন্ধানের চেয়ে "আইডি" দিয়ে ফর্ম জমা দেওয়া

— বাজি

Answer 6

কেউ যদি ব্যবহার করেন তথ্যের জন্য

$('#formId').submit();

এরকম কিছু করবেন না

<button name = "submit">

আমাকে খুঁজে পেতে বেশ কয়েক ঘন্টা সময় লেগেছিল যে জমা দিন () এটি কাজ করবে না।

Comments

মূল শব্দের উপর টাইপো "sumit"এটি অস্পষ্ট করে তোলে যদি টাইপো উত্তরে নিরবচ্ছিন্ন থাকে, বা সমস্যার সাথে সম্পর্কিত ছিল। আপনি কী বোঝাতে চাইছেন যে "submit"jquery ফর্মটি নামের একটি বোতামটি জমা দেয় ()? বা আপনি বোঝাতে চাইছেন যে সমস্যাটি আপনি মানটির পরিবর্তে বোতামটির নাম জমা দিয়েছিলেন type="submit"?

— ড্যারেন

আমার উদ্দেশ্য এই প্রশ্নের উত্তর দেওয়া নয় যারা এই সমস্যার মুখোমুখি হয়েছিল তাদের বলাই। আমি মনে করি সমস্যাটি সংজ্ঞায়িত প্রকারের বোতামের নাম নিয়ে রয়েছে কারণ আমি জমা দেওয়ার আগে কিছু ইনপুট পরীক্ষা করতে অন্লিক ইভেন্টটি ব্যবহার করেছি। যদি টাইপ = জমা দিন তবে আমার অনক্লিক ইভেন্টের আগুন ছাড়াই ফর্ম জমা দিন।

— এজেড সফট

Answer 7

Jquery ব্যবহার করে আপনার ফর্মটি জমা দিতে এটি ব্যবহার করুন। এখানে লিঙ্কটি http://api.jquery.com/submit/

<form id="form" method="post" action="#">
    <input type="text" id="input">
    <input type="button" id="button" value="Submit">
</form>

<script type="text/javascript">
$(document).ready(function () {
    $( "#button" ).click(function() {
        $( "#form" ).submit();
    });
});
</script>

Comments

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

— মিকি

@ মাইকি পরামর্শ দেওয়ার জন্য ধন্যবাদ।

— চিন্তান থুমার

Answer 8

এটি প্রিলোডার সহ একটি ফর্ম পাঠাবে:

var a=$('#yourform').serialize();
$.ajax({
    type:'post',
    url:'receiver url',
    data:a,
    beforeSend:function(){
        launchpreloader();
    },
    complete:function(){
        stopPreloader();
    },
    success:function(result){
         alert(result);
    }
});

আমি এলোমেলো পদ্ধতিতে একটি ফর্ম ডেটা পোস্টকে সংস্কার করার জন্য কিছু কৌশল করেছি http://www.jackart4.com/article.html

Comments

আপনি আপডেট লিঙ্ক পোস্ট করতে পারেন? উপরের লিঙ্কটি আর কাজ করে না।

— ক্রিস 22

Answer 9

$("form:first").submit();

ইভেন্ট দেখুন / জমা দিন ।

Answer 10

মনে রাখবেন যে আপনি যদি ইতিমধ্যে আপনার ফর্মের জন্য জমা দেওয়া ইভেন্ট শ্রোতা ইনস্টল করেন তবে জমা দেওয়ার জন্য সহজাত কল ()

jQuery('#<form-id>').submit( function(e){ 
    e.preventDefault();
    // maybe some validation in here
    if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});

এই ফর্মটির জমা দেওয়ার ইভেন্টের (যা ব্যর্থ হয়) কোনও নতুন ইভেন্ট শ্রোতা ইনস্টল করার চেষ্টা করার সাথে সাথে এটি কাজ করবে না । সুতরাং আপনাকে এইচটিএমএল এলিমেন্ট নিজেই অ্যাক্সেস করতে হবে (jQquery থেকে আন-মোড়ক) এবং সরাসরি এই উপাদানটিতে সাবমিট () জমা দিন:

    jQuery('#<form-id>').submit( function(e){ 
      e.preventDefault();
      // note the [0] array access:
      if ( <form-is-valid> ) jQuery('#<form-id>')[0].submit();
    });

Answer 11

আপনি এজ্যাক্স পাশাপাশি ব্যবহার করার জন্য jquery ফর্ম প্লাগইন ব্যবহার করতে পারেন:

http://malsup.com/jquery/form/

Answer 12

jQuery("a[id=atag]").click( function(){

    jQuery('#form-id').submit();      

            **OR**

    jQuery(this).parents("#form-id").submit();
});

Answer 13

দ্রষ্টব্য যে ইন্টারনেট এক্সপ্লোরারে গতিশীলভাবে তৈরি ফর্মগুলির সাথে সমস্যা রয়েছে। এর মতো তৈরি একটি ফর্ম IE (9) এ জমা দেবে না:

var form = $('<form method="post" action="/test/Delete/">' +
             '<input type="hidden" name="id" value="' + myid + '"></form>');
$(form).submit();

এটিতে কাজ করার জন্য ফর্ম উপাদান তৈরি করুন এবং এটি জমা দেওয়ার আগে এটি সংযুক্ত করুন:

var form = document.createElement("form");
$(form).attr("action", "/test/Delete")
       .attr("method", "post");
$(form).html('<input type="hidden" name="id" value="' + myid + '" />');
document.body.appendChild(form);
$(form).submit();
document.body.removeChild(form);

উদাহরণস্বরূপ 1 এর মতো ফর্ম তৈরি করা এবং তারপরে এটি সংযুক্তি কার্যকর হবে না - IE9 এ এটি একটি জেএসক্রিপ্ট ত্রুটি ছুড়ে ফেলে DOM Exception: HIERARCHY_REQUEST_ERR (3)

টমি ডব্লু @ https://stackoverflow.com/a/6694054/694325 এ প্রপস

Answer 14

সমাধানগুলি এখন পর্যন্ত আপনাকে ফর্মটির আইডি জানতে হবে।

আইডি না জেনে ফর্মটি জমা দেওয়ার জন্য এই কোডটি ব্যবহার করুন:

function handleForm(field) {
    $(field).closest("form").submit();
}

উদাহরণস্বরূপ আপনি যদি একটি বোতামের জন্য ক্লিক ইভেন্টটি পরিচালনা করতে চান তবে আপনি ব্যবহার করতে পারেন

$("#buttonID").click(function() {
    handleForm(this);    
});

Answer 15

বোতামটি ফর্ম ট্যাগগুলির মধ্যে অবস্থিত থাকলে, আমি এই সংস্করণটি পছন্দ করি:

$('.my-button').click(function (event) {
    var $target = $( event.target );
    $target.closest("form").submit();
});

Answer 16

আপনি এটি এর মতো ব্যবহার করতে পারেন:

  $('#formId').submit();

অথবা

document.formName.submit();

Answer 17

গতিশীল ফর্মগুলির জন্য IE কৌশল:

$('#someform').find('input,select,textarea').serialize();

Answer 18

আমার পদ্ধতির সামান্য ভিন্ন সাবমিট বোতামে বোতামটি পরিবর্তন করুন এবং তারপরে ক্লিক করুন

$("#submit").click(function(event) {
$(this).attr('type','submit');
$(this).click();
});

Answer 19

function  form_submit(form_id,filename){
    $.post(filename,$("#"+form_id).serialize(), function(data){
        alert(data);
    });
}

এটি আপনার প্রদত্ত ফাইলের নামের ফর্ম ডেটাটি এজেএক্সের মাধ্যমে পোস্ট করবে।

Answer 20

আমি একটি জেনেরিক সমাধানের প্রস্তাব দিচ্ছি যাতে আপনাকে প্রতিটি ফর্মের জন্য কোড যুক্ত করতে না হয়। Jquery ফর্ম প্লাগইন ব্যবহার করুন (http://jquery.malsup.com/form/) এবং এই কোডটি যুক্ত করুন।

$(function(){
$('form.ajax_submit').submit(function() {
    $(this).ajaxSubmit();
            //validation and other stuff
        return false; 
});

});

Answer 21

আপনি এটি এইভাবে করতে পারে:

$('#myform').bind('submit', function(){ ... });

Answer 22

আমি আজাক্সের মাধ্যমে কোনও ফর্ম জমা দেওয়ার জন্য (প্রকৃতপক্ষে তা জমা না দিয়ে) নিম্নলিখিতটি ব্যবহার করেছি:

  jQuery.get("process_form.php"+$("#form_id").serialize(), {}, 
    function() {
      alert("Okay!"); 
    });

Comments

এটি জমা দেওয়ার মতো কিছু নয় ()। একটি জিনিস জমা দেওয়ার জন্য () পোস্ট শব্দার্থক ব্যবহার করে, আপনি একটি জিইটি

— স্কট এভারেন্ডেন