html checked only by default

BrainPill · June 22, 2019

I made this code, but I would like the radio button to only be checked the first time the page is visited

after that a user should be able to switch and get the form values in php

example:

Quote


		<html>
		<body><center>
		<br><br><br><br>
		<form action="#" method="post" > 
			
		<input name="ok" value="y" onChange="this.form.submit();" type="radio" checked>

		<label>Yes</label>

		<input name="ok" value="n" onChange="this.form.submit();" type="radio" >

		<label>No</label>
		  
		</form>
		<?php 
		if(isset($_POST['ok'])) {
			
			var_dump($_POST['ok']);
		} 

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

How can I fix this?

Edited June 22, 2019 by BrainPill

dsonesuk · June 22, 2019

Use localstorage to store number of times the buutons were selected. With default being 0, the checked is used, greater than 0 checked remains removed.

BrainPill · June 25, 2019

is that the only way? I try to avoid javascript and client side scripting too much. Can it be done in php?

justsomeguy · June 25, 2019

You can save whatever you want in a database if the person is logged in to your site. I'm not sure exactly what you're trying to do though.

BrainPill · June 26, 2019

20 hours ago, justsomeguy said:

You can save whatever you want in a database if the person is logged in to your site. I'm not sure exactly what you're trying to do though.

the script has a radio button styled in a specific way.

removing the checked option from the html part results in a wrong designed button.

using the <form> tag makes only the unchecked button clickable.

using javascript location.href towards this page or another gives the same effect as <form>, its partially unclickable.

the code:

        <html>

        <head>
         <style type="text/css">

         body, html {
          background: #954535;
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100%;
          z-index: -1;
        } 

        .btn_bl {
          border: 3px solid yellow;
          font-family: "Trebuchet MS", Helvetica, sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            word-spacing: 2px;

            font-weight: 700;
            text-decoration: none;
            font-style: normal;
            font-variant: normal;
            text-transform: uppercase;

          display: inline-block;
          padding: 10px;
          position: relative;
          text-align: center;
          transition: background 600ms ease, color 600ms ease;
        }

        input[type="radio"].toggle {
          display: none;
        }

        input[type="radio"].toggle + label {
          cursor: pointer;
          min-width: 60px;
        }

        input[type="radio"].toggle + label:hover {
          background: none;
          color: yellow;
          font-family: "Trebuchet MS", Helvetica, sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            word-spacing: 2px;

            font-weight: 700;
            text-decoration: none;
            font-style: normal;
            font-variant: normal;
            text-transform: uppercase;

        }

        input[type="radio"].toggle + label:after {
          background: #CFECEC;
          content: "";
          height: 100%;
          position: absolute;
          top: 0;
          transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
          width: 100%;
          z-index: -1;
        }

        input[type="radio"].toggle.toggle-left + label {
          border-right: 0;
        }

        input[type="radio"].toggle.toggle-left + label:after {
          left: 100%;
        }

        input[type="radio"].toggle.toggle-right + label {
          margin-left: -5px;
        }

        input[type="radio"].toggle.toggle-right + label:after {
          left: -100%;
        }

        input[type="radio"].toggle:checked + label {
          cursor: default;
          color: darkgrey;
          transition: color 200ms;
          font-family: "Trebuchet MS", Helvetica, sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            word-spacing: 2px;

            font-weight: 700;
            text-decoration: none;
            font-style: normal;
            font-variant: normal;
            text-transform: uppercase;


        }

        input[type="radio"].toggle:checked + label:after {
          left: 0;
        }

         </style>
        </head>

        <body><center>
        <br><br><br><br>




        <input id="toggle-on" class="toggle toggle-left" name="toggle" value="y" onChange="this.form.submit();" type="radio" checked>

        <label for="toggle-on" class="btn_bl">Yes</label>

        <input id="toggle-off" class="toggle toggle-right" name="toggle" value="n" onChange="this.form.submit();" type="radio" >

        <label for="toggle-off" class="btn_bl">No</label>




        <?php 

        if(isset($_POST['toggle'])) {

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



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

justsomeguy · June 26, 2019

removing the checked option from the html part results in a wrong designed button.

You have CSS targeting only the checked button.

using the <form> tag makes only the unchecked button clickable.

That's how radio buttons work, you can only select one of them.

BrainPill · June 28, 2019

maybe its more a css matter, not sure if this is the correct subforum

Edited June 28, 2019 by BrainPill

BrainPill · June 28, 2019

The same principle is found here button slide example

my problem is how to get the value of the radio button towards php

dsonesuk · June 28, 2019

That uses all checkboxes?, you can select multiple checkboxes using the same name attribute value. With radio buttons using same name attribute value, only one can be selected at one time.

With your original code place the php code at top. as

<?php 

$checkboxCheckedAttr = "checked";

		if(isset($_POST['ok'])) {
			$checkboxCheckedAttr = "";
			var_dump($_POST['ok']);
		}

html

<input id="toggle-on" class="toggle toggle-left" name="toggle" value="y" onChange="this.form.submit();" type="radio" <?php echo $checkboxCheckedAttr ?>>

At load because no submission of form and radio button value has taken place it will php will display "checked", after submission the php variable will show no attribute for checked.

IF that's what you mean

Edited June 28, 2019 by dsonesuk

BrainPill · July 1, 2019

sorry I dont get it completely. Maybe it is useful to make checked attrib variable. But it does not change the effect of the button going back in the checked position.

and what do you try to say with:

$_POST['ok']

.

Sign In

html checked only by default

Recommended Posts

BrainPill

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

BrainPill

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

BrainPill

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

BrainPill

Link to comment

Share on other sites

BrainPill

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

BrainPill

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity