링크를 클릭하여 JavaScript로 양식을 제출하는 방법은 무엇입니까?

제출 버튼 대신 링크가 있습니다.

<form>

  <a href="#"> submit </a>

</form>

클릭하면 양식을 제출할 수 있습니까?

가장 좋은 방법

가장 좋은 방법은 적절한 입력 태그를 삽입하는 것입니다.

<input type="submit" value="submit" />

최고의 JS 방식

<form id="form-id">
  <button id="your-id">submit</button>
</form>

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

에 의해 후자의 자바 스크립트 코드를 동봉 DOMContentLoaded(만 선택 이벤트 load에 대한 역 compatiblity 아직 수행하지 않은 경우)

window.addEventListener("DOMContentLoaded", function () {
  var form = document.... // copy the last code block!
});

쉽고 추천 할 수없는 방법 (이전 답변)

onclick링크와 id양식에 속성을 추가하십시오 .

<form id="form-id">

  <a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>

</form>

모든 길

어떤 방법을 선택하든 formObject.submit()결국 호출을 받게됩니다 formObject.<form> 태그 ).

또한를 호출하는 이러한 이벤트 핸들러를 바인딩해야 formObject.submit()하므로 사용자가 특정 링크 나 버튼을 클릭 할 때 호출됩니다. 두 가지 방법이 있습니다.

• 권장 : 이벤트 리스너를 DOM 개체에 바인딩합니다.

  // 1. Acquire a reference to our <form>.
  //    This can also be done by setting <form name="blub">:
  //       var form = document.forms.blub;
  
  var form = document.getElementById("form-id");
  
  
  // 2. Get a reference to our preferred element (link/button, see below) and
  //    add an event listener for the "click" event.
  document.getElementById("your-id").addEventListener("click", function () {
    form.submit();
  });

• 권장하지 않음 : 인라인 JavaScript를 삽입하십시오. 이 기술이 권장되지 않는 몇 가지 이유가 있습니다. 한 가지 주요 주장은 마크 업 (HTML)과 스크립트 (JS)를 혼합한다는 것입니다. 코드가 정리되지 않고 유지 관리가 불가능 해집니다.

  <a href="#" onclick="document.getElementById('form-id').submit();">submit</a>
  
  <button onclick="document.getElementById('form-id').submit();">submit</button>

이제 submit () 호출을 트리거하는 UI 요소를 결정해야하는 시점에 도달했습니다.

1. 단추

   <button>submit</button>

2. 링크

   <a href="#">submit</a>

이벤트 리스너를 추가하려면 앞서 언급 한 기술을 적용하십시오.

jQuery를 사용하고 인라인 솔루션이 필요한 경우 이것은 매우 잘 작동합니다.

<a href="#" onclick="$(this).closest('form').submit();">submit form</a>

또한

<a href="#">text</a>

와

<a href="javascript:void(0);">text</a>

따라서 사용자가 링크를 클릭 할 때 페이지 상단으로 스크롤하지 않습니다.

양식과 링크에 일부 ID를 제공 한 다음 onclick링크 및 submit양식 의 이벤트 를 구독 할 수 있습니다.

<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>

그리고:

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};

마크 업 의미를 존중하고 자바 스크립트가 비활성화 된 사용자에게도 작동하므로 양식 제출을 위해 제출 버튼을 사용하는 것이 좋습니다.

HTML 및 CSS-Javascript 솔루션 없음

버튼이 부트 스트랩 링크처럼 보이게합니다.

HTML :

<form>
    <button class="btn-link">Submit</button>
</form>

CSS :

.btn-link {

    background: none;
    border: none;
    padding: 0px;
    color: #3097D1;
    font: inherit;

}

.btn-link:hover {

    color: #216a94;
    text-decoration: underline;

}

이것은 특별한 기능 없이도 잘 작동합니다. PHP로도 작성하기가 훨씬 쉽습니다.<input onclick="this.form.submit()"/>

<form id="mailajob" method="post" action="emailthijob.php">
    <input type="hidden" name="action" value="emailjob" />
    <input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>

<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>

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

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

다음과 같은 기능에서도 사용할 수 있습니다.

function submitForm()
{
     document.getElementById("theForm").submit();
} 

양식 ID로 "theForm"을 설정하십시오. 끝났다.

귀하의 질문에 대한 최상의 솔루션은 다음과 같습니다. 양식 안에 다음 코드가 있습니다.

<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>

CSS 파일에서 다음을 수행하십시오.

button{
  display: none;
}

JS에서는 다음을 수행합니다.

$("a").click(function(){
   $("button").trigger("click");
})

됐습니다.