Html forms | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

Html forms

Ok guys i made an inpur bar for name inputs with the form tag on html and i want it to calculate and return some thing after i inputted my name but the problem is it tryes to go to othet websites Here is the code below and +"what should i do??"; <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <head> <style> h1{ font-family:Lobster; } </style> </head> <body bgcolor="pink"> <h1>LOVE CALCULATOR</h1> <form> <i><b>your name:</b></i><br> <input id="demo" type="text" name="your name"><br> <i><b>your loves name:</b></i><br> <input id="demo2" type="text" name="your loves name"><br> <button class="button1"onclick="cal()"><b>calculate</b></button> <p><b> made by immortal soul don't forget to upvote</b></p> <script type="text/javascript"> var a=document.getElementById("demo"); var b=document.getElementById("demo2"); function cal(){ return a.length*b.length*4+"%" } </script> </body </html>

4th Apr 2020, 11:34 AM
Immortal Soul
Immortal Soul - avatar
4 Answers
+ 2
Immortal Soul Don't use form tag because it throw page to another page after submitting data. Change your JavaScript code by this. function cal(){ var a=document.getElementById("demo").value; var b=document.getElementById("demo2").value; var result = a.length * b.length * 4 + " %"; document.getElementById("result").innerHTML = result; }
4th Apr 2020, 2:15 PM
A͢J
A͢J - avatar
+ 2
Or just cancel the submission <form onsubmit="return submit(this)"> function submit(form) { //your code return false; } a bit out of the context but this is also the way you do client side form validation. Also a good thing to add the parent element as an argument and use it to interact with its children. That way you can use the same function for multiple forms.
4th Apr 2020, 2:32 PM
Toni Isotalo
Toni Isotalo - avatar
+ 2
Thank u guys i was stuck u really helped me thank u really
5th Apr 2020, 8:46 PM
Immortal Soul
Immortal Soul - avatar
0
AJ #Level 20 End Day But if i don't use the form tag the page won't get the usere input i could use the "JavaScript prompt" but it will look ugly so whats your advice ??
5th Apr 2020, 8:51 PM
Immortal Soul
Immortal Soul - avatar