JavaScript - รับค่ารูปแบบ HTML

112

ฉันจะรับค่าของรูปแบบ HTML เพื่อส่งผ่านไปยัง JavaScript ได้อย่างไร

ถูกต้องหรือไม่ สคริปต์ของฉันรับสองอาร์กิวเมนต์หนึ่งจากกล่องข้อความหนึ่งจากกล่องแบบเลื่อนลง

<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

— ผู้ใช้ 377419
แหล่งที่มา

2

"ค่าของฟอร์มในโค้ด HTML" หมายความว่าอย่างไร

— Pekka

7

คำถามค่อนข้างชัดเจน

— laurentngu

1

@laurentngu คำถามคือเขาไม่ได้หมายความว่า "ค่าของรูปแบบ HTML ไป" หมายถึงค่าหนึ่งของค่าจำนวนมากหรือไม่ที่เขาหมายถึง " ค่าของรูปแบบ HTML ทั้งหมด" หมายถึงค่าทั้งหมดในหนึ่งใหญ่ "ต่อเนื่อง "value

— bluejayke

คำถามนั้นชัดเจน ... แต่เห็นได้ชัดว่ามันไม่สมเหตุสมผลเลยที่จะส่งผ่านค่าของฟอร์ม

— Matthew

113

HTML:

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

JS:

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

— ผู้ใช้ 406632
แหล่งที่มา

7

@ shorty876: คุณทดสอบด้วยตัวเองหรือไม่? o_0 นั่นเป็นวิธีที่ดีในการพิจารณาว่าคุณทำถูกต้องหรือไม่

— Jeff Rupert

1

ใช่ แต่มันส่งคืนจริง / เท็จและฉันไม่แน่ใจว่าจะตรวจสอบได้อย่างไรว่าฟังก์ชันถูกเรียกใช้หรือไม่ ดังนั้นคุณสามารถช่วย

— user377419

ฉันได้ลองใช้แล้ว แต่nameValueเป็นค่าเริ่มต้นไม่ใช่ค่าที่ผู้ใช้ป้อน

— James T.

ทำไม name = "name" และถ้าไม่มี ID เลยจะเป็นอย่างไร

— bluejayke

65

หากคุณต้องการดึงค่าฟอร์ม (เช่นค่าที่จะส่งโดยใช้ HTTP POST) คุณสามารถใช้:

JavaScript

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

form-serialize ( https://code.google.com/archive/p/form-serialize/ )

serialize(document.forms[0]);

jQuery

$("form").serializeArray()

— เควินฟาร์รูเกีย
แหล่งที่มา

12

ตัวอย่างแรกของคุณFormDataเองไม่ได้ทำอะไรเลย .. คุณยังต้องได้รับค่าจากแบบฟอร์ม

— putvande

1

ฉันเชื่อว่าไม่ถูกต้อง หากเมื่อเริ่มต้น FormData คุณระบุองค์ประกอบฟอร์มก็จะดึงค่าได้อย่างถูกต้อง codepen.io/kevinfarrugia/pen/Wommgd

— Kevin Farrugia

2

วัตถุ FormData ไม่ใช่ค่าตัวเอง คุณยังคงต้องโทรและวนซ้ำFormData.entries()เพื่อดึงค่า นอกจากนี้FormData.entries()ยังไม่มีใน Safari, Explorer หรือ Edge developer.mozilla.org/en-US/docs/Web/API/FormData

— dave

1

ที่ถูกต้องในเรื่องที่เกี่ยวกับความเข้ากันได้เบราว์เซอร์ แต่มีpolyfills เกี่ยวกับการวนซ้ำformData.entries()ขึ้นอยู่กับสิ่งที่คุณกำลังมองหา หากคุณกำลังมองหาค่าของฟิลด์เดียวที่คุณสามารถformData.get(name)ใช้ได้ อ้างอิง: get () .

— Kevin Farrugia

ใช่ฉันไม่สามารถแสดงFormDataผลอะไรบน Chrome ได้

— 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);
}

การสาธิตสามารถพบได้ที่นี่

— Tran Nguyen Nhat Thuy
แหล่งที่มา

12

เพียงแค่คำเตือนหากใครต้องการรับค่าอินพุตประเภทอื่นที่เลือกไว้เช่นปุ่มตัวเลือกหรือช่องทำเครื่องหมายสิ่งนี้จะไม่ทำตามที่คุณต้องการ

— ฌอน

ฉันต้องเปลี่ยนvar obj = {};เป็นvar obj = [];.

— Daniel Williams

@ ฌอนทำไมปุ่มตัวเลือกถึงใช้ไม่ได้ พวกเขาปรากฏภายใต้คุณสมบัติขององค์ประกอบด้วย

— bluejayke

@bluejayke รหัสจะวนผ่านอินพุตปุ่มตัวเลือกทั้งหมดและจะบันทึก 'ค่า' ของปุ่มตัวเลือก LAST ไว้objไม่ว่าจะเลือกปุ่มใดก็ตาม ปัญหานี้แสดงให้เห็นที่นี่ (เลือก 'ตัวเลือกที่ 1') w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW

— Sean

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

— Klesun

2

@ArturKlesun ฉันเดาว่าเป็นเพราะเมื่อทศวรรษที่แล้วฉันเริ่มพิมพ์คำตอบ OP ยังไม่อัปเดตดังนั้นฉันจึงเขียน for loop เพื่อจัดการกับสถานการณ์ส่วนใหญ่ ฉันคิดย้อนกลับไปตอนนั้นฉันก็มั่นใจว่าเบราว์เซอร์เข้ากันได้กับ IE7 เพราะเราไม่มีภูมิทัศน์ที่ดีกว่าที่เรามีในปัจจุบัน

— Codeacula

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;

ฉันใช้มันสำหรับปุ่มวิทยุและใช้งานได้ดี ฉันเดาว่ามันเหมือนกันที่นี่

— รุสก้า 8
แหล่งที่มา

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

จากนั้นโค้ด JavaScript ด้านบนจะพิมพ์ค่าของอินพุตไปยังคอนโซล

หากคุณต้องการวนซ้ำค่าเช่นรับค่าทั้งหมดจากนั้นดูhttps://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

— jhaavist
แหล่งที่มา

เยี่ยมมาก!. นี่คือสิ่งที่ฉันต้องการ ขอบคุณ.

— Dang Cong Duong

1

Serializers รูปแบบที่ใช้งานง่ายหลายตัวพร้อมเอกสารประกอบที่ดี

ตามลำดับดาว Github

— Atav32
แหล่งที่มา

คุณต้องการอาร์เรย์ทั้งหมดสำหรับสิ่งนั้นจริงๆหรือ

— bluejayke

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
แหล่งที่มา