CodingForums.com - autoselect a radio button based on a textbox value

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - autoselect a radio button based on a textbox value (http://www.codingforums.com/showthread.php?t=289681)

cally0611

03-12-2013 08:14 AM

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>

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 (Post 1320135)

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

All times are GMT +1. The time now is 01:56 PM.