web-dev-qa-db-fra.com

Changer la valeur de l'entrée puis soumettre le formulaire en JavaScript

Je travaille actuellement sur un formulaire de base. Ce que je veux faire avec ce formulaire, c’est que, lorsque vous cliquez sur le bouton Envoyer/sur le bouton, vous modifiez d’abord la valeur d’un champ, puis vous le soumettez normalement. Tout ça ressemble un peu à ça:

<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>

Et voici à quel point je suis venu avec le JavaScript. Il change la valeur de "myinput" en 1 mais ne soumet pas le formulaire. Je suis vraiment un noobie JavaScript, alors pardonnez-moi si cette question est trop simple, mais je ne comprends pas vraiment ce que je veux dire.

function DoSubmit(){
  document.myform.myinput.value = '1';
  document.getElementById("myform").submit();
}
javascripthtmlformsonclicksubmit
42
Paparappa

Vous pouvez faire quelque chose comme ceci à la place:

<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>

Et puis modifiez votre fonction DoSubmit pour qu'elle retourne juste true, en indiquant que "c'est OK, vous pouvez maintenant envoyer le formulaire" au navigateur:

function DoSubmit(){
  document.myform.myinput.value = '1';
  return true;
}

EDIT: Je serais également prudent d’utiliser des événements onclick sur un bouton de soumission; l'ordre des événements n'est pas immédiatement évident et votre rappel ne sera pas appelé si l'utilisateur soumet, par exemple, en appuyant sur return dans une zone de texte.

57
valderman
document.getElementById("myform").submit();

Cela ne fonctionnera pas car votre balise de formulaire n'a pas d'identifiant.

Changez-le comme ça et ça devrait marcher:

<form name="myform" id="myform" action="action.php">
6
Claude Schlesser

Non. Lorsque votre type d'entrée est soumis, vous devez déclarer un événement onsubmit dans la balise, puis effectuer les modifications souhaitées. Cela signifie que vous avez un onsubmit défini dans votre balise de formulaire.

Sinon, remplacez le type d'entrée par un bouton, puis définissez un événement onclick pour ce bouton.

5
Ashwin Krishnamurthy

voici un code simple, vous devez définir un identifiant pour votre entrée ici, appelez-le 'myInput':

      var myform = document.getElementById('myform');
      myform.onsubmit = function(){ 
                    document.getElementById('myInput').value = '1';
                    myform.submit();
                  };
5
Said Marar

Vous essayez d'accéder à un élément basé sur l'attribut name qui fonctionne pour les publications sur le serveur mais javascript répond à l'attribut id. Ajoutez un id avec la même valeur que name et tout devrait bien fonctionner.

<form name="myform" id="myform" action="action.php">
  <input type="hidden" name="myinput" id="myinput" value="0" />
  <input type="text" name="message" id="message" value="" />
  <input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>

function DoSubmit(){
  document.getElementById("myinput").value = '1';
  return true;
}
2
Chris Snowden

Mon problème s'est avéré que j'attribuais comme document.getElementById("myinput").Value = '1';

Remarquez le capital V en valeur? Une fois que je le change en petit cas, par exemple; valeur, les données ont commencé à publier. Odd car cela ne donnait pas non plus d'erreur Javascript

1
Dinesh Rajan

Pouvez-vous utiliser onchange Event

<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
0
iCrazybest

Cela pourrait vous aider.

Votre HTML

<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>

VOTRE SCRIPT

    <script>
        function save(){
            $('#myinput').val('1');
            $('#form').submit();
        }
    </script>
0
Saif Zakir