CODEWITHSUNDEEP
javascriptjqueryhtml
Johnny
Johnny

Reputation: 35

radio button sets text box value

$(function () {

    $("input[name='rbSelection']").change(function () {
        switch (this.value) {
            case "1":
                caption = "Daily";
                form_content = '<div class="divborder"><input type="radio" class="inputed" name="Every_Days" value="every_days" /><span>Every</span> <input type="text" size="1" name="Every_Days_Amount" value="1" /> <span>Day(s)</span><br /></div><div class="divborder"><input type="radio" class="inputed" name="Every_Dayweekday" disabled="disabled" value="every_weekday" /><span>Every Weekday</span></div>';
                break;
            case "2":
                caption = "Weekly";
                form_content = '<div class="divborder"><input type="radio" class="inputed" name="Every_Weeks" value="every_Weeks" /><span>Recur every</span> <input type="text" size="1" name="Every_Week_Amount" value="1" /><span> Weeks(s) on </span><select name="Weekly_Day" id="Weekly_Day"><option value="1" selected>Monday</option><option value="2">Tuesday</option><option value="3">Wednesday</option><option value="4">Thursday</option><option value="5">Friday</option><option value="6">Saturday</option><option value="7">Sunday</option></select></div>';
                break;
            case "3":
                caption = "Monthly";
                form_content = '<div class="divborder"><input type="radio" class="inputed" name="Every_Month" value="every_Months" /><span>Day</span> <input type="text" size="1" name="Every_Month_Day_Amount" value="31" /> <span>of every</span> <input type="text" size="1" name="Every_Week_Amount" value="1" /> <span>month(s)</span><br></div><div class="divborder"><input type="radio" class="inputed" name="Every_The_Month" value="every_the_Months" /><span>The</span>  <select name="Monthly_what" id="Monthly_what"><option value="First">First</option><option value="Second">Second</option><option value="Third">Thrid</option><option value="Fourth">Fourth</option><option value="Last" selected>Last</option></select> <select name="Weekly_Day" id="Weekly_Day"><option value="1" selected>Monday</option><option value="2">Tuesday</option><option value="3">Wednesday</option><option value="4">Thursday</option><option value="5">Friday</option><option value="6">Saturday</option><option value="7">Sunday</option></select> <span>of every </span><input type="text" size="1" name="Every_Week_Amount" value="1" /> <span>month(s)</span></div>';
                break;
            case "4":
                caption = "Yearly";
                form_content = '<div class="divborder"><input type="radio" class="inputed" name="Every_Years" value="every_years" /><span>Every</span> <select name="year_month" id=""><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5" selected>May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select> <select id="DaySelection"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31" SELECTED>31</option></select><br></div><div class="divborder"><input type="radio" class="inputed" name="Every_The_Month" value="every_the_Months" /><span>The</span>  <select name="Monthly_what" id="Monthly_what"><option value="First">First</option><option value="Second">Second</option><option value="Third">Thrid</option><option value="Fourth">Fourth</option><option value="Last" selected>Last</option></select> <select name="Weekly_Day" id="Weekly_Day"><option value="1" selected>Monday</option><option value="2">Tuesday</option><option value="3">Wednesday</option><option value="4">Thursday</option><option value="5">Friday</option><option value="6">Saturday</option><option value="7">Sunday</option></select> <span>of</span> <select name="" id=""><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5" selected>May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></div>';
                break;
            case "5":
                caption = "Misc";
                form_content = '<div class="divborder"><input type="radio" class="inputed" name="Every_5th_Sunday_of_Month" disabled="disabled" value="Every_5th_Sunday_of_Month" />Every 5th Sunday of Month<br></div><div class="divborder"><input type="radio" class="inputed" name="Every_Easter" disabled="disabled" value="every_Easter" />Every Easter</div>';
                break;
            default:
                caption = "default";
                form_content = "test Default";
        }
        $("#content").html(form_content);
        //$("#content").html(form_content + "<br><br>" + caption + "<br> - Load content div with option " + this.value);

    });

});


    </td>
</tr>
<tr  bgcolor="whitesmoke"><td><p>&nbsp;</p></td><td>
    <DIV ALIGN="left" id="Date_String_Input">
        <input type="text" name="date_string" size="75"  id="date_string">
    </DIV>

In the above code I'm trying to fill the textbox(date_string) with the values selected I've tried:

if ($('#Every_Days:checked').val() == 'true') {  
    alert("hello");
}
//$("#date_string").val("every ".$("#Every_Days_Amount").val());

and some other looked up posts

Jquery If radio button is checked

Find out if radio button is checked with JQuery?

Nothing seams to fire the event.

This is my doc ready in case its needed

<script type="text/javascript">
jQuery(document).ready(function () {
    $("#generate").val("Save Info");

    if ($('#Every_Days:checked').val() == 'true') {
        alert("hello");
    }

    jQuery("#dateTimeCustom").dynDateTime({
        showsTime: true,
        ifFormat: "%Y-%m-%d %H:%M:00",
        daFormat: "%a, %b %e, %Y [%I:%M %p]",
        align: "TL",
        electric: false,
        singleClick: false,
        displayArea: ".siblings('.dtcDisplayArea')",
        button: ".next()" //next sibling
    });
    jQuery("#dateTimeCustom2").dynDateTime({
        showsTime: true,
        ifFormat: "%Y-%m-%d %H:%M:00",
        daFormat: "%a, %b %e, %Y [%I:%M %p]",
        align: "TL",
        electric: false,
        singleClick: false,
        displayArea: ".siblings('.dtcDisplayArea2')",
        button: ".next()" //next sibling
    });

    $("radio[name='daterbSelection']").click(function () {
        alert('test');
        if ($(this).val() === 'r') {
            if ($(this).is(":checked")) {
                $("#r_date").show();
            }
        } else {
            $("#r_date").hide();
        }
    });
});

update: still not working stuff ive tried

$('#Every_Days').click(function () {
    var isChecked = $('#Every_Days').prop('checked');
    alert(isChecked);
});

$("#Every_Days").click(function () {
    alert("days");
    if ($("input:radio[name=Every_Days]").is(":checked")) {
        alert("hello");
        //$("#date_string").val("every ".$("#Every_Days_Amount").val());
    }
});

//$("#date_string").val("every ".$("#Every_Days_Amount").val());
//$('#date_string').val($('#Every_Days_Amount').val());

// works value to textbox - Pattern
//$('#date_string').val('5555');

//alert("hi: ".$('#Every_Days_Amount').val());

function XEvery_Days() {
    //some code
    alert("hello");
}

In the form output area:

form_content = '<div class="divborder"><input type="radio" title="ie every 2 days for every other day" class="inputed" name="Every_Days" id="Every_Days" value="every" onClick="XEvery_Days()" /><span>Every</span> <input type="text" size="1" name="Every_Days_Amount" id="Every_Days_Amount" value="2" /> <span>Day(s)</span><br /></div><div class="divborder"><input type="radio" class="inputed" name="Every_Dayweekday" disabled="disabled" value="every_weekday" /><span>Every Weekday</span></div>';

still trying to work this out - 8/30/13 i asked a friend and he sent me this saying it should work (he didn't have time to test nor can he help me for a month as hes going out of town) but it does not work. does nothing. maybe someone can help me figure out why not it looks like it should work new code:

                $('.inputed').live('click blur change', function() {
                    alert('hi');
                    window.container = '';
                    var container = '';
                    $(this).parents().each(function() {
                        var valueClass = $(this).attr("class");
                        if (valueClass == 'divborder') {
                            $(this).children().each(function() {
                                if ($(this).attr('type') != 'radio') {
                                    if ($(this).is('select')) {
                                        window.container += ' ' + $(this).find(":selected").text() + ' ';
                                    } else {
                                        window.container += ' ' + $(this).val();
                                        window.container += ' ' + $(this).text() + ' ';
                                    }
                                }
                            });
                        }
                    });
                    $("#date_string").val(window.container);
                });

            });

i did not update jsfiddle with new code as of 8/30/13 Latest jsfiddle {got the toggle to work for the form now}: http://jsfiddle.net/2p6qQ/9/

Upvotes: 0

Views: 1817

Answers (1)

Satyajit
Satyajit

Reputation: 3859

There were syntax errors in your fiddle so I fixed them & cleaned it up a bit. The result is here: http://jsfiddle.net/2p6qQ/12/. The click event is attached like this:

$(document).on('click', '#Every_Days', function (e) {
        if ($(this).is(":checked")) {
            alert("is checked");
        }
 });

Start reading about event delegates here: http://api.jquery.com/delegate/ which has since been superseded by .on().

Upvotes: 1

Related Questions