หยุดการส่งฟิลด์อินพุตในแบบฟอร์ม

114

ฉันกำลังเขียนจาวาสคริปต์ (greasemonkey / userscript) ที่จะแทรกช่องป้อนข้อมูลบางช่องลงในแบบฟอร์มบนเว็บไซต์

สิ่งนี้คือฉันไม่ต้องการให้ช่องป้อนข้อมูลเหล่านั้นมีผลกับแบบฟอร์ม แต่อย่างใดฉันไม่ต้องการให้ส่งเมื่อแบบฟอร์มถูกส่งฉันต้องการให้จาวาสคริปต์ของฉันเข้าถึงค่าของพวกเขาเท่านั้น

มีวิธีใดบ้างที่ฉันสามารถเพิ่มช่องป้อนข้อมูลลงในตรงกลางของฟอร์มและไม่ได้ส่งเมื่อส่งแบบฟอร์ม

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

— ลูกโอ๊ก
แหล่งที่มา

2

จะเกิดปัญหาอะไรหากส่งไป คุณสามารถเลือกฟิลด์ที่จะประมวลผลในภาษาฝั่งเซิร์ฟเวอร์

— Sarfraz

6

ฉันไม่เชื่อว่าองค์ประกอบแบบฟอร์มที่ไม่ได้ตั้งชื่อจะปรากฏขึ้นเมื่อมีการส่งแบบฟอร์ม - หากคุณสามารถเขียน JS ของคุณเพื่ออ้างถึงโดยใช้ ID คุณสามารถปล่อยให้ชื่อว่างเปล่าเพื่อป้องกันไม่ให้ส่งแบบฟอร์มได้อย่างมีประสิทธิภาพ

— gddc

2

เว้นช่องแอตทริบิวต์ name ว่างไว้

— deostroll

@Sarfraz Ahmed: ฉันกำลังเขียนสคริปต์ greasemonkey ดังนั้นฉันจึงไม่สามารถควบคุมเว็บไซต์ได้

— Acorn

11

ตาม w3: รวมอยู่ในการส่งแบบฟอร์ม ต้องกำหนดฟิลด์ (องค์ประกอบฟอร์ม) ภายในองค์ประกอบฟอร์มและต้องมีแอตทริบิวต์ชื่อ องค์ประกอบที่ไม่มีชื่อหรือไม่มีอยู่ในแบบฟอร์มจะไม่ถูกส่งไปยังเซิร์ฟเวอร์

— kennebec

159

คุณสามารถแทรกช่องป้อนข้อมูลโดยไม่มีแอตทริบิวต์ "name":

<input type="text" id="in-between" />

หรือคุณสามารถลบออกได้เมื่อส่งแบบฟอร์มแล้ว (ในjQuery):

$("form").submit(function() {
   $(this).children('#in-between').remove();
});

— สาว
แหล่งที่มา

7

การละเว้นชื่อจะทำให้ไม่สามารถส่งชื่อได้? เจ๋งฉันไม่รู้เรื่องนั้น สิ่งนี้ใช้ได้กับทุกเบราว์เซอร์หรือไม่ เป็นส่วนหนึ่งของมาตรฐานหรือเป็นมุมมองของการนำไปใช้งาน?

— BlairHippo

2

@Acorn ฉันไม่แน่ใจทั้งหมด แต่มันก็คุ้มค่าที่จะอ่าน โดยพื้นฐานแล้วหากคุณละเว้นค่าแอตทริบิวต์ "name" คุณจะไม่สามารถเข้าถึงค่านั้นด้วยวิธีการใด ๆ ... ดังนั้นอาจเป็นไปได้ว่าค่านั้นถูกทิ้งโดยเบราว์เซอร์ หากเป็นหัวใจสำคัญที่จะปลอดภัยสำหรับคุณให้ไปที่ตัวเลือก jquery / javascript (โปรดทราบว่าจะมีการส่งฟิลด์เมื่อ javascript ถูกปิดใช้งานได้อย่างง่ายดายดังนั้นอย่าพึ่งพากลไกความปลอดภัยใด ๆ ของคุณ)

