CODEWITHSUNDEEP
htmlformsradio-button
geds13
geds13

Reputation: 191

Radio button automatically checked when user checks radio button

How do I make a radio button automatically check when i press a radio button?

I have 2 tables, when i click a radio button in table1, the radio button in table2 should also be checked.

here is the radio button code for table1

<tr>
                    <td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="COD") echo "checked";?>  value="COD"></td>
                    <td><img src="img/Cash on Delivery.jpg" alt="COE" class="picture" height="90" width="125"/></td>
                    <td><p>This service is only available for Meto Manila and Metro Cebu.<p>
                        <div id='price'> Additional ₱180 </div></td>
                </tr>

and here the radio button in table2 that needs to be automatically checked when i check the radio button in table1

        <tr>
            <td><input type="radio" name="carrier" <?php if (isset($payment) && $payment=="COD") echo "checked";?>  value="COD"></td>
            <td><img src="img/Cash on Delivery.jpg" height="90" width="125"/></td>
            <td><p>Pay with your Cash on Delivery (COD)<br>Choose this option if you have selected COD under shipping. Otherwise, choose other options for payment.<p></td>
        </tr>

Here are the full codes. 

    if(isset($_GET['command']) && $_GET['command']=='update'){


        $first_name=$_SESSION['first_name'];
        $email=$_SESSION['email'];
        $home_address=$_SESSION['home_address'];
        $mobile_phone=$_SESSION['mobile_phone'];
        $carrier=$_REQUEST['carrier'];
        $payment=$_REQUEST['payment'];

        $result=mysql_query("insert into customers values('','$first_name','$email','$home_address','$mobile_phone','$carrier','$payment')");

        $customerid=mysql_insert_id();
        date_default_timezone_set("Asia/Hong_Kong");
        $date=date('Y-m-d h:i:s');
        $result=mysql_query("insert into orders values('','$date','$customerid')");
        $orderid=mysql_insert_id();

        $max=count($_SESSION['cart']);
        for($i=0;$i<$max;$i++){
            $pid=$_SESSION['cart'][$i]['productid'];
            $q=$_SESSION['cart'][$i]['qty'];
            $price=get_prod_price($pid);
            mysql_query("insert into order_detail values ($orderid,$pid,$q,$price)");
        }

        header('refresh: 0; url=homeframe.html'); // to be redirected
        exit(); // para mawala ang puta, tumigil ang script.
    }

//  else if(isset($_REQUEST['success']) && $_REQUEST['success']=='1'){
//  header('refresh: 0; url=samplebrand.php');
//  $message = "Thank you for buying, You will now be redirected";
//  echo("<script type='text/javascript'>alert('$message');</script>");
//  }
    ?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Billing Info</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript">

    function validate(){
        var f=document.form1;
        f.command.value='update';
        f.submit();
        alert("Order submitted");
    }

$('#super').change(function(){
    var radio1 = $('input:radio[name=carrier]:checked').val();
    if(radio1 == 'on'){
        $( "input:radio[name=carrier2]" ).prop( "checked", true ).checkboxradio( "refresh" );
    }
});
</script>

