자바 스크립트를 사용하여 양식을 제출하는 방법은 무엇입니까?

190

theForm내부에 제출 버튼이있는 다음과 같은 div 가있는 양식이 있습니다.

<div id="placeOrder" 
     style="text-align: right; width: 100%; background-color: white;">
    <button type="submit" 
            class='input_submit' 
            style="margin-right: 15px;" 
            onClick="placeOrder()">Place Order
    </button>
</div>

클릭하면 함수 placeOrder()가 호출됩니다. 이 함수는 위의 div의 innerHTML을 "processing ..."으로 변경합니다 (따라서 제출 버튼이 사라짐).

위의 코드는 작동하지만 문제는 양식을 제출할 수 없다는 것입니다! 이것을 placeOrder()함수 에 넣으려고했습니다 .

document.theForm.submit();

그러나 그것은 작동하지 않습니다.

양식을 제출하려면 어떻게해야합니까?

javascript

— 네이트
소스

3

<form>귀하의 페이지에 태그 가 있다고 생각합니다 .

— Justin808

코드에 <form>이 없습니다.

— dotoree

1

의미하는 바 :이 함수는 위의 div의 innerHTML을 "processing ..."으로 변경합니다 (따라서 제출 버튼이 사라짐). 그 논리를 공유하고 싶습니까? 그런데 제출 버튼 (name = submit 아래에 위치)이 있으면 theform.submit () 함수가 작동하지 않습니다. 코드에서와 같이 <form> 태그를 추가하여 질문을 명확히하십시오. jsfiddle.net

— sakhunzai을

5

... 제출 버튼이 있다면 (name = submit 아래에 위치) ... 이것은 내 문제를 해결했습니다! <input type = "button"name = "submit"...이지만 여전히 자바 스크립트가 양식을 보내지 못하도록 차단합니다.

— Nikolay Ivanov

136

name양식 의 속성을로 설정하면 "theForm"코드가 작동합니다.

— 앤드류 헤어
소스

14

이것은 일부에게는 명백한 것처럼 보이지만 이름과 ID가 "submit"인 버튼이 document.theForm.submit()있고 오류를보고했습니다. 버튼의 이름을 바꾸면 코드가 완벽하게 작동했습니다.

— Jonathan

1

@Jonathan 당신이 가진 버튼의 이름은 무엇입니까? Coz, api.jquery.com/submit 양식의 하위 요소는 양식의 속성과 충돌하는 입력 이름이나 ID를 사용해서는 안됩니다.

— keya

106

당신이 사용할 수있는...

document.getElementById('theForm').submit();

...을 교체 하지 마십시오innerHTML . 당신은 양식을 숨기고 다음 삽입 할 수 처리 ... span 것이다 표시 그 자리에 있습니다.

var form = document.getElementById('theForm');

form.style.display = 'none';

var processing = document.createElement('span');

processing.appendChild(document.createTextNode('processing ...'));

form.parentNode.insertBefore(processing, form);

— 알렉스
소스

양식을 어디로 보내야하는지 어떻게 알 수 있습니까? 예를 들어, 제 경우에는 콘텐츠를 저에게 이메일로

— 보내고

@Imray 아마 당신을 위해 서버 측 코드를 원할 것이다.

— alex

@CodyBugstein action="/{controller}/{action-method}" method="post"은 게시하려는 양식의 속성을 설정 합니다.

— barnes

2

내 양식 이름이 printoffersForm이므로 id는 동일합니다. document.getElementById('printoffersForm').submit();하지만 오류 제출 기능이 아닙니다

— Madhuri Patel

@MadhuriPatel 제출 버튼에도 제출이라는 이름을 지정할 수 있습니까? 답변 참조 stackoverflow.com/questions/833032/…

— rbassett

37

내 경우에는 완벽하게 작동합니다.

document.getElementById("form1").submit();

또한 다음과 같은 기능으로 사용할 수 있습니다.

function formSubmit()
{
     document.getElementById("form1").submit();
}

— 친탄 툼 마르
소스

input태그 에서 양식 값을 제출 합니까?

— simanacci

@roy 예, 입력 태그에서 양식 값을 제출합니다.

— Chintan Thummar 2016 년

2

