জাভাস্ক্রিপ্ট - এইচটিএমএল ফর্ম মান পাওয়া

112

জাভাস্ক্রিপ্টে পাস করার জন্য আমি কীভাবে একটি HTML ফর্মটির মান পেতে পারি?

এটা কি সঠিক? আমার স্ক্রিপ্টটি পাঠ্যবক্স থেকে দুটি আর্গুমেন্ট নেয়, একটি ড্রপডাউন বাক্স থেকে।

<body>
<form name="valform" action="" method="POST">

Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
Card Type: <select name="cardtype" id="cardtypeid">
  <option value="visa">Visa</option>
  <option value="mastercard">MasterCard</option>
  <option value="discover">Discover</option>
  <option value="amex">Amex</option>
  <option value="diners">Diners Club</option>
</select><br/>
<input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" />
</body>

javascript html

— user377419
সূত্র

2

"এইচটিএমএল কোডে কোনও ফর্মের মান" বলতে কী বোঝায়?

— পেক্কা

7

প্রশ্নটি বেশ স্পষ্ট

— লরেন্টাঙ্গু

1

@laurentngu প্রশ্ন তিনি "একটি মান মানে হল এর একটি HTML ফর্ম" আউট একটি মান, যার অর্থ এর অনেক মান, বা তিনি "মানে মান সমগ্র এইচটিএমএল ফর্ম", এক বড় মান সব অর্থ "ধারাবাহিকভাবে "মান

— নীলজাইকে

প্রশ্নটি স্পষ্ট ... তবে স্পষ্টতই এটি কোনও ফর্মের মান পাস করার জন্য খুব একটা বোঝায় না।

— ম্যাথু

112

এইচটিএমএল:

<input type="text" name="name" id="uniqueID" value="value" />

জাতীয়:

var nameValue = document.getElementById("uniqueID").value;

— user406632
সূত্র

7

@ সংক্ষেপে 876: আপনি নিজে এটি পরীক্ষা করেছেন? o_0 আপনি এটি সঠিকভাবে করেছেন কিনা তা নির্ধারণের এটি একটি দুর্দান্ত উপায়।

— জেফ রুপার্ট

1

হ্যাঁ, তবে এটি কেবল একটি সত্য / মিথ্যা প্রদান করে এবং ফাংশনটি এমনকি ডাকা হয়েছিল কিনা তা নির্ধারণ করার জন্যও নিশ্চিত নয়। এইভাবে আপনি সাহায্য করতে পারেন।

— ব্যবহারকারী 377419

আমি এটি চেষ্টা করে দেখলাম, তবে nameValueএটি ডিফল্ট মান এবং এটির দ্বারা ব্যবহারকারী প্রবেশ করানো নয়।

— জেমস টি।

কেন নাম = "নাম", এবং এর কোনও আইডি না থাকলে কী হবে?

— নীলজাইকে

65

আপনি যদি ফর্মের মানগুলি পুনরুদ্ধার করতে চান (যেমন HTTP পোষ্ট ব্যবহার করে প্রেরণ করা হবে) আপনি ব্যবহার করতে পারেন:

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

const formData = new FormData(document.querySelector('form'))
for (var pair of formData.entries()) {
  // console.log(pair[0] + ': ' + pair[1]);
}

ফর্ম-সিরিয়ালাইজ ( https://code.google.com/archive/p/form-serialize/ )

serialize(document.forms[0]);

jQuery এর

$("form").serializeArray()

— কেভিন ফাররুগিয়া
সূত্র

12

আপনার প্রথম উদাহরণ FormDataনিজেই কিছু করে না .. আপনার এখনও ফর্মটি থেকে মানগুলি নেওয়া দরকার।

— পুটভান্ডে

1

আমি বিশ্বাস করি যে এটি ভুল। ফর্মডাটা শুরু করার সময় আপনি যদি কোনও ফর্ম উপাদান নির্দিষ্ট করেন তবে এটি সঠিকভাবে মানগুলি পুনরুদ্ধার করবে। কোডেপেন.ইও

— কেভিন ফারুগিয়া

2

ফর্মডাটা অবজেক্টটি যদিও মান হয় না। FormData.entries()মানগুলি পুনরুদ্ধার করতে আপনাকে এখনও কল করতে হবে এবং পুনরাবৃত্তি করতে হবে। অতিরিক্তভাবে, FormData.entries()সাফারি, এক্সপ্লোরার বা এজতে উপলভ্য নয়। বিকাশকারী.মোজিলা.আর.ইন-

— ডেভ

1

ব্রাউজারের সামঞ্জস্যের ক্ষেত্রে সঠিক, তবে পলিফিল রয়েছে । পুনরাবৃত্তি হওয়া সম্পর্কে formData.entries(), এটি আপনি কী অনুসন্ধান করছেন তা নির্ভর করে। আপনি যদি একটি একক ক্ষেত্রের মানটি খুঁজছেন তবে আপনি ব্যবহার করতে পারেন formData.get(name)। তথ্যসূত্র: পান () ।

— কেভিন ফারুগিয়া

হ্যাঁ আমি FormDataChrome এ কিছু আউটপুট পেতে পারি না ।

— আতভ 32

33

এখানে ডাব্লু 3 স্কুলগুলির একটি উদাহরণ রয়েছে:

function myFunction() {
    var elements = document.getElementById("myForm").elements;
    var obj ={};
    for(var i = 0 ; i < elements.length ; i++){
        var item = elements.item(i);
        obj[item.name] = item.value;
    }

    document.getElementById("demo").innerHTML = JSON.stringify(obj);
}

ডেমোটি এখানে পাওয়া যাবে ।

— ত্রান এনগুইন নাহত থুই
সূত্র

12

কেবল একটি সতর্কতা, যদি কেউ রেডিও বোতাম বা চেকবক্সগুলির মতো অন্যান্য ধরণের ইনপুটগুলির নির্বাচিত মান পেতে চায় তবে এটি আপনার যা করতে চান তা তা করবে না।

— শান

আমি পরিবর্তন করতে হয়েছিল var obj = {};করার var obj = [];।

— ড্যানিয়েল উইলিয়ামস

@ সিয়ান কেন এটি রেডিও বোতামগুলির জন্য কাজ করবে না? তারা উপাদানগুলির অধীনেও উপস্থিত হয়

— নীলজাইকে

@ ব্লুজায়েকে কোডটি সমস্ত রেডিও বোতামের ইনপুটগুলিতে চক্র করবে এবং যে কোনওটি objনির্বাচিত হোক না কেন তার বিরুদ্ধে সর্বশেষ রেডিও বোতামটির 'মান' সংরক্ষণ করবে । ইস্যুটি এখানে প্রদর্শিত হবে ('বিকল্প 1' চয়ন করুন) w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW

— শান

29

document.formsআপনার পৃষ্ঠায় ফর্মগুলির একটি অ্যারে থাকবে। আপনি যে নির্দিষ্ট ফর্মটি চান তা সন্ধান করতে আপনি এই ফর্মগুলির মধ্য দিয়ে লুপ করতে পারেন।

var form = false;
var length = document.forms.length;
for(var i = 0; i < length; i++) {
    if(form.id == "wanted_id") {
        form = document.forms[i];
    }
}

প্রতিটি ফর্ম একটি উপাদান অ্যারে থাকে যা আপনি তারপরে লুপ করতে পারেন আপনার পছন্দসই ডেটা সন্ধান করতে। আপনার নাম দ্বারা এগুলি অ্যাক্সেস করতে সক্ষম হওয়া উচিত

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);

— Codeacula
সূত্র

সংক্ষিপ্ত পদ্ধতিটি আগে উল্লেখ করা হয়নি কেন? = -D

— ক্লেসুন

2

@ আর্থারক্লেসুন আমি অনুমান করব এটি কারণ কারণ এক দশক আগে আমি উত্তরটি টাইপ করতে শুরু করেছি, ওপি আপডেট হয়নি, তাই বেশিরভাগ পরিস্থিতি পরিচালনা করতে আমি লুপ লিখেছিলাম। আমি মনে করি তখন আমি আইআই 7 এর সাথে ব্রাউজারের সামঞ্জস্যতাও নিশ্চিত করেছিলাম কারণ আমাদের কাছে আজকের চেয়ে আরও ভাল ল্যান্ডস্কেপটি ছিল না।

— কোডাকুলা

5

আমার 5 সেন্ট এখানে, form.elementsযা ব্যবহার করে আপনি প্রতিটি ক্ষেত্রকে কেবল এটিname পুনরাবৃত্তি দ্বারা নয়:

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;

— Klesun
সূত্র

2

