-2

i make a html site. there is questions on the site. i made it with form .After clicking on the button, I want to see all of the answers on the same page.i dont want as alert. how can i do it?

I apologize for the misspellings.

 <script>
   function findSelection()
   {
    
    var serieList=document.getElementsByName('serie')
    for (var i=0; i<serieList.length;i++) 
    {
    if(serieList[i].checked) 
     {
     
     }
    }
    
    var markaList=document.getElementsByName('marka') 
    
    for (var i=0; i<markaList.length;i++) 
    {
    if(markaList[i].checked) 
     {
      alert(markaList[i].value)
     }
    }
    
    var yerList=document.getElementsByName('yer') 
    
    for (var i=0; i<yerList.length;i++) 
    {
    if(yerList[i].checked) 
     {
      alert(yerList[i].value)
     }
    }
    
    var nasilList=document.getElementsByName('nasil') 
   
    for (var i=0; i<nasilList.length;i++)  
    {
    if(nasilList[i].checked) 
     {
      alert(nasilList[i].value)
     }
    }
    
    
   }
   
   
 </script>
 
<html>
 <head>
  <title>Web Tasarım Anketi </title>
 
 </head>
 
 <body style="background-color:#d3ea93">
 <center> <h1 style="color:red"> ANKET </h1> </center>

 <form  >
  <fieldset><legend>Soru 1 </legend>
   En sevdiğiniz yabancı dizi? </br>
    <label> <input type="radio" name="serie" value="Game of Thrones">Game of Thrones </label>
    <label> <input type="radio" name="serie" value="Person of İnterest">Person of Interest </label>
    <label> <input type="radio" name="serie" value="South Park">South Park </label> 
    <label> <input type="radio" name="serie" value="Black Mirror">Black Mirror </label> 
  </fieldset>
 </form> 
 
 <form >
  <fieldset><legend>Soru 2 </legend>
   En sevdiğiniz bilgisayar markası? </br>
    <label> <input type="radio" name="marka" value="Asus">Asus </label>
    <label> <input type="radio" name="marka" value="HP">HP </label>
    <label> <input type="radio" name="marka" value="Toshiba">Toshiba </label>
    <label> <input type="radio" name="marka" value="Dell">Dell </label>
  </fieldset>
  
 </form>
 
 <form>
  <fieldset><legend>Soru 3 </legend>
   Nerede yaşamak istersiniz?</br>
    <label> <input type="radio" name="yer" value="Türkiye">Türkiye </label>
    <label> <input type="radio" name="yer" value="Mars">Mars </label>
    <label> <input type="radio" name="yer" value="Avustralya">Avustralya </label>
    <label> <input type="radio" name="yer" value="Yeni Zelanda">Yeni Zelanda </label>
  </fieldset>
 </form>
 
 <form>
  <fieldset><legend>Soru 4 </legend>
   Nasıl ölmek istersiniz?</br>
    <label> <input type="radio" name="nasil" value="Araba Kazasında ">Araba Kazası </label>
    <label> <input type="radio" name="nasil" value="Uzay Boşluğunda">Uzay Boşluğunda </label>
    <label> <input type="radio" name="nasil" value="Ecelimle">Ecelimle </label>
    <label> <input type="radio" name="nasil" value="Maganda Kurşunu">Maganda Kurşunu </label>
  </fieldset>
 </form>
 
  <input type="button" id="btnKaydet" value="Kaydet" onclick="findSelection()"></input>
  
 
 </body>

</html>
volkan
  • 5
  • 1
  • 4

2 Answers2

0

You can use javascript to achieve this but ultimately you want to learn a server-side programming language, like php. To me php is the best option.

If you Google form and click the mozilla device docs for it you'll see an attribute called action, this attribute tells the form where to go or what to do (with inline javascript, but I highly recommend against this). You'll also find an attribute called method. Method is responsible for how the form handles the input values. The two most common values are post and get.

I usually only ever use post, because I'm posting the data to a script.

The most common use is something like

<form method="post" action="/area/scripts/post/form.php">

However, getting really fun with an mvc, would more look like:

<form method="post" action="<?php echo $this->getFormAction(); ?>">

Then in your form.php page you handle the data. To see what I mean, place this in your form.php for now:

<?php
    var_dump($_POST) ;

This will display your form data.

To link it back to your idea of displaying on same page, you can also use ajax, however this means including jquery into your site. It 100% makes life easier but it does increase your sites size. Of course you can opt for the .min script but still, you include in every page, so..

Anyway. Using pure html I'm not sure is possible, javascript is a browser side programming language and I'm not sure entirely if you can assign values dynamically, you probably can but I'm no javascript expert.

I recommend using php for this as it also makes it secure (if you follow convention and do it correctly using safe code)

Also, I prefer this as a comment as an actual answer because it doesn't directly deal with your problem or its associated tags, but the character limit is not enough for a comment like this. Feel free to downvote if preferred and I'll simply remove if it gets to -3

Update after seeing comment

To combine variables in javascript you use + to concat strings.

E.g.

var message = document.getElementById('myId') + ' ' + document.getElementById('myIdTwo');

alert(message);

This only an example of how to use, but this should be what you're looking for.

Good luck!

treyBake
  • 6,440
  • 6
  • 26
  • 57
-1

you can do it via jquery give all your fields id

and write like this

<script>
    $(document).ready(function()
    {
        $("#Button1).click(function()
        {
            $("#abc1").val($("#abc").val());
        })
</script>
<body>
    <input type="text" id="abc" />
    <input id="Button1" type="button" value="button" />
    <input type="text" id="abc1" />
</body>
treyBake
  • 6,440
  • 6
  • 26
  • 57
Mohammad Edris Raufi
  • 1,393
  • 1
  • 13
  • 34