<style>
#price{
    color:red;
    font-size:20px;
    padding-right: 10px;
    font-family: "Times New Roman", Times, serif;
    float:right;
}
td{
        display:block;
}
</style>
</head>
<body>

    <form name="form1" onsubmit="return validate()">
    <input type="hidden" name="command" />
    <div align="center">
        <h1 align="center">Shipping and Payment</h1>
        <table border="0" cellpadding="2px">
            <tr><td>Order Total:</td><td>₱ <?php echo get_order_total()?></td><td>&nbsp;</td>
                </tr>
        </table>
                    <center><h1>Shipping Method</h1></center>
            <form method="post">
            <table width="900" border="0" align="center" cellpadding="2" cellspacing="0" id='center'>
                <tr>
                    <td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="LBC") echo "checked";?>  value="LBC"></td>
                    <td><img src="img/LBC.jpg" alt="LBC" class="picture"/></td>
                    <td><p>The Shipping takes 1-2 days for NCR and 2-3 days for any provincial.<p>
                        <div id='price'> Additional ₱250 </div></td>

                </tr>
                <tr>
                    <td><input type="radio" id="super" name="carrier" <?php if (isset($carrier) && $carrier=="COD") echo "checked";?>  value="COD"></td>
                    <td><img src="img/Cash on Delivery.jpg" alt="COE" class="picture" height="90" width="125"/></td>
                    <td><p>This service is only available for Meto Manila and Metro Cebu.<p>
                        <div id='price'> Additional ₱180 </div></td>
                </tr>
                <tr>
                    <td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="Personal") echo "checked";?>  value="Personal"></td>
                    <td><img src="img/buybranded2.jpg" alt="buybranded" class="picture"/></td>
                    <td><p>The Shipping takes 2-3 days after processing for NCR and 3-5 days for any provincial.<p>
                        <div id='price'> Additional ₱100 </div></td>
                </tr>
                <tr>
                    <td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="NextDayDelivery") echo "checked";?>  value="NextDayDelivery"></td>
                    <td><img src="img/NextdayDelivery.jpg" alt="NextDayDelivery" class="picture"/></td>
                    <td><p>The Shipping takes 1-2 days for NCR and 2-3 days for any provincial.<p>
                        <div id='price'> Additional ₱150 </div></td>
                </tr>
                <tr>
                    <td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="SameDayDelivery") echo "checked";?>  value="SameDayDelivery"></td>
                    <td><img src="img/Same day Delivery.jpg" alt="SameDayDelivery" class="picture"/></td>
                    <td><p>Available only for NCR. Get your sporting good/s the same day you purchase the item. Cutoff is 12noon.<p>
                        <div id='price'> Additional ₱250 </div></td>
                </tr>
                <tr>
                    <td><input type="radio" name="carrier" <?php if (isset($carrier) && $carrier=="PickUp") echo "checked";?>  value="PickUp"></td>
                    <td><img src="img/Pick-up.jpg" alt="Pick-Up" class="picture"/></td>
                    <td><p>Office hours: 10:00 am to 6:00 pm<p>
                        <div id='price'> Free!! </div></td>
                </tr>
            </table>
            <br>
            <br>
        <center><h1>Payment Method</h1></center>
        <table width="900" border="0" align="center" cellpadding="2" cellspacing="0" id='centerdown'>
                <tr>
                    <td><input type="radio" name="payment" <?php if (isset($payment) && $payment=="BPI") echo "checked";?>  value="BPI"></td>
                    <td><img src="img/BPI.jpg"></td>
                    <td><p>Pay by BPI bank deposit (we need confirmation of payment through email.)<p></td>
                </tr>
                <!--
                <tr>
                    <td><input type="radio" name="payment" <?php if (isset($payment) && $payment=="PayPal") echo "checked";?>  value="PayPal"></td>
                    <td><img src="img/paypal.gif"></td>
                    <td><p>Pay with your PayPal account, credit card (CB, Visa, Mastercard...), or private credit card.<p></td>
                </tr>
                -->
                <tr>
                    <td><input type="radio" name="payment" <?php if (isset($payment) && $payment=="PickUp") echo "checked";?>  value="PickUp"></td>
                    <td><img src="img/cashondelivery.gif"></td>
                    <td><p>Pick up. You have 5 days reservation period. You pay for the merchandise upon pick-up<p></td>
                </tr>
                <tr>
                    <td><input type="radio" name="carrier2" <?php if (isset($payment) && $payment=="COD") echo "checked";?>  value="COD"></td>
                    <td><img src="img/Cash on Delivery.jpg" height="90" width="125"/></td>
                    <td><p>Pay with your Cash on Delivery (COD)<br>Choose this option if you have selected COD under shipping. Otherwise, choose other options for payment.<p></td>
                </tr>
            </table>
            <table>
            <tr><td><!--<input type="submit" value="Place Order"/> --> <input type="button" value="Confirm Order" onclick="window.location='quotation.php?'"></td></tr>
            </table>
        </form>

    </div>
</form>


</body>
</html>

Upvotes: 1

Views: 194

Answers (2)

Azizi Musa
Azizi Musa

Reputation: 1029

i slightly change your second radio name, and you can automatically set it with jquery like below :

$('input:radio[name=carrier]').change(function(){
var radio1 = $('input:radio[name=carrier]:checked').val();
if(radio1 == 'on'){
    $( "input:radio[name=carrier2]" ).prop( "checked", true ).checkboxradio( "refresh" );
}
});

DEMO

Upvotes: 0

disappointed in SO leadership
disappointed in SO leadership

Reputation: 2272

You could achieve this using JQuery. Assuming your forms have ids of form1 and form2:

<script>
$(document).ready(function () {
    $("#form1 input[name='carrier']").click(function () {
        if (this.checked) {
           $("#form2 input[name='carrier']").prop("checked", true);
        } // end if checked
    });
}); // end doc ready
</script>

You will also need to include a reference to the JQuery library, before adding the aforementioned code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Please note that this will only update the form2 carrier radio button when the form1 button is clicked, and not the other way around.

See this JSFiddle as an example.

Upvotes: 2

Related Questions