JQuery ব্যবহার করে - ফর্ম জমা দেওয়া থেকে রোধ করা হচ্ছে

Question

Jquery ব্যবহার করে কোনও ফর্ম জমা দেওয়ার থেকে কীভাবে বাধা দেব?

আমি সবকিছু চেষ্টা করেছিলাম - 3 টি পৃথক অপশন দেখুন যা আমি নীচে চেষ্টা করেছি তবে এটি সব কাজ করে না:

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

ভুল হতে পারে?

আপডেট - এখানে আমার এইচটিএমএল:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

এখানে কি কিছু ভুল আছে?

Comments

আপনার এইচটিএমএল দেখান কারণ আপনার নির্বাচক সম্পূর্ণরূপে ভুল হওয়া ব্যতীত প্রতিরোধের ডিফল্ট বা মিথ্যা হিসাবে পোস্ট করেছেন তেমন কোনও ভুল নেই।

— স্পার্কি

return false;.submit()আমার জন্য কাজ করার পরে ! আমার একই সমস্যা ছিল

— d -_- বি

হ্যান্ডলারের মধ্যে জাভাস্ক্রিপ্টের ত্রুটি থাকলে e.preventDefault();কোডটি পৌঁছানো / সম্পাদন করা হয় না।

— টম

Answer 1

দুটি জিনিস দাঁড়ানো:

• এটি সম্ভব যে আপনার ফর্মের নামটি নেই form। বরং # টি ড্রপ করে ট্যাগটি দেখুন।

• এছাড়াও e.preventDefaultসঠিক জিকুয়েরি সিনট্যাক্স, যেমন

      //option A
      $("form").submit(function(e){
          e.preventDefault();
      });

অপশন সিতেও কাজ করা উচিত। আমি বি বিকল্পের সাথে পরিচিত নই

একটি সম্পূর্ণ উদাহরণ:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>

Comments

অন্য কিছু ভুল। আমি এই কৌশলটি প্রতিদিন ব্যবহার করছি। সর্বোত্তম অনুমান পৃষ্ঠায় জাভাস্ক্রিপ্ট ত্রুটি আছে, সম্ভবত এটি ফায়ারব্যাগ দিয়ে পরীক্ষা করে দেখুন?

— ফিলিপ ফৌরি

@ লুচি ওয়েদারফোর্ড, আমি আমার উত্তরটি কাজ করে এমন একটি নমুনা দিয়ে আপডেট করেছি। আপনি কিছু স্পট।

— ফিলিপ ফৌরি

আপনার আপডেটে এইচটিএমএল আমি লক্ষ্য করেছি যে আপনার ফর্মের জন্য শ্রেণি বৈশিষ্ট্য রয়েছে। থেকে আপনার jQuery নির্বাচক পরিবর্তন $('#form')করতে $('.form')বর্গ বৈশিষ্ট্যাবলী জন্য।

— ফিলিপ ফৌরি

ধন্যবাদ! আমি একই কোডে আপনার কোডটি ব্যবহার করে শেষ করেছি, এবং এটি কার্যকর হয়েছে তবে এখনও কী ভুল ছিল তা নিশ্চিত করে বলা যায় না, তবে এখন এটি বেশ ভাল। ধন্যবাদ!

— লুসি ওয়েদারফোর্ড

@ অ্যাঞ্জেলো রিগো ই হ'ল প্যারামিটারে আপনি যে নামটি দেন তা কেবল এই ক্ষেত্রে এটি জমা দেওয়ার ঘটনা।

— squall3d

Answer 2

আপনার সম্ভবত পৃষ্ঠায় কয়েকটি ফর্ম রয়েছে এবং $ ('ফর্ম') ব্যবহার করছেন submit পরিবর্তে শ্রেণি নির্বাচক ব্যবহার করুন, বা এটি চেষ্টা করুন:

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
}) 

বা এর আরও ভাল সংস্করণ:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});

Comments

আমার ক্ষেত্রে, মিথ্যা ফিরিয়ে দেওয়া একটি মূল বিষয় ছিল।

— এলকুইমিস্ট

Answer 3

ফর্ম জমা দেওয়ার ব্যবহারকে ডিফল্ট / প্রতিরোধ করতে

e.preventDefault();

ইভেন্ট বুদবুদ ব্যবহার বন্ধ করতে

e.stopPropagation();

ফর্ম জমা দিতে বাধা দিতে 'রিটার্ন মিথ্যা' কাজ করা উচিত।

Comments

এই উত্তরটি দেখুন কারণ jQuery এগুলি অন্যভাবে পরিচালনা করে। stackoverflow.com/questions/1357118/…

— স্পার্কি

