Submit not working in javascript

Question

<form method="post" name="frm_no_kids" class="getstarted" action="step1.php">
 <input type="hidden" id="price_value" name="fee" value="<?php echo encrypt(499); ?>">
 <input type="hidden" id="divorce_type" name="divorce_type" value="no_kids">
 <a class="btn border-btn yellow-btn started-hover" title="Get Started" href="javascript:frm_no_kids.submit();">Get Started </a> 
</form>

I have this link and it is not working. This give me error like.

TypeError: frm_no_kids.submit is not a function

• Sterling Archer: Don't use inline events like that, it's bad practice. Use an external event handler
• Neha Raghuvanahi: But for now, just give me a solution for this error.
• TIGER: @neha910 You should take the suggestion positively.
• Neha Raghuvanahi: @Tiger, Yes definately but that time i was in hurry, and thanks for the comment.

Answer 1

I added an id in your form and called a function on anchor tag click to submit your form data :

 <form method="post" name="frm_no_kids" id="frm_no_kids" class="getstarted" action="step1.php">
 <input type="hidden" id="price_value" name="fee" value="<?php echo encrypt(499); ?>">
 <input type="hidden" id="divorce_type" name="divorce_type" value="no_kids">
 <a class="btn border-btn yellow-btn started-hover" title="Get Started" href="javascript:;" onclick="submitData()">Get Started </a> 
 </form>
 <script>
 function submitData(){
 document.getElementById("frm_no_kids").submit();
 }
 </script>

• Neha Raghuvanahi: Yes, Thanks alot, not it is working fine. Thanx once again :) @Ravi

Answer 2

 document.getElementsByName('frm_no_kids')[0].submit();

Check if this helps

<form method="post" name="frm_no_kids" class="getstarted" action="step1.php">
 <input type="hidden" id="price_value" name="fee" value="<?php echo encrypt(499); ?>">
 <input type="hidden" id="divorce_type" name="divorce_type" value="no_kids">
 <a class="btn border-btn yellow-btn started-hover" title="Get Started" href="javascript:document.getElementsByName('frm_no_kids')[0].submit();">Get Started </a> 
 </form>

Answer 3

It would make more sense to use an actual submit button in the form instead of a hyperlink that acts like a submit button. You can use <input type="submit"> or <button type="submit"> if you want more control over display/formatting.

If you are set on using a non-submit button (like your hyperlink), then it would be best to give the form its own ID:

<form method="post" id="frm_no_kids" name="frm_no_kids" class="getstarted" action="step1.php">
 <input type="hidden" id="price_value" name="fee" value="<?php echo encrypt(499); ?>">
 <input type="hidden" id="divorce_type" name="divorce_type" value="no_kids">
 <a class="btn border-btn yellow-btn started-hover" title="Get Started" href="javascript:document.getElementById('frm_no_kids').submit();">Get Started </a> 
</form>

As was mentioned in the comments, using an event listener is MUCH better:

HTML:

<form method="post" id="frm_no_kids" name="frm_no_kids" class="getstarted" action="step1.php">
 <input type="hidden" id="price_value" name="fee" value="<?php echo encrypt(499); ?>">
 <input type="hidden" id="divorce_type" name="divorce_type" value="no_kids">
 <a id="frm_no_kids_submit" class="btn border-btn yellow-btn started-hover" title="Get Started" href="#">Get Started </a>
</form>

JS:

document.getElementById("frm_no_kids_submit").addEventListener("click", function(){
 document.getElementById("frm_no_kids").submit();
});

Answer 4

Add an ID to your From and use that ID in your javascript

 <form method="post" name="frm_no_kids" id="frm_no_kids" class="getstarted" action="step1.php">
 <input type="hidden" id="price_value" name="fee" value="<?php echo encrypt(499); ?>">
 <input type="hidden" id="divorce_type" name="divorce_type" value="no_kids">
 <a class="btn border-btn yellow-btn started-hover" title="Get Started" href="javascript:;" onclick="submitData()">Get Started </a> 
 </form>
 <script>
 function submitData(){
 document.getElementById("frm_no_kids").submit();
 }
 </script>