Jump to content

struggle how to get button value to php


Recommended Posts

Hello I found an online example of radio buttons its in html css.

(example can be foud at codepen too https://codepen.io/web-tiki/pen/JXwLGQ/   ) 

I would like to get the chosen value into php

the script is without javascript jquery.

Do I need this to solve it? (If not needed then rather straight from html to php )

And if needed javascript or jquery, how is it done?

 

<html>

<head>
 <style type="text/css">
 *{margin:0;padding:0;box-sizing:border-box;}
body{background:teal;color:#fff;padding-bottom:10%;}
h1{text-align:center;margin:20% 0 5%;font-family:verdana;font-weight:100;}
#radios{
  position:relative;
  width:50%;
  margin:0 auto;
}
input[type="radio"]{
  position:absolute;
  right:1000%;
}
label{
  float:left;
  width:15%; padding-bottom:15%;
  margin:0 2.5%;
  background:rgba(255,255,255,.2);
  border-radius:50%;
  cursor:pointer;
}
#slider{
  position:absolute;
  left:0%; top:0;
  width:10%; padding-bottom:10%;
  margin:2.5% 0 0 5%;
  background:#fff;
  transition:transform 1s;
  border-radius:50%;
  animation-timing-function: ease-in-out;
  animation-duration:.3s;
  animation-fill-mode: forwards;
  transition: 0.2s left .05s ease-in-out;
}
#input1:checked  ~ #slider{ animation-name: input1; left:0; }
#input2:checked  ~ #slider{ animation-name: input2; left:20%; }
#input3:checked  ~ #slider{ animation-name: input3; left:40%; }
#input4:checked  ~ #slider{ animation-name: input4; left:60%; }
#input5:checked  ~ #slider{ animation-name: input5; left:80%; }

@keyframes input1{ 30%, 70% { transform:scale(0.5); } }
@keyframes input2{ 30%, 70% { transform:scale(0.5); } }
@keyframes input3{ 30%, 70% { transform:scale(0.5); } }
@keyframes input4{ 30%, 70% { transform:scale(0.5); } }
@keyframes input5{ 30%, 70% { transform:scale(0.5); } }
 </style>
</head>

<body><center>
<br><br><br><br>
<form action="" method="post" onChange="this.form.submit();" >
<h1>Select one:</h1>
<div id="radios">
  <label for="input1"></label>
  <input  id="input1" name="radio" type="radio" />
  <label for="input2"></label>
  <input  id="input2" name="radio" type="radio" />
  <label for="input3"></label>
  <input  id="input3" name="radio" type="radio" />
  <label for="input4"></label>
  <input  id="input4" name="radio" type="radio" />
  <label for="input5"></label>
  <input  id="input5" name="radio" type="radio" />
  <span id="slider"></span>
</div>

 
 
</form>
<?php 
if(isset($_POST['radio'])) {
	

	var_dump($_POST['radio']);
}



?>
</center>
</body>
</html>

 

Anyone got any idea?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...