Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    16
    Thanks
    5
    Thanked 0 Times in 0 Posts

    autoselect a radio button based on a textbox value

    Hi,

    How do I get somethng like this out - Auto Select a Radio Button based on a textbox value -

    I have a textbox value that would generate the getday value ( 0 to 6 ), if its O or 1 - I want the Radio Button 2 to be selected, if its 2 to 6, I want Radio Button 3 to be selected

    This is my code,
    right now its returing the Myfunction is undefined error, I think I am not passing some parameters accurately. how do I solve it




    Code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Testdate.aspx.cs" Inherits="Test_Testdate" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    
    function myFunction()
    {
        
        var y = document.getElementById("TextBox2");
        var x = new Date(document.getElementById("TextBox1").value);
        var z01 = document.getElementById("RadioButton1");
        var z02 = document.getElementById("RadioButton2");
        var z03 = document.getElementById("RadioButton3");
        var x1 = x.getDay();
        y.value = x1;
        //alert(x.getDay());
        
        if(y=0||y=6);
        {
            z02.checked=true;
        }
        else 
        {
            z03.checked=true;
        }
    }
      
    </script>
    
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
            <asp:TextBox ID="TextBox1" runat="server" value="03/16/2013" onchange="myFunction()"></asp:TextBox>
            <button onclick="myFunction()">Try it</button>
    
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        </div>
        <asp:RadioButton ID="RadioButton1" value="1st" runat="server" Text="Public" />
        <asp:RadioButton ID="RadioButton2" value="2nd" runat="server" Text="Weekend" />
        <asp:RadioButton ID="RadioButton3" value="3rd" runat="server" Text="Normal" />
        </form>
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    This should do the trick:-

    Code:
    <form id ="myform">
    1 <input type = "radio" name = "rad1" id = "r1">
    2 <input type = "radio" name = "rad1" id = "r2">
    3 <input type = "radio" name = "rad1" id = "r3">
    <br>
    The day number today is <input type = "text"name = "daynum" id = "daynum" size = "1" readonly >
    </form>
    
    <script type = "text/javascript">
    
    var dy = new Date().getDay();
    document.getElementById("daynum").value = dy;
    if (dy < 2) {
    document.getElementById("r2").checked = true;
    }
    else {
    document.getElementById("r3").checked = true;
    }
    
    </script>
    Place the script right in front of the closing </body> tag.

    if(y=0||y=6); // does not comply with what you have asked for. But may be what you actually want - if today is Sunday or Saturday.


    var x = new Date(document.getElementById("TextBox1").value);
    value="03/16/2013" is not a valid Javascript date format.
    The correct format is var theDate = new Date(2013,2,12); // note that in Javascript the months are 0-11 so March is month 2.


    "Political langauge - and with variations this is true of all political parties from Conservatives to Anarchists - is designed to make lies sound truthful and murder respectable, and to give the appearance of solidity to pure wind". - George Orwell, English novelist and journalist, 1903-1950.
    Last edited by Philip M; 03-12-2013 at 01:44 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    cally0611 (03-13-2013)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    That ASP.NET code is bogus.

    The radio buttons need a GroupName property. And if you use that, then the code can get much simpler:
    Code:
    <html>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        </div>
        <asp:RadioButton GroupName="whatever" value="1st" runat="server" Text="Public" />
        <asp:RadioButton GroupName="whatever" value="2nd" runat="server" Text="Weekend" />
        <asp:RadioButton GroupName="whatever" value="3rd" runat="server" Text="Normal" />
        </form>
    <script type="text/javascript">
    (
      function( )
      {
           var form = document.getElementById("form1");
           var txt = document.getElementById("<%=TextBox2.clientID%>");
           txt.onchange = function( )
           {
               var dt = new Date( this.value ); // see below
               if ( dt.getDay() <= 1 ) 
               {
                   form.whatever[1].checked = true;
               } else {
                   form.whatever[2].checked = true;
               }
          }
      }
    )();
    </script>
    </body>
    </html>
    Note that whatever[x] designates one of the radio buttons, where x will start at zero. So whatever[1] *is* your 2nd radio button.

    As Philip pointed out, the correct way to get a date in JS is to use
    Code:
         var dt = new Date( year, month, day );
    As a practical matter, all browsers will accept the string "mm/dd/yyyy". But if you wanted to really careful about it, we could (and perhaps should) parse the input string and use the more correct way.

    ***********

    EDIT: Yes, I just tested this, as an ASP.NET page, and it worked. Using Chrome as the browser, no less.
    Last edited by Old Pedant; 03-12-2013 at 09:23 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cally0611 (03-13-2013)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    Oh, also as Philip pointed out: Weekend days in JS are 0 and 6. Not 0 and 1. Unless in your country Sunday and Monday are the weekend.

    So if you wanted 0 and 6, Sunday and Saturday, then this line:
    Code:
               if ( dt.getDay() <= 1 )
    would need to be something like
    Code:
               if ( dt.getDay() === 0 || dt.getDay() === 6 )
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cally0611 (03-13-2013)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    If anybody is curious, this is the HTML produced by the above ASP.NET code (the page was named "junk1.aspx"):
    Code:
    <html>
    <body>
        <form name="form1" method="post" action="junk1.aspx" id="form1">
    <div>
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTMyNTQyNzcxMWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgYFBWN0bDAwBQVjdGwwMAUFY3RsMDEFBWN0bDAxBQVjdGwwMgUFY3RsMDIGjmfeWG7SkY0bFpZMPGKpq56FpA==" />
    </div>
    
    <div>
    
    	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLs1p+2CwLs0fbZDALV4Mn4DQKE/PivCAKD/KivCE1P7uIEjVyH30b4tmJG8w5A8Vmn" />
    </div>
        <div>
            <input name="TextBox2" type="text" value="3/12/2013" id="TextBox2" />
        </div>
        <input id="ctl00" type="radio" name="whatever" value="1st" /><label for="ctl00">Public</label>
        <input id="ctl01" type="radio" name="whatever" value="2nd" /><label for="ctl01">Weekend</label>
        <input id="ctl02" type="radio" name="whatever" value="3rd" /><label for="ctl02">Normal</label>
        </form>
    <script type="text/javascript">
    (
      function( )
      {
           var form = document.getElementById("form1");
           var txt = document.getElementById("TextBox2");
           txt.onchange = function( )
           {
               var dt = new Date( this.value ); // see below
               if ( dt.getDay() <= 1 ) 
               {
                   form.whatever[1].checked = true;
               } else {
                   form.whatever[2].checked = true;
               }
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    cally0611 (03-13-2013)

  • #6
    New Coder
    Join Date
    Mar 2013
    Posts
    16
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi all

    Got it, this is my version, I have parsed the date to another format as well.
    Code:
    function myFunction1() 
    {
    
        var databox1 = document.getElementById("box1").value;
        var databox2 = document.getElementById("TextBox3");
        var databox3 = document.getElementById("TextBox4");
    
        var newDate = databox1.split('/');
        databox3.value = newDate[1] + "/" + newDate[0] + "/" + newDate[2];
    
        var newdatabox3 = new Date(databox3.value);
        var newdatabox3i = newdatabox3.getDay();
        databox2.value = newdatabox3i;
    
       var elements = document.getElementsByName("radio");
        if (databox2.value == "0" || databox2.value == "6") {
            document.getElementById('RadioButton1').checked = false;
            document.getElementById('RadioButton2').checked = true;
            document.getElementById('RadioButton3').checked = false;
        }
        else if (databox2.value != "0" || databox2.value != "6") {
            document.getElementById('RadioButton1').checked = false;
            document.getElementById('RadioButton2').checked = false;
            document.getElementById('RadioButton3').checked = true;
        }
    }
    Actually, the value of the textbox is chosen by a datetimepicker, then based on that value, the radio buttons would be selected, if the date falls on weekends, it would be Weekend, if its a normal day, then Normal.

    So now, I was thinking of getting the Public Holiday selected. What I have in mind would be cross checking the value in the textbox with a comma delimited text file.

    If it exists - autoselect Public Holiday,
    If it does not - check the value of the getday, if its 0 or 6, choose weekend otherwise normal.

    Please help....

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by cally0611 View Post
    So now, I was thinking of getting the Public Holiday selected. What I have in mind would be cross checking the value in the textbox with a comma delimited text file.

    If it exists - autoselect Public Holiday,
    If it does not - check the value of the getday, if its 0 or 6, choose weekend otherwise normal.
    Just set up an array containing the dates of Public Holidays. Loop through - if a match is found select the appropriate radio. If no match, check for day == 0 or day ==6. If so, select weekend radio.

    This is wrong:-

    else if (databox2.value != "0" || databox2.value != "6") {

    || should be &&. But just else { will do fine.
    Last edited by Philip M; 03-13-2013 at 11:31 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    So now, I was thinking of getting the Public Holiday selected. What I have in mind would be cross checking the value in the textbox with a comma delimited text file.
    ??? WHY WHY WHY?

    You are using ASP.NET, why not use a database?? MUCH better than a CSV file.

    If you don't want to post back to the server (though ASP.NET encourages you to do so), use AJAX.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Mar 2013
    Posts
    16
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi Old Pendant

    Actually, I am confused ..on using Javascript or asp.net. Its just that I have got the rest of it in javascript done. I was just thinking of adding this ajax code with the javascript.

    If I do use asp.net to do it, how will I be parsing the value to the javascript that I have created.

    Hi Philip M,

    I have found the ajax code to read the text file, here is the code
    Code:
    <script language="JavaScript" type="text/javascript">
        jQuery.get('Test1.txt', function (data) 
        {
            
            var mycars1 = new Array(data.split('<;>'));
    
            var i;
            for (i = 0; i < mycars1.length; i++) 
            {
                document.write(mycars1[i] + "<;>");
            }
    
        });
        
    </script>
    Is this right, thinking of how to merge it with my current javascript. How do I do that, my current javascript function is in an external file.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    Nope, that won't come close to working.

    You can't use document.write() in an AJAX function. You can't use it in *ANY* code that executes after the page is fully loaded. Period.

    Once again, if you are going to use AJAX, why not connect it to ASP.NET code and thus to a database??

    Code:
    function checkForHoliday( dateToTest )
    {
        jQuery.get('isHoliday.aspx?date=' + dateToTest, function (data) 
        {
            if ( data == "YES" ) { ...set your radio button to holiday... }
        });
    }
    And then have a dirt simple ASP.NET page that gets that date in its querystring, checks it against a calendar of holidays, and returns nothing but "YES" or "NO".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    As you are relying on Javascript I see no reason why you should not include the array of public holiday dates in your .js file. No need for Ajax or a database. However you do it you will still have to update the public holidays annually (or periodically).

    Code:
    <body onload = "whatday()">
    
    <script type = "text/javascript">
    
    function whatday() {
    
    var hols = ["January 1, 2013", "March 14, 2013", "October 13, 2013", "December 25, 2013", "January 1, 2014"];
    var d = "03/14/2013";  // date from your textbox - all browsers will accept this USA date format string mm/dd/yyyy
    var today = new Date(d);  // or of course just new Date() if today is required
    today.setHours(0,0,0,0);
    for (var i = 0; i < hols.length; i++) {
    var hdate = new Date(hols[i])
    if (today.getTime() == hdate.getTime()) {
    alert ("Today is a public holiday");
    // set radio button accordingly
    return false;
    }
    }
    
    var dy = today.getDay();
    if ((dy == 0) || (dy == 6)) {
    alert ("Today is a Saturday or Sunday");
    // set radio button accordingly
    }
    
    </script>
    Last edited by Philip M; 03-14-2013 at 10:06 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    I agree on this one. If you aren't going to do the whole enchilada, getting all holidays for the last 100 years and the next 100 years, then why bother with either a DB or CSV file? Just dump them directly into the JS code. Or, at a minimum, use a JS include.
    Code:
    <script type="text/javascript" src="arrayOfHolidays.js" />
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •