Modifier la valeur d'un champ sur soumettre en utilisant Javascript

Question

Je voudrais ajouter du JavaScript pour faire ce qui suit.

J'aurais 3 champs comme celui-ci. Disons si j'ai entré 100 dans le premier champ et 19 dans le second champ. Par exemple, si j'ai saisi 100 dans le premier champ et 19 dans le deuxième champ.

il serait diviser 100 par 19 et l'arrondir sans décimales, puis remplacer la valeur du troisième champ caché par la réponse, donc dans le cas il serait (100/19) 5,26 ... arrondi jusqu'à 6

Cependant, je ne suis pas sûr de savoir comment implémenter cela.

Answer 1

Après les éléments de formulaire:

<script type="text/javascript"> 
    (function() { 
     var a= document.getElementsByName('a')[0]; 
     var b= document.getElementsByName('b')[0]; 
     var c= document.getElementsByName('c')[0]; 

     a.onchange=b.onchange=a.onkeyup=b.onkeyup= function() { 
      c.value= Math.ceil(a.value/b.value); 
     }; 
    })(); 
</script> 

recalculées à chaque pression de touche, retirez la keyup obligatoire si vous ne voulez pas.

Ajoutez un id unique à chaque entrée et utilisez document.getElementById pour éviter toute ambiguïté avec name. Si ce formulaire ne sera jamais soumis, vous pouvez omettre name entièrement.

Math.ceil() retournera NaN si l'une ou l'autre valeur ne peut pas être lue comme un nombre, ou Infinity si vous divisez par zéro. Vous pouvez vérifier ces conditions et écrire une valeur différente.

Answer 2

Dites que votre formulaire ressemble à ceci;

<form id="myForm" method="POST"> 
    <input type="text" name="a" /> 
    <input type="text" name="b" /> 
    <input type="hidden" name="c" /> 
</form> 

Vous pouvez accéder au formulaire comme ceci;

function doAction(action) 
{ 
    var frm = document.forms.myForm; 
    frm.c.value = frm.a.value/frm.b.value; 
} 

Vous pouvez déclencher l'action en ajoutant un bouton qui peut être cliqué, ou soumettre la mise en action de la forme.

Edit: n'arrondit pas, ne sais pas comment faire :(

Answer 3

Une façon dumbed vers le bas, ce qui suppose que votre formulaire est document.forms [0]:

<input type="text" name="a" onchange="myFunction" /> 
<input type="text" name="b" onchange="myFunction" /> 
<input type="hidden" name="c" /> 

function myFunction() { 
    var inpA = document.forms[0].a; 
    var inpB = document.forms[0].b; 
    var aVal = parseFloat(inpA.value); 
    var bVal = parseFloat(inpB.value); 
    if (!isNaN(aVal) && !isNaN(bVal) && bVal !== 0) { 
    document.forms[0].c.value = Math.ceil(aVal/ bVal); 
    } 
} 

EDIT: Math.round => Math.ceil

Answer 4

Vous faites cela en se liant un eventlistner à partir de l'élément Vous pouvez soit créer votre propre (Javascript native event handlers) ou utilisez votre favorit framework javascript Mon exemple est pour l'utilisation du jQuery jQuery bind method.. framework javascript.

/* first set and id to your input hidden and form element so you can reach it in fast way */ 
<form id="myForm"><input type="hidden" id="total" name="c" /></form> 
/* Javascript code using jquery */ 

$('#form').bind('submit', function() { 
    $('#total').val(function() { 
     var num = parseFloat($('#form input[name=a]').val())/parseFloat($('#form input[name=b]').val()); 
     return Math.floor(num) === num ? num : Math.floor(num) + 1; 
    }); 
}); 

Answer 5

Une méthode facile est de passer le formulaire à une fonction et de permettre à cette fonction de faire le calcul.

La forme devrait ressembler à:

<form> 
<input type="text" name="a" /> 
<input type="text" name="b" /> 
<input type="hidden" name="c" /> 
<input type="button" value="Click" onClick="doCalculate(this.form)" /> 
</form> 

et le javascript:

function doCalculate(theForm){ 
    var aVal = parseFloat(theForm.a.value); 
    var bVal = parseFloat(theForm.b.value); 
    var cVal = 0; 
    if(!isNaN(aVal) && !isNaN(bVal)){ 
     cVal = Math.ceil(aVal/bVal); 
    } 
    theForm.c.value = cVal; 
} 

Exemple de travail ici ->http://jsfiddle.net/azajs/

Edit: Cela peut aussi se faire lorsque le formulaire est en soumettant un appel similaire à l'envoi du formulaire:

<form onsubmit="doCalculate(this);" > 
... 
</form>