— Gal

17

ฉันทดสอบโดยทิ้งแอตทริบิวต์ชื่อด้วย chrome, firefox, safari และดูเหมือนว่าช่องแบบฟอร์มจะถูกส่งไปยังเซิร์ฟเวอร์พร้อมกับสตริงว่างสำหรับชื่อ ฉันตรวจสอบข้อมูลโพสต์โดยใช้ WebScarab และพบว่ากำลังส่งข้อมูล ตอนนี้ฉันเดาว่าฉันจะต้องปิดการใช้งานฟิลด์เพื่อป้องกันไม่ให้ถูกส่ง

— kldavis4

1

@ kldavis4 - ดูเหมือนว่าทั้ง stripe (stripe.js) และ Braintree (braintree.js) [link] braintreepayments.com/docs/python/guide/getting_paid ใช้แนวคิดแอตทริบิวต์ "ออกจากชื่อ" เพื่อหยุดข้อมูลที่กระทบเซิร์ฟเวอร์ จึงช่วยลดความจำเป็นในการปฏิบัติตาม "PCI" ... ถ้าคุณบอกว่า "ข้อมูล" ถูกส่งไปนั้นผิดพลาดหรือไม่?

— Rahul Dighe

4

ข้อมูลในฟอร์มจะยังคงถ่ายโอนหรือไม่หากแท็กอินพุตไม่มีชื่อ

— Kevin Wheeler

57

สิ่งที่ง่ายที่สุดคือการแทรกองค์ประกอบที่มีdisabledแอตทริบิวต์

<input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />

ด้วยวิธีนี้คุณยังสามารถเข้าถึงได้ในฐานะลูกของแบบฟอร์ม

ช่องที่ปิดใช้งานมีข้อเสียที่ผู้ใช้ไม่สามารถโต้ตอบได้เลยดังนั้นหากคุณมีช่องdisabledข้อความผู้ใช้จะไม่สามารถเลือกข้อความได้ หากคุณมีdisabledช่องทำเครื่องหมายผู้ใช้จะไม่สามารถเปลี่ยนสถานะได้

คุณยังสามารถเขียนจาวาสคริปต์เพื่อเริ่มการส่งแบบฟอร์มเพื่อลบฟิลด์ที่คุณไม่ต้องการส่ง

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

แนวคิดคือเพื่อให้ช่องที่แทรกของฉันสามารถใช้งานได้เพื่อให้ผู้ใช้สามารถเปลี่ยนช่องทำเครื่องหมายและอื่น ๆ จากนั้นส่งไปที่จาวาสคริปต์ของฉัน

— Acorn

3

ปิดใช้งานยังคงสามารถใช้งานได้หากคุณปิดใช้งานเฉพาะฟิลด์ในการส่งหรือตามช่องทำเครื่องหมายที่เลือก ด้วยวิธีนี้คุณไม่เพียง แต่ทิ้งnameทรัพย์สินซึ่งคุณอาจต้องการยึดไว้หากคุณต้องการใช้ในภายหลัง

— JMTyler

วิธีนี้ดีมากเมื่อคุณต้องส่งแบบฟอร์มโดยใช้ AJAX และไม่ต้องการลบอินพุตของคุณออกจากแบบฟอร์มหรือลบnameแอตทริบิวต์

— Nolonar

15

ลองเอาออกง่ายๆ แอตทริบิวต์ชื่อจากองค์ประกอบอินพุตง่ายๆ
ดังนั้นจึงต้องมีลักษณะดังนี้

<input type="checkbox" checked="" id="class_box_2" value="2">

— Lesha Pipiev
แหล่งที่มา

นี่น่าจะเป็นคำตอบ :))

— Máxima Alekz

1

ใช้ได้กับช่องทำเครื่องหมาย อย่างไรก็ตามโปรดทราบว่าสิ่งนี้จะทำลายการยกเลิกการเลือกปุ่มตัวเลือกอื่น ๆ โดยอัตโนมัติเมื่อใช้กับปุ่มตัวเลือก

— 60

10

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

<input form="fakeForm" type="text" readonly value="random value" />

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

1

ในขณะนี้อาจใช้งานได้ (ยังไม่ได้ทดสอบ) เว้นแต่คุณจะกำหนดfakeFormที่อื่น (ไม่จำเป็นต้องส่ง) ผลลัพธ์นี้เป็น HTML ที่ไม่ถูกต้อง

— Brian H.

1

หากคุณไม่ต้องการเพิ่มจาวาสคริปต์และคุณต้องการอินพุตภายในแบบฟอร์มที่มีการโต้ตอบกับผู้ใช้ นี่เป็นวิธีแก้ปัญหาที่ง่ายที่สุดจากมุมมองของฉัน

— yannisalexiou

1

หมายเหตุ: การแก้ปัญหานี้ไม่ได้ทำงานกับ IE ตรวจสอบที่นี่

— Harvey

@ ฮาร์วีย์เอ้ย! ขอบคุณสำหรับหัวขึ้น!

— Joshua Pinter

9

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

นี่คือตัวอย่างสั้น ๆ ที่ยังไม่ทดลอง:

var noSubmitElements = [ 'someFormElementID1', 'someFormElementID2' ]; //...
function submitForm() {
    for( var i = 0, j = noSubmitElements.length; i < j; i++ ) {
        document.getElementById(noSubmitElements[i]).removeAttribute('name');
    }
}
form.onsubmit = submitForm;

— Jacob Relkin
แหล่งที่มา

2

ฉันรู้ว่าโพสต์นี้โบราณ แต่ฉันจะตอบกลับ วิธีที่ง่ายที่สุด / ดีที่สุดที่ฉันพบคือเพียงแค่ตั้งชื่อให้ว่างเปล่า

ใส่สิ่งนี้ก่อนส่ง:

document.getElementById("TheInputsIdHere").name = "";

ทั้งหมดในฟังก์ชันการส่งของคุณอาจมีลักษณะดังนี้:

document.getElementById("TheInputsIdHere").name = "";
document.getElementById("TheFormsIdHere").submit();

การดำเนินการนี้จะยังคงส่งแบบฟอร์มพร้อมช่องอื่น ๆ ทั้งหมดของคุณ แต่จะไม่ส่งแบบฟอร์มที่ไม่มีชื่อ

— จะ
แหล่งที่มา

เรียบง่ายและตรงไปตรงมา ฉันชอบมัน!

— pbarney

2

เพิ่มdisabled = "disabled"ในอินพุตและในขณะที่ jquery ลบแอตทริบิวต์ที่ปิดใช้งานเมื่อคุณต้องการส่งโดยใช้. removeAttr ('disabled')

HTML:

<input type="hidden" name="test" value="test" disabled='disabled'/>

jQuery:

$("input[name='test']").removeAttr('disabled');

— ปิกกะพิกกะ
แหล่งที่มา

2

คำตอบทั้งหมดข้างต้นได้กล่าวไว้แล้วทุกอย่างเกี่ยวกับ (ไม่) การตั้งชื่อตัวควบคุมฟอร์มหรือการลบออกโดยใช้โปรแกรมก่อนที่จะส่งแบบฟอร์มของคุณจริง

แม้ว่าจากการวิจัยของฉันฉันพบวิธีแก้ปัญหาอื่นที่ฉันไม่ได้กล่าวถึงในโพสต์นี้:
หากคุณห่อหุ้มการควบคุมแบบฟอร์มที่คุณต้องการไม่ประมวลผล / ไม่ส่งภายใน<form>แท็กอื่นที่ไม่มีmethodแอตทริบิวต์หรือpath(และเห็นได้ชัดว่าไม่มีการควบคุมประเภทการส่ง เช่นปุ่มหรือส่งอินพุตที่ซ้อนอยู่) จากนั้นการส่งแบบฟอร์มหลักจะไม่รวมการควบคุมฟอร์มที่ห่อหุ้มเหล่านั้น

<form method="POST" path="/path">
  <input type="text" name="sent" value="..." />
  <form>
    <input type="text" name="notSent" value="..." />
  </form>
  <input type="submit" name="submit" value="Submit" />
</form>

