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 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2004
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with resetting form focus in script

    I have written a function to check that a date entered into an html form is a Monday and that then returns the date for the next Friday, the input format is dd/mm/yyyy.

    The function appears to work correctly except that if the date is not a Monday it does not return to the Input field, although it does give the alert.

    I am not proficient in Javascript so I would appreciate any help, or useful comments.

    I would also like to display the Friday date on the form, but only after the validation function has been successfully passed.

    The function is
    Code:
     function mondaycheck(datechosen, fridaydate) {
    	var parts = datechosen.split('/');
    	var passdate = new Date(parseInt(parts[2]),(parseInt(parts[1])-1),parseInt(parts[0]));
     	var thisDay=passdate.getDay();
    	var myDays= ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
    	var daychosen = myDays[thisDay];
    	if (daychosen != "Lundi")  {
     		alert('Must be Monday');
     		jaugeage.txtWeek.focus()
    		jaugeage.txtWeek.select()
     	}
    	var fridate = new Date(passdate.valueOf() + (4 * 24 * 60 * 60 * 1000));
    	var frdy = fridate.getDate();
    	var frmo = fridate.getMonth()+1;
    	var fryr = fridate.getFullYear();
    	if (frdy < 10) frdy = '0' + frdy;
    	if (frmo < 10) frmo = '0' + frmo;
    	var fridaydate = frdy+"/"+frmo+"/"+fryr;
    }
    the html to set the form is
    Code:
    	<form id="Jaugeage" action="process1.php" method="post" name="jaugeage" >
    and the input code is
    Code:
    <td><input type="text" size="12" maxlength="12" name="txtWeek" onblur="mondaycheck(this.value, this.form.txtFri);"/></td>		
    <td class="plu"><b><i>To:- </i>&nbsp;&nbsp;</b><input type="text" size=26 maxlength="24" name="txtset" tabindex="8" onkeypress="return handleEnter(this, event)" </td>
    It is after the To:-, in the second <td> that I want to display the value of txtFri but only after it has been set.

    Thanks

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    if (daychosen != "Lundi") {
    alert ('Must be Monday');
    jaugeage.txtWeek.value = "";
    jaugeage.txtWeek.select();
    jaugeage.txtWeek.focus();
    return false;
    }

    var fridaydate = frdy+"/"+frmo+"/"+fryr;
    document.jaugeage.txtset.value = fridaydate;
    }

  • #3
    New Coder
    Join Date
    Jul 2004
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the fast response

    I have changed the function as you suggested, however, after the alert is given the focus is still not returned to the txtWeek input, it goes to the txtset box.

    As to the second part where the value of txtset is set, I know this HTML but hopefully you can direct me, how can I display this, when there is a valid value, without using an input field.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by html_amnesiac View Post
    Thanks for the fast response

    I have changed the function as you suggested, however, after the alert is given the focus is still not returned to the txtWeek input, it goes to the txtset box.

    As to the second part where the value of txtset is set, I know this HTML but hopefully you can direct me, how can I display this, when there is a valid value, without using an input field.
    Well, it works for me and the focus is correctly returned to the txtWeek box.
    jaugeage.txtWeek.select();
    jaugeage.txtWeek.focus();


    Your supplementary question:-

    Use a <span> something like this:-

    <p>The Friday Date Is:- <span id="txtset"></span></p>

    and in your script:-

    document.getElementById('txtset').innerHTML = fridaydate;

  • #5
    New Coder
    Join Date
    Jul 2004
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help

    I'll play with it and see if something else is affecting the focus in my code

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Are you quite sure that you have copied the lines I gave you correctly?

    JavaScript is case sensitive - for some reason your textboxes are named opaquely as txtWeek (note the camel-case) and txtset - something like startDate and endDate would be much clearer.

    Or have you got a } in the wrong position? Just a guess.

  • #7
    New Coder
    Join Date
    Jul 2004
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have checked the code and it appears ok to me.

    I have changed the variable names for clarity

    I have made a stripped down version of the page, just including the function and the input line, but I still couldn't make the focus return to startDate. After the alert happens on this page the startDate variable is blanked and the address for the page, in IE, becomes highlighted in blue

    Here is the complete code for the stripped down page
    Code:
    <!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>
    <title>Test - Email Form Test</title>
    <meta name="Description" content="Test"></meta>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
    <meta name="robots" content="follow,all"></meta>
    <meta name="revisit-after" content="15 days"></meta>
    <meta http-equiv="imagetoolbar" content="no"></meta>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
    
    <script type="text/javascript">
    
    function mondaycheck(datechosen, fridaydate) {
    	var parts = datechosen.split('/');
    	var passdate = new Date(parseInt(parts[2]),(parseInt(parts[1])-1),parseInt(parts[0]));
     	var thisDay=passdate.getDay();
    	var myDays= ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
    	var daychosen = myDays[thisDay];
    	if (daychosen != "Lundi")  {
     		alert('Must be Monday');
    		jaugeage.startDate.value = "";
    		jaugeage.startDate.select();
    		jaugeage.startDate.focus();
    		return false;
     	}
    	var fridate = new Date(passdate.valueOf() + (4 * 24 * 60 * 60 * 1000));
    	var frdy = fridate.getDate();
    	var frmo = fridate.getMonth()+1;
    	var fryr = fridate.getFullYear();
    	if (frdy < 10) frdy = '0' + frdy;
    	if (frmo < 10) frmo = '0' + frmo;
    	var fridaydate = frdy+"/"+frmo+"/"+fryr;
    		document.getElementById('endDate').innerHTML = fridaydate;
    	return true
    }	
    </script>
    </head>
    
    <body>
    	<form id="Jaugeage" action="process1.php" method="post" name="jaugeage" >
    
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
    	<tr>
    		<td width="12%" class="bar" height="41">&nbsp;</td>
    		<td width="1%">&nbsp;</td>	
    		<td width="10%"><b><i>Week Starting</i></b></td>
    		<td width="10%"><input type="text" size="12" maxlength="12" name="startDate" onchange="mondaycheck(this.value, this.form.endDate);" /></td>		
    		<td width="10%"><b><i>To</i>&nbsp;&nbsp;</b><span id="endDate"></span></td>
    		<td width="57%">&nbsp;</td>	
    	</tr>
    
    </table>
    			</form>
    
    </body>
    </html>
    perhaps a different set of eyes can see what the problem is.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    It seems that there is a bug in IE which only shows up under certain conditions.

    Change this:-

    jaugeage.startDate.value = "";
    jaugeage.startDate.select();
    jaugeage.startDate.focus();
    return false;
    }

    To this:-

    jaugeage.startDate.value = "";
    function fieldFocus() {
    jaugeage.startDate.select();
    jaugeage.startDate.focus();
    return false;
    }
    setTimeout(fieldFocus, 100);
    }

  • #9
    New Coder
    Join Date
    Jul 2004
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry to be a pain but that didn't work.

    I put some more alerts into the function to track the progress but the only alert that shows is the original one about the Monday.

    Code:
    function mondaycheck(datechosen, fridaydate) {
    	var parts = datechosen.split('/');
    	var passdate = new Date(parseInt(parts[2]),(parseInt(parts[1])-1),parseInt(parts[0]));
     	var thisDay=passdate.getDay();
    	var myDays= ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
    	var daychosen = myDays[thisDay];
    	if (daychosen != "Lundi")  {
     		alert('Must be Monday');
    jaugeage.startDate.value = "";
    alert("startDate  " + startDate);
    function fieldFocus() {
    alert("focus  ");
    jaugeage.startDate.select();
    jaugeage.startDate.focus();
    return false;
    alert("false  ");
    }
    alert("timeout  ");
    setTimeout(fieldFocus, 100);
    }
    	var fridate = new Date(passdate.valueOf() + (4 * 24 * 60 * 60 * 1000));
    	var frdy = fridate.getDate();
    	var frmo = fridate.getMonth()+1;
    	var fryr = fridate.getFullYear();
    	if (frdy < 10) frdy = '0' + frdy;
    	if (frmo < 10) frmo = '0' + frmo;
    	var fridaydate = frdy+"/"+frmo+"/"+fryr;
    		document.getElementById('endDate').innerHTML = fridaydate;
    	return true
    }
    Am I right in presuming that the other alerts should show if the date is not a Monday

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    return false;
    alert("false ");

    The alert will never show as it is after the return statement.

    The following is working correctly;_

    <!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>
    <title>Test - Email Form Test</title>
    <meta name="Description" content="Test"></meta>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
    <meta name="robots" content="follow,all"></meta>
    <meta name="revisit-after" content="15 days"></meta>
    <meta http-equiv="imagetoolbar" content="no"></meta>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>

    <script type="text/javascript">

    function mondaycheck(datechosen, fridaydate) {
    var parts = datechosen.split('/');
    var passdate = new Date(parseInt(parts[2]),(parseInt(parts[1])-1),parseInt(parts[0]));
    var thisDay=passdate.getDay();
    var myDays= ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
    var daychosen = myDays[thisDay];
    if (daychosen != "Lundi") {

    function fieldFocus() {
    alert('Must be Monday');
    jaugeage.startDate.value = "";
    jaugeage.startDate.select();
    jaugeage.startDate.focus();
    return false;
    }
    setTimeout(fieldFocus , 100);

    }

    else {
    var fridate = new Date(passdate.valueOf() + (4 * 24 * 60 * 60 * 1000));
    var frdy = fridate.getDate();
    var frmo = fridate.getMonth()+1;
    var fryr = fridate.getFullYear();
    if (frdy < 10) frdy = '0' + frdy;
    if (frmo < 10) frmo = '0' + frmo;
    var fridaydate = frdy+"/"+frmo+"/"+fryr;
    document.getElementById('endDate').innerHTML = fridaydate;
    return true
    }
    }
    </script>
    </head>

    <body>
    <form id="Jaugeage" action="process1.php" method="post" name="jaugeage" >

    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
    <tr>
    <td width="12%" class="bar" height="41">&nbsp;</td>
    <td width="1%">&nbsp;</td>
    <td width="10%"><b><i>Week Starting</i></b></td>
    <td width="10%"><input type="text" size="12" maxlength="12" name="startDate" onchange="mondaycheck(this.value, this.form.endDate);" /></td>
    <td width="10%"><b><i>To</i>&nbsp;&nbsp;</b><span id="endDate"></span></td>
    <td width="57%">&nbsp;</td>
    </tr>

    </table>
    </form>

    </body>
    </html>
    Last edited by Philip M; 07-06-2007 at 07:05 PM.


  •  

    Posting Permissions

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