Jump to content
BrainPill

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?

Share this post


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...