ফরম জমা দিন jQuery এ ডিফল্ট প্রতিরোধ করুন


138

এতে দোষ কী?

এইচটিএমএল:

<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">        
      <input type="text" name="zip" value="Zip code" id="Zip" class="required valid">      
      <input type="submit" name="Next" value="Submit" class="forms" id="1">
  </form>

JQuery:

$("#cpa-form").submit(function(e){
    e.preventDefault();
  });

12
এখানে সূক্ষ্ম কাজ করে । আপনি আপনার প্রশ্নে আরও তথ্য পোস্ট করতে পারেন? আপনি যদি alert()হ্যান্ডলারের সাবমিটারে থাকেন তবে কি এটি কল হবে? যদি তা না হয় তবে এটি হতে পারে যে আপনার স্ক্রিপ্টে একটি ত্রুটি রয়েছে যা ইভেন্ট হ্যান্ডলারটিকে সঠিকভাবে ওয়্যার আপ হতে বাধা দেয়। ত্রুটি কনসোলে কিছু আছে?
টাউন

3
এই লিঙ্কটি অভ্যন্তরীণ এবং আমাদের কোনও ব্যবহারের নয়।
স্টিভ রবিনস

সম্ভবত একটি পুরানো সংস্করণ ক্যাশে ছিল। এখন কাজ হচ্ছে বলে মনে হচ্ছে।
djreed


2
! নিশ্চিত করুন যে জাভাস্ক্রিপ্ট কোডটি ডিওএম প্রস্তুত হওয়ার পরে চলে।
ট্যারি করুন

উত্তর:


175

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

$("#cpa-form").submit(function(e){
    return false;
});

12
এটি কাজ করে, তবে কেন ডিফল্ট কাজ প্রতিরোধের পছন্দের পদ্ধতিটি ব্যবহার করে না?
মাইকেজে

26
আরও ভাল ব্যাখ্যার জন্য এই প্রশ্নটি দেখুন: stackoverflow.com/questions/1357118/…
জর্ডান ব্রাউন

8
এটি ভুল উত্তর। e.preventDefault()একটি ফর্ম জমা দেওয়ার সাথে সূক্ষ্মভাবে কাজ করে, সমস্যাটি ওপি কোডটিতে অন্য কোথাও রয়েছে। ব্যবহারের ফলে অনিচ্ছাকৃত পরিণতি return false হতে পারে
চক লে বাট

58

নতুন "চালু" ইভেন্ট সিনট্যাক্সটি ব্যবহার করুন।

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });
});

উদ্ধৃতি: https://api.jquery.com/on/


2
ওহে. এটি আমার পক্ষে কাজ করে না। (হ্যাঁ, আমি আমার কোডটি ভিতরে রেখেছি $(document).ready()) আমি কীভাবে এটি কাজ করব?
গুই ইমামুরা

1
@ গুইআইমামুরা আরও তথ্যের প্রয়োজন আপনি বৈধ ভেরিয়েবল সেট করেছেন trueনাকি false? আপনি কি jsfiddle.net এ আপনার কোডটি পুনরায় তৈরি করতে এবং লিঙ্কটি প্রেরণ করতে পারেন? alert()ফাংশনটি গুলি চালাচ্ছে কিনা তা নিশ্চিত করার জন্য একটি যুক্ত করার চেষ্টা করুন । কিছু লোক রিপোর্ট করেছেন যে e.stopPropagation();পরে যোগ করা e.preventDefault();অন্যান্য শৃঙ্খলাবদ্ধ ঘটনা গুলি চালানো বন্ধ করে দেয়।
স্কার্ভার 2

হ্যালো, আমি jQuery যাচাইকরণ$('#myFormID').validationEngine('validate') থেকে ইঞ্জিনটি ভেরিয়েবল হিসাবে ব্যবহার করছি valid, ইনপুটটি বৈধ ইমেল ঠিকানা কিনা তা পরীক্ষা করতে। তবুও, আমি চাই এটি কোনওভাবেই ডিফল্ট আচরণকে আটকাতে পারে; নেই preventDefaultএটা আগে না হলে ব্লক ভিতরে হতে, আছে?
গুই ইমামুরা

@ গুয়াইমামুরার কথা শুনে আপনি খুশী হয়ে কাজে লাগলেন। preventDefaultভিতরে বৈধ যদি না ফর্ম জমা বন্ধ করার ব্লক। অন্য কথায়, বৈধ হলে , ফর্মটির ডিফল্ট আচরণ ব্যবহার করুন।
স্কার্ভার 2

13

আমি বিশ্বাস করি যে উপরের উত্তরগুলি সমস্ত সঠিক, তবে কেন submitপদ্ধতিটি কাজ করে না তা নির্দেশ করে না।

ঠিক আছে, submitjQuery formউপাদানটি না পেলে পদ্ধতিটি কার্যকর হবে না এবং jQuery সে সম্পর্কে কোনও ত্রুটি না দেয়। আপনার স্ক্রিপ্টটি ডকুমেন্টের মাথা মধ্যে স্থাপন করা হয়, তাহলে কোড পর রান নিশ্চিত DOMহয় প্রস্তুত । সুতরাং, $(document).ready(function () { // your code here // });সমস্যার সমাধান করবে।

সর্বোত্তম অনুশীলন হ'ল সর্বদা আপনার স্ক্রিপ্টটি নথির নীচে রাখুন।


11

এটি একটি প্রাচীন প্রশ্ন, তবে এখানে গৃহীত উত্তর সত্যিই সমস্যার মূলে যায় না।

আপনি এই দুটি উপায়ে সমাধান করতে পারেন। JQuery সহ প্রথম:

$(document).ready( function() { // Wait until document is fully parsed
  $("#cpa-form").on('submit', function(e){

     e.preventDefault();

  });
}

বা jQuery ছাড়াই:

// Gets a reference to the form element
var form = document.getElementById('cpa-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {

  e.preventDefault();

});

return falseএই সমস্যাটি সমাধান করার জন্য আপনাকে ব্যবহার করার দরকার নেই ।


আমি jquery ইভেন্ট শ্রোতার পরিবর্তে নেটিভ js ইভেন্ট শ্রোতাদের প্রতিস্থাপন করেছি এবং এটির কাজ। ধারণা জন্য আপনাকে ধন্যবাদ।
অরহান গাজী

6
$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});

এটি এমন একটি পৃষ্ঠায় আমার জন্য নিখুঁত কাজ করে যেখানে আমার একটি সার্ভার পাশের ফর্মের ভিতরে ক্লায়েন্ট সাইড ফর্ম রয়েছে।
লিকনেস


2

আপনার কোডটি সূক্ষ্ম মাত্র আপনাকে এটিকে প্রস্তুত কার্যের ভিতরে রাখতে হবে।

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}

এই পরামর্শটি ইতিমধ্যে অন্যান্য উত্তর সরবরাহ করেছে। পৃষ্ঠা ব্লাট কমাতে দয়া করে এই উত্তরটি সরিয়ে দিন। একই অনুভূতির প্রতিনিধিত্বকারী অন্যান্য উত্তর (গুলি) আপনি উত্সাহিত করতে পারেন।
মিকম্যাকুসা

2

প্রস্তাবিত - এই অংশটি পুরানো হয়েছে তাই দয়া করে এটি ব্যবহার করবেন না।

আপনি এই কোডটি চেষ্টা করে দেখতে পারেন, যদি আপনার উদাহরণের পরে যুক্ত গতিশীল ফর্ম থাকে added উদাহরণস্বরূপ আপনি এজ্যাক্স সহ উইন্ডো অ্যাসিঙ্ক লোড করেছেন এবং এই ফর্মটি জমা দিতে চান।

$('#cpa-form').live('submit' ,function(e){
    e.preventDefault();      
    // do something
});

আপডেট - আপনি গতিশীল যুক্ত হওয়া সামগ্রী হ্যান্ডেল করতে চাইলে ডকুমেন্ট ডিওএম শোনার জন্য () পদ্ধতিতে jQuery ব্যবহার করা উচিত।

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

$('form#formToHandle').on('submit'... 

অথবা

$('form#formToHandle').submit(function(e) {
    e.preventDefault();      
    // do something
});

কেস 2, গতিশীল সংস্করণ: আপনি যদি ইতিমধ্যে আপনার কোডটিতে নথিটি শোনেন তবে এই উপায়টি আপনার পক্ষে ভাল। এটি কোডের জন্যও পরে কাজ করবে যা পরে ডিওএমের মাধ্যমে যুক্ত হয়েছিল বা এজেএক্সের সাথে ডায়নামিক।

$(document).on('submit','form#formToHandle',function(){
   // do something like e.preventDefault(); 
});

অথবা

$(document).ready(function() {
    console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

অথবা

$(function() { // <- this is shorthand version
   console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

7
.live()jQuery 1.7 থেকে অবহেলা করা হয়েছে এবং 1.9 থেকে সরানো হয়েছে। .on()পরিবর্তে ব্যবহার করুন।
হাঙ্ক

0

হ্যালো গুগল ট্যাগ ম্যানেজার (জিটিএম) এর সাথে একটি অ্যাজাক্স ফর্ম কাজ করার জন্য একটি সমাধান চেয়েছিলেন, রিটার্ন মিথ্যাটি সম্পূর্ণ হওয়া রোধ করেছিল এবং গুগল অ্যানালিটিকস সমাধানে রিয়েল টাইমে ইভেন্টটির সক্রিয়করণ জমা দেওয়া ছিল রিটার্নটিকে ই -প্রিভেন্টডাফল্ট () দ্বারা মিথ্যা বদলানো ; যে সঠিকভাবে কাজ করেছে কোড অনুসরণ করে:

 $("#Contact-Form").submit(function(e) {
    e.preventDefault();
   ...
});

0

e.preventDefault () কেবলমাত্র আপনার জাভাস্ক্রিপ্টগুলিতে সমস্যা না থাকলে সূক্ষ্মভাবে কাজ করে, আপনার জাভাস্ক্রিপ্টগুলি পরীক্ষা করে দেখুন e.preventDefault () যদি আপনার জেএসের কিছু অন্যান্য অংশও কাজ না করে তবে কাজ করে না


0

আচ্ছা আমিও একই ধরণের সমস্যার মুখোমুখি হয়েছি। আমার জন্য সমস্যাটি হ'ল ডম রেন্ডার হওয়ার আগে জেএস ফাইলটি লোড হয়ে যায়। তাই আপনার ট্যাগের <script>শেষে যান <body>

বা মুলতুবি ব্যবহার।

<script defer src="">

তাই বিশ্রামের e.preventDefault()কাজ করা উচিত।

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