@ChintanThummar 한 다음 처리 할 수있는 양식 제출 . document.getElementById를 사용 ( "유치원 1") onsubmit = 함수 () {// 당신은 페이지 새로 고침없이 양식 // 제출 여기 아약스 코드를 사용할 수 있습니다}

— 하기 Shubham 쿠마

나는 그것을 시도하지 않았지만 내가 제공 한 것보다 타박 한 것처럼 보입니다. 감사합니다;)

— Chintan Thummar 2016 년

12

document.forms["name of your form"].submit();

또는

document.getElementById("form id").submit();

이 중 하나를 시도해 볼 수 있습니다.

— 아루나
소스

5

오래된 게시물이지만 양식 name내부에 태그 를 사용하지 않고 양식을 제출하는 방식을 그대로 둡니다 .

HTML

<button type="submit" onClick="placeOrder(this.form)">Place Order</button>

JS

function placeOrder(form){
    form.submit();
}

이 솔루션이 다른 사람을 도울 수 있기를 바랍니다. TQ

— 스카이 클래 셔
소스

4

HTML

<!-- change id attribute to name  -->

<form method="post" action="yourUrl" name="theForm">
    <button onclick="placeOrder()">Place Order</button>
</form>

자바 스크립트

function placeOrder () {
    document.theForm.submit()
}

— 찬단 굽타
소스

4

답변에 설명을 추가하십시오.

— Sampada

이것은 이미 주어진 답변의 질을 향상시키지 않습니다.

— 랜디

양식 정의에 대한 실제 html로 양식 이름을 표시하는 유일한 대답입니다. 또한 간단하고 간단합니다.

— 팀 버드

2

양식에 ID가 없지만 theForm과 같은 클래스 이름이있는 경우 아래 명령문을 사용하여 제출할 수 있습니다.

document.getElementsByClassName("theForm")[0].submit();

— 비말 자
소스

위의 클래스 이름이 같은 양식이 더 있습니까?

— Jack1987

0

웹 사이트에 숨겨진 간단한 양식을 사용하여 사용자가 로그인 한 것과 동일한 정보를 사용하여 쉽게 해결할 수있었습니다. 예 사용자가이 양식에 로그인하도록하려면 아래 양식에 이와 같은 것을 추가 할 수 있습니다.

<input type="checkbox" name="autologin" id="autologin" />

내가 아는 한 폼을 숨기고 링크를 클릭하여 제출하십시오. 정보와 함께 숨겨진 양식을 제출하는 링크가 있습니다. 숨겨진 양식의 비밀번호 텍스트 영역에 비밀번호가있는 웹 사이트에서 자동 로그인 방법을 원하지 않으면 100 % 안전하지 않습니다.

자 여기 작업이 있습니다. $siteid계정 이라고 말하고 $sitepw암호입니다.

html이 마음에 들지 않으면 최소한의 데이터를 사용하고 숨겨진 양식의 값으로 에코하는 경우 먼저 PHP 스크립트에서 양식을 만드십시오. 방금 PHP 값을 사용하고 양식 버튼 옆에 pref를 원하는 곳에서 에코합니다.

PHP 양식 인쇄

$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
    <input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
    <input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';

양식을 제출하기위한 PHP와 링크

<?php print $hidden_forum; ?>
<pre><a href="#forum" onClick="javascript: document.getElementById('alt_forum_login').submit();">Forum</a></pre>

— AgeofTalisman
소스

사실 당신은 양식을 제출해야하지만 링크가 내 코딩에 나타나지 않지만 죄송합니다 : onclick 또는 href = javascript : document.getElementById ( 'alt_forum_login'). submit ()

— AgeofTalisman

문제는 자바 스크립트에 관한 것입니다. PHP 코드가 전혀 필요 없습니다

— Shedokan

0

아래 코드를 사용하여 Javascript를 사용하여 양식을 제출할 수 있습니다.

document.getElementById('FormID').submit();

— 아비 짓 나비 르
소스

-1

<html>
<body>

<p>Enter some text in the fields below, then press the "Submit form" button to submit the form.</p>

<form id="myForm" action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Submit form">
</form>

<script>
function myFunction() {
    document.getElementById("myForm").submit();
}
</script>

</body>
</html>

— 제이 나가르
소스

다음에 관련 부분과 설명 만 포함 된 정답을 공유 할 수 있습니까 ?

— 니코 하세

이 답변은 일부 stackoverflow.com/a/54619085/7003760

— Mayer Spitzer에서