এই পরীক্ষা করে দেখুন ঘটনা bubling বুঝতে quirksmode.org/js/events_order.html

— আলফা

উপর jQuery এর এপিআই পদ বলে: "একটি ইভেন্ট হ্যান্ডলার থেকে মিথ্যা রিটার্নিং স্বয়ংক্রিয়ভাবে কল হবে event.stopPropagation()এবং event.preventDefault()একটি। falseমান এছাড়াও জন্য একটি সাঁটে লেখার হিসাবে হ্যান্ডলার জন্য প্রেরণ করা সম্ভব function(){ return false; }।"

— পল

Answer 4

আমারও একই সমস্যা ছিল। আপনি যা চেষ্টা করেছিলেন তাও আমি চেষ্টা করেছিলাম। তারপরে আমি আমার পদ্ধতিটি jquery ব্যবহার না করে ফর্ম ট্যাগটিতে "onsubmit" বৈশিষ্ট্যটি ব্যবহার করে পরিবর্তন করি।

<form onsubmit="thefunction(); return false;"> 

এটা কাজ করে।

তবে, যখন আমি কেবল "thefunction ()" এর মধ্যে মিথ্যা ফেরতের মান রাখার চেষ্টা করেছি, এটি জমা দেওয়ার প্রক্রিয়াটি আটকাবে না, তাই আমাকে অবশ্যই "মিথ্যা প্রত্যাবর্তন" লাগাতে হবে; অনসামিত বৈশিষ্ট্যে। সুতরাং, আমি উপসংহারে পৌঁছেছি যে আমার ফর্ম অ্যাপ্লিকেশন জাভাস্ক্রিপ্ট ফাংশন থেকে রিটার্ন মান পেতে পারে না। এটি সম্পর্কে আমার কোনও ধারণা নেই।

Comments

এটি false;এবং এর মধ্যে পার্থক্য return false;। আপনার দরকারonsubmit="return thefunction();"

— xr280xr

Answer 5

আমার একই সমস্যা ছিল এবং আমি এইভাবে সমাধান করেছি (মার্জিত নয় তবে এটি কাজ করে):

$('#form').attr('onsubmit','return false;');

আমার মতে এটির সুবিধা রয়েছে যে আপনি যে কোনও সময় পরিস্থিতি ফিরিয়ে দিতে পারবেন:

$('#form').attr('onsubmit','return true;');

Comments

ফর্মটি $('#form').removeAttr('onsubmit');

— ফেরত

Answer 6

ফর্ম উপাদানটিতে নয় উপাদান জমা দেওয়ার ইভেন্টটিতে ইভেন্টটি সংযুক্ত করুন। উদাহরণস্বরূপ আপনার এইচটিএমএলে এটি করুন

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});

Answer 7

হ্যাঁ দাও সাবজেক্ট দাও যদি অন্যথায় ত্রুটি দেখায় তবে ফর্মটি বৈধ কিনা তা আপনি কেবল খতিয়ে দেখতে পারেন।

এইচটিএমএল

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

জাভাস্ক্রিপ্ট

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });

Answer 8

যখন আমি <form>কোনও বৈশিষ্ট্য ছাড়াই ট্যাগটি ব্যবহার করি id="form"এবং এটিকে সরাসরি তার নাম দিয়ে কল করি যখন এটি সরাসরি আমার সাথে কাজ করে।
এইচটিএমএল ফাইলে আপনার কোড:

<form action="page2.php" method="post">

এবং জ্যাকুরি স্ক্রিপ্টে:

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });

Answer 9

$('#form')সঙ্গে একটি উপাদান সন্ধান করে id="form"।

$('form') ফর্ম উপাদান জন্য সন্ধান করে

Answer 10

আপনি ফর্ম আইডি ভুলে গেছেন, এবং এটি কার্যকর হয়

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});

Answer 11

// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

এখান থেকে: https://api.jquery.com/submit-selector/ (জমা দেওয়ার ধরণের আকর্ষণীয় পৃষ্ঠা)

Answer 12

এটি কাজ করে বলে মনে হয় এবং কিছুটা সহজ হতে পারে:

$('#Form').on('submit',function(){
    return false;
})

Answer 13

JQuery ব্যবহার করে, আপনি নিম্নলিখিতটি করতে পারেন:

1- ইভেন্টটি গুলি চালানো থেকে আটকাতে গিয়ে একটি জমা দিন বোতামের সাহায্যে নেটিভ ফর্ম জমা দিন ইভেন্টটি ব্যবহার করুন

2- ফর্মটি যাচাই করুন বৈধ সম্পত্তি এটি নিম্নলিখিত হিসাবে প্রয়োগ করা যেতে পারে:

1- এইচটিএমএল:

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- জাভাস্ক্রিপ্ট

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });