양식의 입력 필드가 제출되지 않도록 중지

웹 사이트의 양식에 일부 입력 필드를 삽입하는 자바 스크립트 (greasemonkey / userscript)를 작성 중입니다.

문제는 이러한 입력 필드가 어떤 식 으로든 양식에 영향을 미치고 양식이 제출 될 때 제출되는 것을 원하지 않으며 내 자바 스크립트가 해당 값에 액세스 할 수 있기를 원한다는 것입니다.

양식 중간에 일부 입력 필드를 추가하고 양식을 제출할 때 제출하지 않을 수있는 방법이 있습니까?

분명히 이상적인 것은 입력 필드가 양식 요소에 있지 않는 것이지만 결과 페이지의 레이아웃에서 삽입 된 입력 필드가 원래 양식의 요소 사이에 나타나기를 원합니다.

"name"속성없이 입력 필드를 삽입 할 수 있습니다.

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

또는 양식이 제출되면 (에서 jQuery) 간단히 제거 할 수 있습니다 .

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

가장 쉬운 방법은 disabled속성이 있는 요소를 삽입하는 것 입니다.

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

이렇게하면 양식의 하위로 계속 액세스 할 수 있습니다.

비활성화 된 필드는 사용자가 필드와 전혀 상호 작용할 수 없다는 단점이 있습니다. 따라서 disabled텍스트 필드 가있는 경우 사용자가 텍스트를 선택할 수 없습니다. disabled확인란 이있는 경우 사용자는 상태를 변경할 수 없습니다.

제출하지 않으려는 필드를 제거하기 위해 양식 제출시 실행되는 자바 스크립트를 작성할 수도 있습니다.

입력 요소에서 이름 속성 을 제거해보십시오 .
그래서 그것은

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

추가 옵션을 추가하고 싶었습니다. 입력에 양식 태그를 추가하고 페이지에 존재하지 않는 양식의 이름을 지정하십시오.

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

양식 제출에 포함하지 않으려는 모든 입력 필드에서 속성 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;

이 게시물이 오래된 것임을 알고 있지만 어쨌든 답장을 드리겠습니다. 내가 찾은 가장 쉽고 / 가장 좋은 방법은 단순히 이름을 공백으로 설정하는 것입니다.

제출하기 전에 다음을 입력하십시오.

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

모든 제출 기능은 다음과 같습니다.

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

이렇게하면 다른 모든 필드와 함께 양식이 제출되지만 이름이없는 필드는 제출되지 않습니다.

입력에 disabled = "disabled" 를 추가 하고 jquery는 .removeAttr ( 'disabled')를 사용하여 제출하려는 경우 비활성화 된 속성을 제거합니다.

HTML :

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

jquery :

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

위의 모든 답변은 양식 컨트롤의 이름을 지정하거나 실제로 양식을 제출하기 전에 프로그래밍 방식으로 제거하는 것에 대한 모든 것을 이미 언급했습니다.

내 연구를 통해이 게시물에서 언급하지 않은 다른 솔루션을 찾았지만
처리되지 않거나 보내지 않으려는 양식 컨트롤을 캡슐화하면 속성 <form>이없는 또 다른 태그 안에 (그리고 분명히 제출 유형 컨트롤이 없습니다) 버튼이나 그 안에 중첩 된 입력 제출)과 같은 경우 상위 양식을 제출하면 캡슐화 된 양식 컨트롤이 포함되지 않습니다.methodpath

<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 끝점으로 전송되지 않지만 [name = "sent"]의 값은 처리됩니다.

이 솔루션은 일 화일 수 있지만 여전히 후손을 위해 남겨두고 있습니다 ...

onSubmit ()을 통해 함수에서 양식의 제출을 ​​처리하고 다음과 같은 작업을 수행하여 양식 요소를 제거하십시오 getElementById(). DOM 사용, 다음 사용[object].parentNode.removeChild([object])

문제의 필드에 id 속성 "my_removable_field"코드가 있다고 가정합니다.

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

이것은 당신이 찾고있는 것을 정확하게 얻을 것입니다.

애초에 입력 요소로 필요합니까? Javascript를 사용하여 div, 단락 또는 목록 항목 또는 표시하려는 정보가 포함 된 모든 항목을 동적으로 만들 수 있습니다.

그러나 인터랙티브 요소가 중요하고 이러한 요소를 <form>블록 외부에 배치하는 것이 골칫거리 인 경우 페이지가 제출 될 때 양식에서 해당 요소를 제거 할 수 있어야합니다.

양식에 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;
        }
    }

이것은 매번 나를 위해 작동합니다 :)