web-dev-qa-db-fra.com

Envoyez le formulaire en utilisant <a> tag

J'essaie de soumettre un formulaire via événement onclick sur tag. J'ai essayé de déclencher document.myform.submit (), this.form.submit (), parentNode.submit () etc. mais rien de tout cela ne fonctionne! En utilisant un bouton d'envoi, le code fonctionne bien. Mais je veux utiliser tag à la place de cela. Besoin d'aide.

            <form id="myform" name="myform" method="POST" action="process_edit_questionnaire.php?project=<?php echo $project_id; ?>">
                <input name="module" type="hidden" value="<?php echo $module_id;?>"/>
                <input name="project" type="hidden" value="<?php echo $project_id;?>"/>
                <input name="hidden_ques_id" type="hidden" value="<?php echo $data_array_ques[$j]['ques_id'];?>"/>

            <div id="question_block">

                <div id="serial_block">
                    <p id="s_original_<?php echo $j+1; ?>"><a href="#" onclick="showSelectBox(<?php echo $j+1; ?>)">Serial : 
                        <?php 
                        if($data_array_ques[$j]['ques_position']==NULL){ 
                            echo $j+1;                            
                        } 
                        else { 
                            echo $data_array_ques[$j]['ques_position'];         
                        } ?></a></p>
                    <p id="s_select_box_<?php echo $j+1; ?>" style="display: none;">Serial : 
                        <select name="serial">
                          <?php for($p=1;$p<=count($data_array_ques);$p++){ ?>
                                    <option value="<?php echo $p; ?>" <?php if($p==$data_array_ques[$j]['ques_position']){ echo "selected=\"selected\"";} ?> ><?php echo $p; ?></option>
                          <?php }  ?>
                        </select>
                    </p>
                </div>

                <div id="question_text">
                    <a href="#" onclick="showTextBox(<?php echo $j+1; ?>)"><p id="q_original_<?php echo $j+1; ?>"><?php echo $data_array_ques[$j]['ques_text']; ?></p></a>
                    <p id="q_text_box_<?php echo $j+1; ?>" style="display:none;"><textarea id="ques_text" name="ques_text" rows="3" cols="30"><?php echo $data_array_ques[$j]['ques_text']; ?></textarea></p>                     
                </div>

            </div>

            <div id="menu_block">
                <a href="" onclick="document.myform.submit()">Save Changes</a> |
                <a href="delete_question.php?project=<?php echo $project_id; ?>&module=<?php echo $module_id; ?>">Delete This Question</a>
            </div>
            </form>
javascripthtmlformssubmit
29
Potheek

vous pouvez le faire comme ça avec du javascript brut

<html>
    <body>
        <form id="my_form" method="post" action="mailto://[email protected]">
            <a href="javascript:{}" onclick="document.getElementById('my_form').submit();">submit</a>
        </form>
    </body>
</html>
43
krystan honour

Si jquery est autorisé, vous pouvez utiliser le code suivant pour l'implémenter de la manière la plus simple possible: 

<a href="javascript:$('#form_id').submit();">Login</a>

ou

<a href="javascript:$('form').submit()">Login</a>

Vous pouvez utiliser la ligne suivante dans votre balise head () pour importer jquery dans votre code 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
5
Hemant Nagpal

Soumettez votre formulaire comme ceci ...

Votre code HTML 

    <form name="myform" action="handle-data.php"> Search: <input type='text' name='query' />
     <a href="javascript: submitform()">Search</a> 
   </form>

Code JavaScript

  <script type="text/javascript"> 
        function submitform() {   document.myform.submit(); } 
   </script>
5
Pranay Rana

Essaye ça:

Supposons que HTML ressemble à ceci:

   <form id="myform" name="myform" method="POST" action="process_edit_questionnaire.php?project=<?php echo $project_id; ?>">
      <div id="question_block">
            testing form
        </div>
     <a href="javascript: submit();">Submit</a>
        </form>

JS:

   <script type='text/javascript'>
     function submit()
      {
         document.forms["myform"].submit();
      }
   </script>

vous pouvez le vérifier ici: http://jsfiddle.net/Zm426/7/

4
Jignesh Rajput

Voici comment je le ferais avec Vanilla JS

<form id="myform" method="POST" action="xxx">
    <!-- your stuff here -->
    <a href="javascript:void()" onclick="document.getElementById('myform').submit();>Ponies await!</a>
</form>

Vous pouvez jouer avec return falses et href="#" vs void et tout ce dont vous avez besoin, mais cette méthode a fonctionné pour moi dans Chrome 18, IE 9 et Firefox 14 et le reste dépend principalement de votre javascript.

4
Nenotlep

Y a-t-il une raison pour ne pas utiliser un bouton submit et le styler avec css pour qu'il corresponde à vos autres balises a?

Je pense que cela réduirait votre dépendance à l'activation de javascript tout en obtenant le résultat souhaité.

2
CF5

Vous pouvez utiliser le bouton d'envoi masqué et cliquer dessus à l'aide de Java script/jquery comme ceci: 

  <form id="contactForm" method="post" class="contact-form">

        <button type="submit" id="submitBtn" style="display:none;" data-validate="contact-form">Hidden Button</button>
        <a href="javascript:;" class="myClass" onclick="$('#submitBtn').click();">Submit</a>

  </form>
1
Alaa' Agha

Je suggère d'utiliser "return false" au lieu d'utiliser du javascript dans le href-tag:

<form id="">
...
</form>

<a href="#" onclick="document.getElementById('myform').submit(); return false;">send form</a>
1
Rafael Kutscha
<form  id="myform_id" action="/myMethode"  role="form"  method="post" > 
   <a  href="javascript:$('#myform_id').submit();" >submit</a>
</form>
0
Ameni

En utilisant Jquery, vous pouvez faire quelque chose comme ceci:

$(document).ready(function() {
  $('#btnSubmit').click(function() {
    $('#deleteFrm').submit();
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="deleteFrm" method="POST">
  <a id="btnSubmit">Submit</a>
</form>

0
James