ค่าควบคุม [name = "notSent"] จะไม่ถูกประมวลผลหรือส่งไปยังเซิร์ฟเวอร์ POST endpoint แต่ค่าจาก [name = "sent"] จะ

วิธีแก้ปัญหานี้อาจจะเป็นเรื่องเล็ก ๆ น้อย ๆ แต่ฉันยังคงทิ้งไว้ให้ลูกหลาน ...

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

ข้อสังเกตที่น่าสนใจ แต่คุณได้ทดสอบสิ่งนี้ในเบราว์เซอร์ต่างๆหรือไม่? ฉันสงสัยว่ามันเป็นเพราะการออกแบบตามข้อกำหนดหรือแค่พฤติกรรมของเบราว์เซอร์ จะเป็นวิธีการที่เชื่อถือได้ในอนาคตเมื่อเบราว์เซอร์เปลี่ยนไปหรือไม่?

— scipilot

1

จัดการการส่งแบบฟอร์มในฟังก์ชันผ่าน onSubmit () และดำเนินการด้านล่างเพื่อลบองค์ประกอบฟอร์ม: การใช้getElementById()DOM จากนั้นใช้[object].parentNode.removeChild([object])

สมมติว่าฟิลด์ของคุณมีปัญหามีรหัสแอตทริบิวต์ "my_removable_field":

var remEl = document.getElementById("my_removable_field");
if ( remEl.parentNode && remEl.parentNode.removeChild ) {
remEl.parentNode.removeChild(remEl);
}

สิ่งนี้จะทำให้คุณได้รับสิ่งที่คุณกำลังมองหา

— ผู้ถือแหวน
แหล่งที่มา

0

คุณต้องการให้มันเป็นองค์ประกอบอินพุตตั้งแต่แรกหรือไม่? คุณสามารถใช้ Javascript เพื่อสร้าง div หรือย่อหน้าหรือรายการแบบไดนามิกหรืออะไรก็ได้ที่มีข้อมูลที่คุณต้องการนำเสนอ

แต่ถ้าองค์ประกอบแบบโต้ตอบมีความสำคัญและเป็นเรื่องยากที่จะวางองค์ประกอบเหล่านั้นไว้นอก<form>บล็อกก็ควรจะเป็นไปได้ที่จะลบองค์ประกอบเหล่านั้นออกจากแบบฟอร์มเมื่อมีการส่งหน้าเว็บ

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

ใช่ฉันต้องการให้เป็นองค์ประกอบอินพุตเพราะฉันกำลังพยายามรับข้อมูลจากผู้ใช้

— Acorn

0

$('#serialize').click(function () {
  $('#out').text(
    $('form').serialize()
  );
});

$('#exclude').change(function () {
  if ($(this).is(':checked')) {
    $('[name=age]').attr('form', 'fake-form-id');
  } else {
    $('[name=age]').removeAttr('form');    
  }
  
  $('#serialize').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/">
  <input type="text" value="John" name="name">
  <input type="number" value="100" name="age">
</form>

<input type="button" value="serialize" id="serialize">
<label for="exclude">  
  <input type="checkbox" value="exclude age" id="exclude">
  exlude age
</label>

<pre id="out"></pre>

ขยายข้อมูลโค้ด

— Denis Lukyanov
แหล่งที่มา

น่าเสียดายที่แอตทริบิวต์แบบฟอร์มใช้ไม่ได้ใน IE / Edge caniuse.com/#search=form%20attribute

— George Helyar

0

คุณต้องเพิ่ม onsubmit ในแบบฟอร์มของคุณ:

<form action="YOUR_URL" method="post" accept-charset="utf-8" onsubmit="return validateRegisterForm();">

และสคริปต์จะเป็นดังนี้:

        function validateRegisterForm(){
        if(SOMETHING IS WRONG)
        { 
            alert("validation failed");
            event.preventDefault();
            return false;

        }else{
            alert("validations passed");
            return true;
        }
    }

สิ่งนี้ใช้ได้กับฉันทุกครั้ง :)

— วาสิลกะคิสอนาสตาซิออส
แหล่งที่มา