www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 26 of 26

Thread: [RESOLVED] Auto change field values after user changes something...?

  1. #16
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    Oh wow, I forgot I did that. Thanks!

    Ok, I changed it but it's not working.

    HTML Code:
    <tr class="evenTD tableTopRow">
    	<input type="hidden" name="id_1" value="3" />
        <td rowspan="2"><input type="checkbox" name="done_1" value="complete" onClick="javascript:return confirm('Warning!\n\nThis change is permanant. If you mark this task complete\nyou will need to ask the system administrator to reset\nthis task if you made a mistake or want it to show again.\n\nAre you sure you want to mark this task as completed?')" /></td>
        <td rowspan="3" class="leaderCol">Framing</td>
        <td class="datepicker"><input name="start_1" value="04/23/2012" class="orOddEven start"></td>
        <td><select name="person_1">
        	<option>No Person Assigned</option>
        </select></td>
        <td rowspan="3"><textarea name="notes_1" rows="3"></textarea></td>
    </tr>
    <tr class="evenTD">
        <td class="datepicker"><input type="button" value="Select" onclick="displayDatePicker('start_1', this);"></td>
        <td><select name="duration_1">
    		<option value="1">Same Day</option>
    		<option value="2">Task takes 2 Days</option>
    		<option value="3">Task takes 3 Days</option>
        </select></td>
    </tr>
    <tr class="oddTD">
            <td><input type="button" value="-" onclick="changeDate(1,'down')" class="incbutton"><input type="button" value="+" onclick="changeDate(1,'up')" class="incbutton"></td>
        <td colspan="2">Last Updated (N/A)</td>
    </tr>
    So the buttons are this:
    HTML Code:
    <input type="button" value="-" onclick="changeDate(1,'down')" class="incbutton"><input type="button" value="+" onclick="changeDate(1,'up')" class="incbutton">
    And the start-date box is this:
    HTML Code:
    <input name="start_1" value="04/23/2012" class="orOddEven start">
    Clicking + and - doesn't change the date at all... I'm not sure where I went wrong...

    Also, I was just thinking that it might even be better for the end-user if the +/- buttons would just alter the duration and have the start-date of all following tasks bumped, rather than just bumping start-dates... and it becomes further complicated by the fact that the start-date can be changed manually with the date-picker or input field.

    I don't know, I've got a monster migraine so I might even be talking nonsense right now.

  2. #17
    Join Date
    Nov 2010
    Posts
    1,085
    1: the loop starts at 0, so it would make more sense for your first up and down buttons to have onclicks like this:
    Code:
    <input type="button" value="-" onclick="changeDate(0,'down')" class="incbutton"><input type="button" value="+" onclick="changeDate(0,'up')" class="incbutton">
    2: you changed the class name of the start date inputs, so that loop should look like this:
    Code:
    for (var i = 0; i < flds.length; i++) {
    if (flds[i].className=="orOddEven start"){
    dateBoxes.push(flds[i])
    	} 
    }
    taking those changes into account, the following works fine:
    Code:
    <!DOCTYPE html>
     <html>
     <head>
     </head>
     <body>
     <tr class="evenTD tableTopRow">
    	<input type="hidden" name="id_1" value="3" />
        <td rowspan="2"><input type="checkbox" name="done_1" value="complete" onClick="javascript:return confirm('Warning!\n\nThis change is permanant. If you mark this task complete\nyou will need to ask the system administrator to reset\nthis task if you made a mistake or want it to show again.\n\nAre you sure you want to mark this task as completed?')" /></td>
        <td rowspan="3" class="leaderCol">Framing</td>
        <td class="datepicker"><input name="start_1" value="04/23/2012" class="orOddEven start"></td>
        <td><select name="person_1">
        	<option>No Person Assigned</option>
        </select></td>
        <td rowspan="3"><textarea name="notes_1" rows="3"></textarea></td>
    </tr>
    <tr class="evenTD">
        <td class="datepicker"><input type="button" value="Select" onclick="displayDatePicker('start_1', this);"></td>
        <td><select name="duration_1">
    		<option value="1">Same Day</option>
    		<option value="2">Task takes 2 Days</option>
    		<option value="3">Task takes 3 Days</option>
        </select></td>
    </tr>
    <tr class="oddTD">
            <td><input type="button" value="-" onclick="changeDate(0,'down')" class="incbutton"><input type="button" value="+" onclick="changeDate(0,'up')" class="incbutton"></td>
        <td colspan="2">Last Updated (N/A)</td>
    </tr>
    <script type="text/javascript">
    var dateBoxes=[];
    
    var flds=document.getElementsByTagName("input");
    for (var i = 0; i < flds.length; i++) {
    if (flds[i].className=="orOddEven start"){
    dateBoxes.push(flds[i])
    	} 
    }
    
    function changeDate(num,dir){
    var diff=dir=="up"?1:-1;
    for (var a = 0; a < dateBoxes.length; a++) {
    if(a>=num){
    var d=new Date(dateBoxes[a].value);
    d.setDate(d.getDate()+diff)
    dateBoxes[a].value=(d.getMonth()+1)+"/"+d.getDate()+"/"+d.getFullYear()
    			}
    		}
    	}
    
    </script>
     </body>
     </html>

  3. #18
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    Ok yes, I got it to work! Thank you so much.

    Now my issue is skipping weekends... Is there a way to "check if a Saturday" and skip to the following Monday instead? The schedule only works for a monday-friday and I completely forgot about that detail when I started on this..

    Also, I've eliminated the date-picker and the duration list... it's much simpler now which makes it super-easy for the end-user.

  4. #19
    Join Date
    Nov 2010
    Posts
    1,085
    yeah, but just to clarify...

    I'm guessing that that means that a project is due to start on a Friday and you click the up button once, the start date automatically goes to the next Monday and every other date does 3 days forward?

    EXCEPT if say the next project is due to start on a Friday, then it should get bumped the 3 days from the original bumping, but starting from the next Monday (so it would start on Thursday)

    OR being that it is due to start on the next workday, would it just get bumped to Monday?

    And in the case that it was due to start on a Tuesday, it just gets bumped to Friday?

    sorry to contribute to your migraine...

  5. #20
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    The first one... so if it gets set to "Friday" and someone adds one more then it'll say the following "Monday" and every other project after it should bump the same amount of days... Sort of like weekends don't exist.

    So if something took 2 business days and got put on a Friday, the next task would get put on Tuesday (so that Friday and Monday are the two days for that task) but if it was on a Thursday (thurs/fri) then the next task would start on a monday... but if the task was "+1" from Friday it would be the following monday...

    This means we'd have to check each additional task for a Friday to see if it gets bumped too...

  6. #21
    Join Date
    Nov 2010
    Posts
    1,085
    ... yes. but to be a little bit more concrete...

    4 tasks. originally they start
    Mon
    Wed
    Fri
    Thu (of the next week)

    so, Mon gets bumped to Wed. Wed gets bumped to Fri, Fri gets bumped to Wed and Thu gets bumped to Fri of the next week?

  7. #22
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    If each task is getting bumped 2 days, then:

    Monday bumps to Wednesday (Mon > Tue > Wed)
    Wednesday bumps to Friday (Wed > Thu > Fri)
    Friday bumps to Tuesday of the next week(Fri > Mon > Tue)
    Thursday bumps to Monday of the next week (Thu > Fri > Mon)

    Basically as if "Monday" comes directly after "Friday" and weekends don't exist.

  8. #23
    Join Date
    Nov 2010
    Posts
    1,085
    this seems to work. The starts array holds the initial start date for each project and how many days it will take. I added a loop at the bottom to show the date strings for testing 'cos it was hard to keep track of when the weekends were - I've commented it so that you can delete it later...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    
    <body onload="changeDate(0,'up')">
    <form name="myform">
    Task 1 start date: <input type="text" id="start0" class="start"/><input type="button" value="-" onclick="changeDate(0,'down')"/><input type="button" value="+" onclick="changeDate(0,'up')"/><div id="days0"></div><br>
    Task 2 start date: <input type="text" id="start1" class="start"/><input type="button" value="-" onclick="changeDate(1,'down')"/><input type="button" value="+" onclick="changeDate(1,'up')"/><div id="days1"></div><br>
    Task 3 start date: <input type="text" id="start2" class="start"/><input type="button" value="-" onclick="changeDate(2,'down')"/><input type="button" value="+" onclick="changeDate(2,'up')"/><div id="days2"></div><br>
    Task 4 start date: <input type="text" id="start3" class="start"/><input type="button" value="-" onclick="changeDate(3,'down')"/><input type="button" value="+" onclick="changeDate(3,'up')"/><div id="days3"></div><br>
    </form>
    <script type="text/javascript">
    var starts=[["4/16/2012",4], ["4/19/2012",5], ["4/24/2012",2], ["4/26/2012",8]];
    
    for (var a = 0; a < starts.length; a++) {
    document.getElementById("start"+a).value=starts[a][0];
    	}
    	
    function changeDate(num,dir){
    var diff=dir=="up"?1:-1;
    for (var a = 0; a < starts.length; a++) {
    var dateBox=document.getElementById("start"+a)
    if(a>=num){
    document.getElementById("days"+(a)).innerHTML=""
    tmp=[];
    len=starts[a][1];
    var fr=new Date(dateBox.value)
    for (var i = 0; i < len; i++) {
    if (dir=="down"&&i==0){
    fr.setDate(fr.getDate()-1);
    while (fr.getDay()==0||fr.getDay()==6){
    fr.setDate(fr.getDate()-1);
    dateBox.value=(fr.getMonth()+1)+"/"+fr.getDate()+"/"+fr.getFullYear()
    		}
    	}else{
    fr.setDate(fr.getDate()+1);
    while (fr.getDay()==0||fr.getDay()==6){
    fr.setDate(fr.getDate()+1);
    	}
    }
    tmp.push(fr.toDateString())
    			}
    d=new Date(tmp[0])
    dateBox.value=(d.getMonth()+1)+"/"+d.getDate()+"/"+d.getFullYear()
    if(a<starts.length-1){
    if(dir=="up"){
    end=new Date(tmp[tmp.length-1])
    document.getElementById("start"+(a+1)).value=(end.getMonth()+1)+"/"+end.getDate()+"/"+end.getFullYear()	
    				}
    			}
    for (var i = 0; i < tmp.length; i++) {	//remove this loop to get rid of dates message
    document.getElementById("days"+(a)).innerHTML+=tmp[i]+", "	
    				}
    			}
    		}
    	}	
    </script>
     </body>
     </html>

  9. #24
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    I can't help feeling like there should be something more simple we could do to accomplish the weekend-skipping... like maybe we could use the getday() function, and if it returns a Saturday (6) then add 2 extra days or something... it should work because it can only bump one day at a time, so there can be no "+4 days" -- instead there are 4 individual "+1 day"s so if the result becomes a Saturday, then we'd just "+2 days" and it would be a Monday...

    This is what I'm currently using -- complete with PHP to pull up the starting-dates -- which is pretty much what you gave me last time, with small tweaks like the class-name and the php to toss in the initial group of dates.

    HTML Code:
    <script type="text/javascript">
    var startDates=["<?php echo(implode('", "',$taskBump)); ?>"];
    var dateBoxes=[];
    
    var flds=document.getElementsByTagName("input");
    for (var i = 0; i < flds.length; i++) {
    if (flds[i].className=="orOddEven"){
    dateBoxes.push(flds[i])
    	} 
    }	
    
    for (var a = 0; a < dateBoxes.length; a++) {
    if (dateBoxes[a].value=startDates[a]){
    	}
    }
    
    function changeDate(num,dir){
    var diff=dir=="up"?1:-1;
    for (var a = 0; a < dateBoxes.length; a++) {
    if(a>=num){
    var d=new Date(dateBoxes[a].value);
    d.setDate(d.getDate()+diff)
    dateBoxes[a].value=(d.getMonth()+1)+"/"+d.getDate()+"/"+d.getFullYear()
    			}
    		}
    	}
    
    </script>
    I'm a beginner at JavaScript (I can't even call myself "novice" yet, I'm an infant at this) so I don't know how to integrate some kind of "check if saturday" bit that results in a +2... but it seems like that would do the trick...?

  10. #25
    Join Date
    Nov 2010
    Posts
    1,085
    that's basically what this bit does...
    Code:
    fr.setDate(fr.getDate()+1); //the next date in the task is one day after the last one
    while (fr.getDay()==0||fr.getDay()==6){ //while that date is a saturday or sunday
    fr.setDate(fr.getDate()+1); //push that date one day further
    pretty much everything else is there just to make sure the dates line up - that each project starts on the day after the previous one ended, unless the last one ended on a Friday, etc...

    it's quite likely there's a simpler way to do this, but this was the best I could come up with...

  11. #26
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265
    Thanks. And thanks for all your help.

    Do you see what I mean? I couldn't even see that in the code.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles