Bir sumbit düğmesi ve sıfırlama düğmesiyle JavaScript'i kullanarak bir formda iki alanın hesaplanması

Burada yaptığım ve toplamı sonuç alanına nasıl alacağımı görmek için baktığım kod, ayrıca bir sıfırlama düğmesi nasıl yapılır? Tüm metni alanlardan temizle.Bir sumbit düğmesi ve sıfırlama düğmesiyle JavaScript'i kullanarak bir formda iki alanın hesaplanması

JSBin.

<html> 

<head> 
    <script> 
     function addition() { 
      var x = +document.getElementById('num1').value; 
      var y = +document.getElementById('num2').value; 
      document.getElementById('result').value = x + y; 
      document.result.submit() 
     } 

     function reset() {} 
    </script> 
</head> 

<body> 
    <header> 
     <h1>Calculator Using Forms &amp; JavaScript</h1> 
    </header> 

    <form> 
     Number 1: 
     <input type="number" id="num1" value="0" autofocus> 
     <br> Number 2: 
     <input type="number" id="num2" value="0"> 
     <br> Result: 
     <input type="text" id="result" value="0" readonly> 
     <br> 
    </form> 

    <input type="button" onclick="addition()" value="addition"> 
</body> 

</html>

kaynak

2016-04-04 Mr_links

Form vermek için '.submit()' 'form' üzerinde kullanın ve '.reset() '[Demo]' yı sıfırlayın (https://jsfiddle.net/tusharj/mma5jqyk/) – Tushar

JQuery kullanmıyorsunuz ... neden böyle etiketledin? –

İlk yorum gönder Üzgünüz! –

Bunu ister misin? Bir şey, teslim tarihinde meydana formun gönderme işleyicisi için bir dinleyici eklemek istediğiniz eğer öyleyse formlar, Gönder düğmesini tıklamadan ibraz edilebileceği jsbin

<html> 
<head> 
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script> 
    <script> 
     function addition() { 
      var x = +document.getElementById('num1').value; 
      var y = +document.getElementById('num2').value; 
      document.getElementById('result').value = x + y; 
      //document.result.submit() 

      //if you want use submit, use this code. if only see the result, don't use this 
      //Submit is receive data, so you can't see a result. 
      //document.getElementById('formId').submit(); 

      //jquery submit 
      //$("form")[0].submit(); 
     } 

     function reset() { 
      //no jquery 
      document.getElementById('formId').reset(); 
      //jquery 
      //$("form")[0].reset(); 
     } 
    </script> 
</head> 
<body> 
    <header> 
     <h1>Calculator Using Forms &amp; JavaScript</h1> 
    </header> 
    <form id="formId"> 
     Number 1: 
     <input type="number" id="num1" value="0" autofocus> 
     <br> Number 2: 
     <input type="number" id="num2" value="0"> 
     <br> Result: 
     <input type="text" id="result" value="0" readonly> 
     <br> 
    </form> 

    <input type="button" onclick="addition()" value="addition"> 
    <input type="button" onclick="reset()" value="reset"> 
</body> 

</html>

kaynak

2016-04-04 01:38:12 yongsup

Orijinali geliştirmek ve daha fazla hesaplamayla [JSBin] (https://jsbin.com/finagohuju/edit?html ,output) bir tane oluşturmak için bunu kullandı. –

Neden formu göndermek istiyorsunuz?

document.forms kullanabilirsiniz. forma erişmek için

bu deneyin:

<html> 

<head> 
    <script> 
     function addition() { 
      var x = +document.getElementById('num1').value; 
      var y = +document.getElementById('num2').value; 
      document.getElementById('result').value = x + y; 
      document.forms.calculator.submit() 
     } 

     function reset() { 
      document.forms.calculator.reset(); 
     } 
    </script> 
</head> 

<body> 
    <header> 
     <h1>Calculator Using Forms &amp; JavaScript</h1> 
    </header> 

    <form name="calculator"> 
     Number 1: 
     <input type="number" id="num1" value="0" autofocus> 
     <br> Number 2: 
     <input type="number" id="num2" value="0"> 
     <br> Result: 
     <input type="text" id="result" value="0" readonly> 
     <br> 
    </form> 

    <input type="button" onclick="addition()" value="addition"> 
    <input type="button" onclick="reset()" value="reset"> 
</body> 

</html>

kaynak

2016-04-04 01:23:57

Sıfırlamayı forma yerleştirin ve tıklama etkinliğini kullanmanız gerekmez. Ayrıca, giriş alanları 'name' özniteliğinden yoksundur, bu yüzden gönderilmeyeceklerdir. –

Teşekkürler bu tam olarak ne aradığım oldu! –

sadece forma ve sıfırlama işlevi bir kimliği vermek, sadece

document.getElementById("myForm").reset();

güncellemeler yapın:

ROBG yorumlarına göre, sana don' Düğmeye bir işlev bağlamanız gerekir. sadece formun tüm alanlarını sıfırlamak için bir

<input type="reset">

ekleyebilir ve düğme formunda dışarı ise, <input form="formID" type="reset"> belirli forma ilişkilendirmek yapabilirsiniz.

kaynak

2016-04-04 01:34:53 user1070111

Formu sıfırlamak için herhangi bir kod gerek yoktur, bir sıfırlama düğmesi (giriş tipi sıfırlama) bunu yapar. – RobG

Bu harika, ama eğer butonları forma sokmak istersem, bu tip sıfırlama butonu çalışmayacaktır. – user1070111

Formun dışındaki bir form denetimini formun * form * özniteliğini kullanarak ilişkilendirebilirsiniz, böylece '' herhangi bir yere yerleştirilebilir ve formu sıfırlar. Form ile ilişkilendirmek istediğiniz herhangi bir denetim için çalışır, ancak erişilebilirlik kısıtlamalarına dikkat edin (uygularsa). – RobG

Not. Bir formu sıfırlamak için sadece sıfırlama düğmesi, kod gerekmez.

Form denetimleri başarılı olması ve form ile onların değerini göndermek için bir adı olmalıdır ve getElementById kullanmak gerekmez böylece dinleyici bukullanarak forma bir başvuru iletebilirsiniz. Yukarıdaki uygulamaların uygulanması, gereken kod miktarını önemli ölçüde azaltır.

Aşağıda, gönderen dinleyici yanlış döndürerek formun gönderilmesini engeller. Göndermeye formu istiyorsanız, sadece sıralı dinleyici return ifadesini kaldırın:

function addition(form) { form.result.value = +form.num1.value + +form.num2.value; }

<form name="calculator" onsubmit="addition(this); return false;"> Number 1: <input type="number" name="num1" value="0" autofocus> <br> Number 2: <input type="number" name="num2" value="0"> <br> Result: <input type="text" name="result" value="0" readonly> <br> <input type="submit" value="Submit form"> <input type="reset"> </form>

Sen yapabilir bu durumda, hiç formu göndermek istemeyebilirsiniz
Gönder düğmesine düz bir düğme getirin ve oradan işlevi çağırın, aksi halde formu teslim etmeyi unutmayın.

kaynak

2016-04-04 01:43:13 RobG

Bir sumbit düğmesi ve sıfırlama düğmesiyle JavaScript'i kullanarak bir formda iki alanın hesaplanması

cevap

İlgili konular