जावास्क्रिप्ट - HTML फॉर्म वैल्यू प्राप्त करना

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

प्रश्न बिलकुल स्पष्ट है

— laurentngu

1

@laurentngu सवाल वह "एक मूल्य मतलब है है की एक HTML फ़ॉर्म", बाहर एक मूल्य जिसका अर्थ है की कई मूल्यों, या वह "का क्या मतलब है मूल्य संपूर्ण HTML प्रपत्र के", एक बड़ा में सभी मान जिसका अर्थ है 'धारावाहिक "मूल्य

— नीलाजेक

सवाल स्पष्ट है ... लेकिन स्पष्ट रूप से यह बहुत मायने नहीं रखता है कि किसी फॉर्म का मूल्य क्या है।

— मैथ्यू

112

HTML:

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

जे एस:

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

— user406632
स्रोत

7

@ shorty876: क्या आपने स्वयं इसका परीक्षण किया? o_0 यह निर्धारित करने का एक अच्छा तरीका होगा कि आपने इसे सही किया है या नहीं।

— जेफ रूपर्ट

1

हाँ, लेकिन यह सिर्फ एक सही / गलत रिटर्न देता है और यह सुनिश्चित नहीं करता है कि यह निर्धारित कैसे किया जाए कि फ़ंक्शन को भी बुलाया गया था। इस प्रकार आप मदद कर सकते हैं।

— user377419

मैंने इसे आज़माया, लेकिन nameValueडिफ़ॉल्ट मान है और उपयोगकर्ता द्वारा दर्ज नहीं किया गया है।

— जेम्स टी।

क्यों नाम = "नाम", और क्या होगा अगर इसमें एक आईडी नहीं है?

— bluejayke

65

यदि आप प्रपत्र मानों को पुनः प्राप्त करना चाहते हैं (जैसे कि जिन्हें एक HTTP POST का उपयोग करके भेजा जाएगा) आप उपयोग कर सकते हैं:

जावास्क्रिप्ट

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

मेरा मानना है कि यह गलत है। यदि फॉर्मडैट को इनिशियलाइज़ करते समय आप एक फॉर्म एलिमेंट निर्दिष्ट करते हैं, तो यह मानों को सही तरीके से पुनः प्राप्त करेगा। codepen.io/kevinfarrugia/pen/Wommgd

— केविन

2

हालाँकि फॉर्मडैट ऑब्जेक्ट स्वयं मान नहीं है। FormData.entries()मूल्यों को पुनः प्राप्त करने के लिए आपको अभी भी कॉल और पुनरावृति करना होगा। इसके अतिरिक्त, FormData.entries()सफारी, एक्सप्लोरर या एज में उपलब्ध नहीं है। developer.mozilla.org/en-US/docs/Web/API/FormData

— डेव

1

ब्राउज़र संगतता के संबंध में सही, हालांकि पॉलीफिल हैं । के माध्यम से पुनरावृत्ति के बारे में formData.entries(), यह निर्भर करता है कि आप क्या देख रहे हैं। यदि आप किसी एक क्षेत्र के मूल्य की तलाश कर रहे हैं जो आप उपयोग कर सकते हैं formData.get(name)। संदर्भ: प्राप्त () ।

— केविन फर्रुगिया

हाँ, मुझे FormDataक्रोम पर कुछ भी आउटपुट नहीं मिल सकता है ।

— Atav32

33

यहाँ W3Schools से एक उदाहरण है:

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 = [];।

— डैनियल विलियम्स

@ सीन क्यों रेडियो बटनों के लिए काम नहीं करेगा? वे तत्वों की संपत्ति के तहत भी दिखाई देते हैं

— ब्लूजेक

@bluejayke कोड सभी रेडियो बटन इनपुट के माध्यम से चक्र करेगा, और इसके विपरीत LAST रेडियो बटन के 'मान' को बचाएगा 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
स्रोत

छोटी विधि का उल्लेख पहले क्यों नहीं किया गया? = -डी

— क्लेसुन

2

@ArturKlesun मुझे लगता है कि यह इसलिए होगा क्योंकि एक दशक पहले जब मैंने जवाब लिखना शुरू किया था, तो ओपी ने अपडेट नहीं किया था, इसलिए मैंने ज्यादातर स्थितियों को संभालने के लिए लूप के लिए लिखा था। मुझे लगता है कि तब मैं IE7 के साथ ब्राउज़र संगतता सुनिश्चित कर रहा था क्योंकि हमारे पास आज बेहतर परिदृश्य नहीं था।

— कोडियाक्युला

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

Atrur Klesun के विचार पर विस्तार करते हुए ... यदि आप फ़ॉर्म तक पहुंचने के लिए getElementById का उपयोग करते हैं, तो आप इसे इसके नाम से एक्सेस कर सकते हैं। एक पंक्ति में:

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

मैंने इसे रेडियो बटनों के लिए इस्तेमाल किया और ठीक काम किया। मुझे लगता है कि यहाँ भी ऐसा ही है।

— Rusca8
स्रोत

2

यह https://stackoverflow.com/a/41262933/2464828 का विकसित उदाहरण है

विचार करें

<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;

— रंधावा
स्रोत