autoselect a radio button based on a textbox value

cally0611 · 03-12-2013, 08:14 AM

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>

Philip M · 03-12-2013, 11:55 AM

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.

Old Pedant · 03-12-2013, 09:15 PM

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.

Old Pedant · 03-12-2013, 09:17 PM

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 )

Old Pedant · 03-12-2013, 09:24 PM

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>

cally0611 · 03-13-2013, 09:15 AM

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

Philip M · 03-13-2013, 11:27 AM

Quote:

Originally Posted by cally0611

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.

Old Pedant · 03-13-2013, 08:31 PM

Quote:

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.

cally0611 · 03-14-2013, 01:55 AM

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.

Old Pedant · 03-14-2013, 03:14 AM

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".

Philip M · 03-14-2013, 08:29 AM

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>

Old Pedant · 03-14-2013, 08:43 PM

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" />