JavaScript to load TextBox in ASPX page

**CoolWhhhip** · 12-10-2015, 04:38 AM

So knowing all the common languages and never really having any need for JavaScript, I'm having issues with ASP PostBack.

I started using JavaScript to do things on the page so there's NO postback (thereby easily preserving any listbox selections, et. al.) which is more efficient and faster for the user, it's really starting to grow on me. Trouble is, and I should "Get A Book" but I'd rather learn as I go ... so ... I need to click a radio button from a list and depending on what is selected, fill a TextBox with the relevant information.

SO ... I have a schedule form. The shifts are set times, either 8 hours or 12 hours and the shift can start on one day and cascade into the next; pretty simple. Instead of having to type the date and time into the START and END boxes (tedious when scheduling 20-30 things at a time), I want to script a radio button list to autofill the text boxes for me.

So, here's what I have ...

In the <HEAD> section, inside the <script type="text/javascript" language="javascript"> block, I have...

Code:

function fcnSetMyStartEndDatesPlease() {
      var radioButtons = document.getElementsByName("rblMyShiftType");
      for (var x = 0; x < radioButtons.length; x++) {
        if (radioButtons[x].checked) {
          alert("You checked " + radioButtons[x].id);
        }
      }
    }

Now of course I'll expand this to calculate my dates ... but I can't even get it working on the most BASIC level ... as in...

In the ASPX page, I have...

HTML Code:

<input id="Radio1" type="radio" name="rblMyShiftType" value="1" onclick="fcnSetMyStartEndDatesPlease()"/>
<input id="Radio2" type="radio" name="rblMyShiftType" value="2" onclick="fcnSetMyStartEndDatesPlease()"/>
<input id="Radio3" type="radio" name="rblMyShiftType" value="3" onclick="fcnSetMyStartEndDatesPlease()"/>

THIS WORKS. The alert pops up the value I selected, awesome.

NOW ... when I add this (the 3 lines of red code below where I will start the logic to put the dates in), the alert pops up with the value selected, then the page hangs up and I have to force close the browser... (and NO I don't want it to say "hello" ... but it won't even load the box with a single word!) ... if I can just get this to work, I can do the rest, there's some stupid thing missing I suppose...

Code:

    function fcnSetMyStartEndDatesPlease() {
      var radioButtons = document.getElementsByName("rblMyShiftType");
      for (var x = 0; x < radioButtons.length; x++) {
        if (radioButtons[x].checked) {
          alert("You checked " + radioButtons[x].id);
        }
          if (x == 1) {
          var tbxMyStartDate = document.getElementById("tbxStartDate");
          tbxMyStartDate.value = "hello";
          }
        }
      }
    }

NOW ... I back it down to next to nothing ... and make a button that does this ...

Code:

function fcnThisIsFrustrating(){
          var tbxMyStartDate = document.getElementById("tbxStartDate");
          tbxMyStartDate.value = "hello";
}

Call this with a button, AND THIS WORKS ... it puts "hello" in the box.

WHAT THE HECK! I copy/paste the two lines of the fcnThisIsFrustrating code into the the fcnSetMyStartEndDatesPlease (inside the IF/THEN) and it completely hoses the browser on IE9, IE10, IE11 and FireFox 42.0, which are the only browsers I need for now to work.

The only answer is there's a problem in the IF/THEN operator ... but HOW?! You can't have an IF/THEN in a FOR loop in JavaScript? Then WHY THE HECK does the ALERT BOX WORK ... BUT NOT THE tbxMyStartDate.value assignment?

Thanks in advance.

**CoolWhhhip** · 12-10-2015, 09:30 AM

Well, thanks to all the help and advice out there, I fixed it! I went with buttons and it works perfectly.

In the <head></head> section, inside the <script type="text/javascript" language="javascript"></script> block, I have...

Code:

    function fcnSetMyShiftTimes(shiftType) {
      var tbxMyStartDate = document.getElementById('tbxTimeStart');
      var tbxMyEndDate = document.getElementById('tbxTimeEnd');
      if (shiftType == "Day8") {
        tbxMyStartDate.value = "8:00"; // These dudes work from 8:00 (8am) to 16:00 (4pm)
        tbxMyEndDate.value = "16:00";
      }
      if (shiftType == "Night8") {  // These folks work from 17:00 (5pm) to 1:00 (1am)
        tbxMyStartDate.value = "17:00";
        tbxMyEndDate.value = "1:00";
      }
      if (shiftType == "Day12") { // These eager beavers work from 1:00 (1am) to 13:00 (1pm)
        tbxMyStartDate.value = "1:00";
        tbxMyEndDate.value = "13:00";
      }
      if (shiftType == "Night12") { // These nut jobs work from 13:00 (1pm) to 1:00 (1am)
        tbxMyStartDate.value = "13:00";
        tbxMyEndDate.value = "1:00";
      }
      return false;
    }

Then, in the ASPX page, I have four buttons that make it easy to fill the form ...

HTML Code:

<asp:Button runat="server" ID="btnDay8Shift" Width="65" Text = "Day Shift (8)" Cssclass="btnMinimal" OnClientClick="return fcnSetMyShiftTimes('Day8');"/>
<asp:Button runat="server" ID="btnNight8Shift" Width="65" Text = "Night Shift (8)" Cssclass="btnMinimal" OnClientClick="return fcnSetMyShiftTimes('Night8');"/>
<asp:Button runat="server" ID="btnDay12Shift" Width="65" Text = "Day Shift (12)" Cssclass="btnMinimal" OnClientClick="return fcnSetMyShiftTimes('Day12');"/>
<asp:Button runat="server" ID="btnNight12Shift" Width="65" Text = "Night Shift (12)" Cssclass="btnMinimal" OnClientClick="return fcnSetMyShiftTimes('Night12');"/>

Just under the buttons on the form (the entire page is a form basically), I have the boxes...

HTML Code:

<asp:TextBox runat="server" ID="tbxTimeStart" Width="130" Text="Time Start"/>
<asp:TextBox runat="server" ID="tbxTimeEnd" Width="130" Text="Time End"/>

Next to the time boxes above there is a listbox with dates in it (basically a FOR loop that loads today and the next 30 days) and the selectedvalue from that listbox is added to the start time with the end time being a difference in hours between the start and end time.

Then, the date, the start time and the hours of the shift are sent to the database and a stored procedure calculates the full datetime values for both start and end times and posts it to the proper tables.

So ... problem solved! Note the return false; statement ... and the return in the OnClientClick event ... seems that helped to stop the hanging and kept the page from postback.

So ... THANKS everyone for your awesome ideas and help!!