radio button sets text box value

Question

$(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/

where is the element with `id="Every_Days"`? Maybe you could set up a jsfiddle for us to tinker with? — miah, Aug 23 '13 at 19:20
yeah i noticed that i was missing id= just now. i added id and still no joy — Johnny, Aug 23 '13 at 19:25
I also do not see an input with the name `rbSelection`. Can you set up a [fiddle](http://jsfiddle.net/)? — miah, Aug 23 '13 at 19:54
If you go to the jsfiddle, you can paste your html, javascript, and css in their respective frames. Then hit run, and it will try to generate the content(in the lower right frame). Once you've run it, you hit save and then paste the link back here. — miah, Aug 23 '13 at 20:06
the date calendar is not working but the problem area im having seams to be working - http://jsfiddle.net/2p6qQ/ — Johnny, Aug 23 '13 at 20:13
you loaded the language file, but not the calendar(plugin) script. — miah, Aug 23 '13 at 23:10
not needed for the part i need to fix i still haven't gotten it to fire right — Johnny, Aug 24 '13 at 01:24
even tried to add to the month selection and this is not working too
Last day of next Month — Johnny, Aug 24 '13 at 03:04
Well, to be quite frank, your page is a mess. You have noted "radio" in your title but don't show that markup in the question and it seems hidden in the fiddle, you need to isolate the portion you need help with. ISOLATE. FYI `font` tag should likely be a `span` with a `class="someclass"`, then use CSS to style it. You have your code mixed all over in the markup, put it in an external file and link that in, give yourself a semblance of chance to maintain this. To TRY to help, I created this fiddle of part of your code: http://jsfiddle.net/YTTfF/ - seems to be mostly functional. — Mark Schultheiss, Aug 26 '13 at 12:14
@ Mark Schultheiss, {http://jsfiddle.net/2p6qQ/9/}(click Recurring Dates checkbox) fiddle posted i made works, same function as yours. there is radio for input to. {form_content = ' — Johnny, Aug 28 '13 at 04:56

score 1 · Accepted Answer · answered Aug 30 '13 at 23:14

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

radio button sets text box value

1 Answers1