অত্রুর ক্লেসুনের ধারণাটি প্রসারিত করা হচ্ছে ... আপনি যদি ফর্মটিতে পৌঁছানোর জন্য getElementById ব্যবহার করেন তবে আপনি কেবল এটির নাম দিয়ে এটি অ্যাক্সেস করতে পারবেন। এক লাইনে:

document.getElementById('form_id').elements['select_name'].value;

আমি রেডিও বোতামগুলির জন্য এটির মতো ব্যবহার করেছি এবং দুর্দান্ত কাজ করেছি। আমার ধারণা এখানে এটি একই রকম

— Rusca8
সূত্র

2

এটি https://stackoverflow.com/a/41262933/2464828 এর উন্নত উদাহরণ example

বিবেচনা

<form method="POST" enctype="multipart/form-data" onsubmit="return check(event)">
    <input name="formula">
</form>

ধরে নেওয়া যাক আমরা নামের ইনপুটটি পুনরুদ্ধার করতে চাই formula। এই ক্ষণস্থায়ী দ্বারা সম্পন্ন করা যাবে eventমধ্যে onsubmitক্ষেত্র। তারপরে আমরা অবজেক্টটি FormDataউল্লেখ করে এই সঠিক ফর্মটির মানগুলি পুনরুদ্ধার করতে ব্যবহার করতে পারি SubmitEvent।

const check = (e) => {
    const form = new FormData(e.target);
    const formula = form.get("formula");
    console.log(formula);
    return false
};

উপরের জাভাস্ক্রিপ্ট কোডটি কনসোলে ইনপুটটির মানটি মুদ্রণ করবে।

আপনি যদি মানগুলি পুনরাবৃত্তি করতে চান, অর্থাৎ সমস্ত মান পেতে চান তবে https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods দেখুন

— jhaavist
সূত্র

গ্রেট !. এটি আমার প্রয়োজন ঠিক তাই। ধন্যবাদ.

— ডাং কং ডুং

1

ভাল ডকুমেন্টেশন সহ বেশ কয়েকটি সহজেই ব্যবহারযোগ্য ফর্ম সিরিয়ালাইজার।

গিথুব তারার ক্রম অনুসারে,

— Atav32
সূত্র

তুমি কি ঠিক তার জন্য পুরো অ্যারের দরকার?

— নীলজাইকে

1

নীচের মত কোড পরিবর্তন করার চেষ্টা করুন:

<form
   onSubmit={e => {
     e.preventDefault();
     e.stopPropagation();

     const elements = Array.from(e.currentTarget) as HTMLInputElement[];

     const state = elements.reduce((acc, el) => {
       if (el.name) {
         acc[el.name] = el.value;
       }

       return acc;
     }, {});

     console.log(state); // {test: '123'}
   }}
>
   <input name='test' value='123' />
</form>

— Й Щирый
সূত্র

ধন্যবাদ, আপনার নিখুঁত কোড এবং আমার জন্য কাজ করে!

— LI HO TAN

0

কোনও লাইব্রেরি ছাড়াই কোনও ফর্মকে সিরিয়ালাইজ করার দ্রুত সমাধান

function serializeIt(form) {
  return (
    Array.apply(0, form.elements).map(x => 
      (
        (obj => 
          (
            x.type == "radio" ||
            x.type == "checkbox"
          ) ?
            x.checked ? 
              obj
            : 
              null
          :
            obj
        )(
          {
            [x.name]:x.value
          }
        )
      )
    ).filter(x => x)
  );
}

function whenSubmitted(e) {
  e.preventDefault()
  console.log(
    JSON.stringify(
      serializeIt(document.forms[0]),
      4, 4, 4
    )
  )
}

<form onsubmit="whenSubmitted(event)">
<input type=text name=hiThere value=nothing>
<input type=radio name=okRadioHere value=nothin>
<input type=radio name=okRadioHere1 value=nothinElse>
<input type=radio name=okRadioHere2 value=nothinStill>

<input type=checkbox name=justAcheckBox value=checkin>
<input type=checkbox name=justAcheckBox1 value=checkin1>
<input type=checkbox name=justAcheckBox2 value=checkin2>

<select name=selectingSomething>
<option value="hiThere">Hi</option>
<option value="hiThere1">Hi1</option>
<option value="hiThere2">Hi2</option>
<option value="hiThere3">Hi3</option>
</select>
<input type=submit value="click me!" name=subd>
</form>

স্নিপেট প্রসারিত করুন

— bluejayke
সূত্র

-1

<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;

— Randhawa
সূত্র