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

Question

আমার একটি ফর্ম আছে যা এতে কোথাও একটি জমা বোতাম রয়েছে।

তবে আমি কোনওভাবে জমা দেওয়ার ইভেন্টটি 'ধরা' এবং এটিকে ঘটতে বাধা দিতে চাই।

আমি কি এটি করার কোন উপায় আছে?

আমি জমা বোতামটি পরিবর্তন করতে পারি না, কারণ এটি একটি কাস্টম নিয়ন্ত্রণের অংশ।

Comments

আপনি এখনও জমা বোতাম অ্যাক্সেস করতে পারে। পৃষ্ঠাটি রেন্ডার করুন এবং পৃষ্ঠার উত্সটি দেখে এর ক্লায়েন্টআইডি দখল করুন। তারপরে, jQuery এর মতো কিছু ব্যবহার করে আপনি $ ('# ctl01_cph01_controlBtn1') এর মতো কিছু করতে পারেন click ক্লিক করুন (ফাংশন () false মিথ্যা প্রত্যাবর্তন করুন;});

— বিদ্রোহী

@ রাফায়েল: সত্য ... তবে এটি একটি শেষ অবলম্বন হবে - এটি একটি খুব জটিল নিয়ন্ত্রণ।

— নাথান ওসমান

@ র‌্যাফ যা এসপ নেট ভিত্তিক, এবং সেরা অনুশীলনও নয়। তবে এটি মূলত সঠিক। আমি কেবল উত্সটিতে উঁকি দেওয়া এবং নিয়ন্ত্রণের নামটি এড়িয়ে চলতাম, কারণ কেউ পৃষ্ঠা সম্পাদনা করলে এটি পরিবর্তন হতে পারে। অনিচ্ছাকৃত পার্শ্ব প্রতিক্রিয়া এবং যেমন।

Answer 1

অন্যান্য উত্তরগুলির মতো নয়, প্রত্যাবর্তন উত্তরের falseএকটি অংশ মাত্র । রিটার্ন স্টেটমেন্টের আগে একটি জেএস ত্রুটি ঘটেছিল সেই দৃশ্যটি বিবেচনা করুন ...

এইচটিএমএল

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

লিপি

function mySubmitFunction()
{
  someBug()
  return false;
}

falseএখানে প্রত্যাবর্তন কার্যকর করা হবে না এবং ফর্ম যে কোনও উপায়ে জমা দেওয়া হবে। preventDefaultএজ্যাক্স ফর্ম জমা দেওয়ার জন্য আপনার ডিফল্ট ফর্ম ক্রিয়াকে আটকাতেও কল করতে হবে।

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

এই ক্ষেত্রে, বাগ সহ ফর্মটি জমা দেবে না!

বিকল্পভাবে, একটি try...catchব্লক ব্যবহার করা যেতে পারে।

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

Comments

কেন falseসরাসরি থেকে ফিরে আসবেন না onsumbit?

— অধ্যাপক

আপনি অনসামিতটিতে ব্যবহারকারীকে একটি ত্রুটি বার্তা দেখাতে চাইতে পারেন। উদাহরণস্বরূপ, "এই বাধ্যতামূলক ক্ষেত্রটি পূরণ করুন তারপরে জমা দিন"। সেক্ষেত্রে ইভেন্ট.প্রিভেন্টডাফল্ট খুব কাজে আসবে

— মার্ক

@ প্রফোক যদি আপনি ইভেন্ট.প্রিভেন্টডাফল্ট () ব্যবহার করেন তবে তা বিবেচনাধীন নয়, চেষ্টা / ধরা কেবল আপনার ত্রুটি পরিচালনার অংশ হতে পারে

— বেন রোয়ে

<ফর্ম onsubmit = "mySubmitFunction (ইভেন্ট)" ফিরে "> কাজ করেছে ... ফায়ারফক্সের ব্র্যাকেটে ইভেন্ট ইভেন্ট শব্দটি ব্যবহার করতে হয়েছিল

— danday74

@ বেনরোউ আপনাকে কল করা পদ্ধতিতে evt পরামিতি যুক্ত করা উচিত। (<form onsubmit="return mySubmitFunction(evt)">).তাহলে এটি অনির্ধারিত ত্রুটি দেয়।

— ইউফুকসুরমেন

Answer 2

আপনি এর onsubmitমতো ইনলাইন ইভেন্টটি ব্যবহার করতে পারেন

<form onsubmit="alert('stop submit'); return false;" >

অথবা

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

ডেমো

এখন, বড় প্রকল্পগুলি তৈরি করার সময় এটি ভাল ধারণা হতে পারে না। আপনার ইভেন্ট শ্রোতাদের ব্যবহারের প্রয়োজন হতে পারে।

দয়া করে সম্বন্ধে আরও পড়তে বনাম ইভেন্ট শ্রোতাদের (addEventListener এবং ইন্টারনেট এর attachEvent) ইনলাইন ঘটনাবলী এখানে । ক্রিস বেকারের চেয়ে আমি এর চেয়ে বেশি ব্যাখ্যা করতে পারি না ।

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

Comments

ভাল, দ্রুত রাস্তায় সমাধান।

— ফার্নান্দো টরেস

কোন কারণে, <form onsubmit="return false;" >আমার জন্য কাজ করে না।

— রুয়ান

Answer 3

ব্যবহার করে ফর্মটিতে একটি ইভেন্ট শ্রোতাদের সংযুক্ত করুন .addEventListener()এবং তারপরে .preventDefault()পদ্ধতিটিতে কল করুন event:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>

আমার মনে submitহয় onsubmitবৈশিষ্ট্যের সাথে ইভেন্ট হ্যান্ডলারটি ইনলাইন সংজ্ঞায়নের চেয়ে এটি আরও ভাল সমাধান কারণ এটি ওয়েবপৃষ্ঠার যুক্তি এবং কাঠামোকে পৃথক করে। এমন একটি প্রকল্প বজায় রাখা অনেক সহজ যেখানে যুক্তি এইচটিএমএল থেকে পৃথক করা হয়। দেখুন: স্ববিরোধী জাভাস্ক্রিপ্ট ।

DOM অবজেক্টের .onsubmitসম্পত্তি ব্যবহার করা formভাল ধারণা নয় কারণ এটি আপনাকে একটি উপাদানকে একাধিক জমা কলব্যাক সংযুক্তি থেকে বিরত রাখে। অ্যাডএভেন্টলিস্টনার বনাম অনক্লিক দেখুন ।

Comments

& $("button").click(function(e) { e.preventDefault() });

— জ্যাকোয়েরির

কেন অন্যান্য সমস্ত উত্তর ইনলাইন অনসামিত ব্যবহার করে রাখে, কেন ওপি উল্লেখ করেছে যে সে বোতামটি পরিবর্তন করতে পারে না (যার অর্থ তিনি সম্ভবত ফর্ম পরিবর্তন করতে পারবেন না)। আমাদের যদি বোতামের আইডি থাকে তবে 'ফর্ম' পাওয়ার কোনও উপায় আছে কিনা তা ভাবছেন

— রবার্ট সিনক্লেয়ার

Answer 4

আর একবার চেষ্টা কর...

এইচটিএমএল কোড

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

jQuery কোড

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

অথবা

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

Comments

এই প্রশ্নে কোন jQuery ট্যাগ নেই।

— মিশা পেরেকোভস্কি

@ গথডো এবং তবুও সমাধান এখনও একই। ঠিক পাগল?

— কেভিন বি

@ গথডো হ্যাঁ, এটি ঠিক একই রকম। eventObject.preventDefault। আপনি হ্যান্ডলারের সাথে যেভাবে বাঁধেন সেগুলি সমাধান পরিবর্তন করে না। আমি এমনকি তর্ক করব আপনার উত্তর গৃহীত উত্তরটির চেয়ে আলাদা নয়।

— কেভিন বি

stopPropagationআমার ক্ষেত্রে এটিই কাজ করেছিল। ধন্যবাদ! :)

— ক্রেগক্স

Answer 5

নিম্নলিখিতটি এখন পর্যন্ত কাজ করে (ক্রোম এবং ফায়ারফক্সে পরীক্ষিত):

<form onsubmit="event.preventDefault(); return validateMyForm();">

যেখানে বৈধতা মাইফর্ম () হল এমন একটি ফাংশন যা falseবৈধতা ব্যর্থ হলে ফিরে আসে । মূল বিষয়টি হল নামটি ব্যবহার করা event। আমরা যেমন ব্যবহার করতে পারি নাe.preventDefault()

Comments

onsubmit = "বৈধতা ফেরান বৈধ মাইফর্ম ();" যথেষ্ট তবে ভ্যালিড মাইফর্ম () এর সত্য বা মিথ্যা প্রত্যাবর্তন করা উচিত।

— অ্যাড্রিয়ান পি।

Answer 6

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

Comments

আমি মনে করি যে ব্যবহার .onsubmitকরা একটি খারাপ ধারণা কারণ এটি submitআপনাকে এক উপাদানে একাধিক কলব্যাক সংযুক্তি থেকে বিরত রাখে। আমি ব্যবহার করার পরামর্শ দিচ্ছি .addEventListener()।

— মিশা পেরেকোভস্কি

এমনকি আপনি। সম্পত্তির দ্বারা নিবন্ধিত হ্যান্ডলারটি প্রথমে অনুরোধ করা হবে তারপরে .addEventListener () এর সাথে নিবন্ধিত হওয়া ক্রমে সেগুলি নিবন্ধভুক্ত হবে।

— ড্যানিয়েল গ্রেঞ্জার

Answer 7

আপত্তিজনক জাভাস্ক্রিপ্ট প্রোগ্রামিং কনভেনশনগুলি অনুসরণ করতে এবং DOM কত দ্রুত লোড হবে তার উপর নির্ভর করে নিম্নলিখিতটি ব্যবহার করা ভাল ধারণা হতে পারে:

<form onsubmit="return false;"></form>

তারপরে আপনি কোনও লাইব্রেরি ব্যবহার করছেন তবে লোড বা ডিওএম প্রস্তুত ব্যবহার করে ইভেন্টগুলি ওয়্যার আপ করুন।

$(function() {
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children('input[type="text"]').each(function(){
            if($(this).val().length == 0) {
                alert('You are missing a field');
                ev.preventDefault();
            }
        });
    });
});

label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>

এছাড়াও, আমি সর্বদা actionবৈশিষ্ট্যটি ব্যবহার করব কারণ কিছু লোকের নোস্ক্রিপ্টের মতো কিছু প্লাগইন চলতে পারে যা তারপরে যাচাইকরণটি ভেঙে দেয়। আপনি যদি ক্রিয়া বৈশিষ্ট্যটি ব্যবহার করে থাকেন তবে খুব কমপক্ষে আপনার ব্যবহারকারী ব্যাকএন্ড বৈধতার ভিত্তিতে সার্ভার দ্বারা পুনঃনির্দেশিত হবে। window.locationঅন্যদিকে আপনি যদি এমন কিছু ব্যবহার করেন তবে জিনিসগুলি খারাপ হবে be

Answer 8

ফর্ম জমা দিতে বাধা দেওয়ার জন্য আপনার কেবল এটি করা দরকার।

<form onsubmit="event.preventDefault()">
    .....
</form>

উপরের কোড ব্যবহার করে এটি আপনার ফর্ম জমা দেওয়া আটকাবে।

Answer 9

এখানে আমার উত্তর:

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>

আমি যোগ event.preventDefault();উপর onsubmitএবং এটি কাজ করে।

Answer 10

আপনি ফর্মটিতে ইভেন্টলিস্টার যুক্ত করতে পারেন এবং এটি ফর্ম ডেটাটিকে preventDefault()JSON এ নীচে রূপান্তর করতে পারেন:

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  data[element.name] = element.value;
  return data;

}, {});

const handleFormSubmit = event => {
    event.preventDefault();
    const data = formToJSON(form.elements);
    console.log(data);
  //  const odata = JSON.stringify(data, null, "  ");
  const jdata = JSON.stringify(data);
    console.log(jdata);

    (async () => {
      const rawResponse = await fetch('/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: jdata
      });
      const content = await rawResponse.json();

      console.log(content);
    })();
};

const form = document.forms['myForm']; 
form.addEventListener('submit', handleFormSubmit);

<form id="myForm" action="/" method="post" accept-charset="utf-8">
    <label>Checkbox:
        <input type="checkbox" name="checkbox" value="on">
    </label><br /><br />

    <label>Number:
        <input name="number" type="number" value="123" />
    </label><br /><br />

    <label>Password:
        <input name="password" type="password" />
    </label>
    <br /><br />

    <label for="radio">Type:
        <label for="a">A
            <input type="radio" name="radio" id="a" value="a" />
        </label>
        <label for="b">B
            <input type="radio" name="radio" id="b" value="b" checked />
        </label>
        <label for="c">C
            <input type="radio" name="radio" id="c" value="c" />
        </label>
    </label>
    <br /><br />

    <label>Textarea:
        <textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
    </label>
    <br /><br />

    <label>Select:
        <select name="select">
            <option value="a">Value A</option>
            <option value="b" selected>Value B</option>
            <option value="c">Value C</option>
        </select>
    </label>
    <br /><br />

    <label>Submit:
        <input type="submit" value="Login">
    </label>
    <br /><br />


</form>