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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Appearing Paragraphs (forms)

    Hello,

    I am working on a web page at Jesse the Mentalist and want a client-side solution to make certain paragraphs of text appear based a date selected from option menus.

    It is probably easiest to see exactly what my goal by looking at that page. I just want it to show an astrology reading (along side of an astrology symbol) based on a birthday provided. Do you have any recommendations?

    Thank you.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,983
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    There seems to be a serious problem as when I select the day the month becomes blank, and when I select the year the month and day become blank. The reason is that you have several select lists all with the same name "cars". The values of the selects are the names of cars!!! Not dates!! That suggests to me that you have blindly copied the code from somewhere else and have no real idea of what you are doing.

    Fix this before we go any further.

    Do you really expect users born in 1901??

    You would do best to used AJAX to call up the relevant paragraphs. To be candid, I would recommend you hire a professional to do the work.

    One point would be ideal, but three would be better. - Commentator BBC Radio 5 Live
    Last edited by Philip M; 12-30-2013 at 09:00 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    if all you are doing is giving text related to people's zodiac sign then it's fair to assume you will only have 12 paragraphs to choose from, in which case AJAX may be overkill.

    if on the other hand you are providing a specific reading for each birthdate, that would make 40,880 paragraphs (112 years x 365 days) in which case AJAX (and a professional developer) is probably a good idea.

    as Philip says, the first thing to do is to fix your html. Next would be to decide which of the above two applies, or if you have some other thinking for this.

    Further to Philip's comments about your date ranges, I would say that the last couple of years are not really relevant in your case (unless you find a substantial number of newborns accessing your site) and also that reversing the order of the years shown - so that the most recent years come first on the list - will probably make navigation a little less annoying

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,983
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    What if your user chooses a birthdate of 31st February?

    I would suggest that you auto-populate your select lists as follows:-

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body>
    
    <form action="#" onsubmit="return false">
    <div align="center">
     <table border="0"><tr>
     <th>Select Date:</th> 
     <td><select id="months1" onclick="populateDays('days1',this.selectedIndex)"></select></td>
     <td><select id="days1"></select></td>
     <td><select id="years1"></select></td>
     </tr>
     </table>
     
    </div>
    </form>
    
    <script type="text/javascript">
    
    var now = new Date(1918,0,1); // you can use any date - here 1st January 1918
    
    onload = function() {
    populateMonths('months1',now.getMonth());	
    populateDays('days1',now.getMonth(),now.getDate());
    populateYears('years1',(now.getFullYear()),(now.getFullYear()+90));  // 90 years after first date
    }
    
    function populateMonths(IDS,mm) {
    var months = ['January','February','March','April','May','June', 'July','August','September','October','November','December'];
    document.getElementById(IDS).options.length = 0;
    for(var i=0; i<months.length; i++) {
    document.getElementById(IDS).options[i] = new Option(months[i],months[i],false,false);
    }
    document.getElementById(IDS).selectedIndex = mm;
    }
    
    function populateDays(IDS,mm,dd) {
    var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    document.getElementById(IDS).options.length = 0;
    for(var i=0; i<monthDays[mm]; i++) {
    document.getElementById(IDS).options[i] = new Option(i+1);
    }
    document.getElementById(IDS).selectedIndex = dd-1;
    }
    
    function populateYears(IDS,endYear,startYear) {		// show years most recent first
    for (var i=0; i<=(parseInt(startYear)-parseInt(endYear)); i++) {
    document.getElementById(IDS).options[i] = new Option(startYear-i);
    }	
    document.getElementById(IDS).selectedIndex = 0;  // 1st year displayed in list
    }
     
    </script>
    
    </body>
    </html>

    But if it is purely a question of 12 zodiac signs the year of birth is irrelevant. But presumably the "readings" change as the calendar advances. So the "reading" for a given birthdate next week will not be the same as that for this week. So I am guessing that there are 12 x 52 = 628 paragraphs.
    Last edited by Philip M; 12-30-2013 at 05:24 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jessementalist (01-01-2014)

  • #5
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    [QUOTE=Philip M;1382300]There seems to be a serious problem as when I select the day the month becomes blank, and when I select the year the month and day become blank. The reason is that you have several select lists all with the same name "cars". The values of the selects are the names of cars!!! Not dates!! That suggests to me that you have blindly copied the code from somewhere else and have no real idea of what you are doing.

    Fix this before we go any further.[.quote]

    Phillip, your post is predicated on a false assumption. You are assuming that I believe my current web page is supposed to be functional in its present state. I hesitate to take the whole "I'm right, you're wrong" overtone but I don't know any other way to put it. Your assumption is wrong. I will quote myself so you can see why.
    It is probably easiest to see exactly what my goal by looking at that page.
    I linked to the web page merely so you could see what my goal was, not because I believed it was supposed to be functional in its current state.

    I copied and pasted the "option" element lines very deliberately and for a justifiable reason; I did not want to manually type a line that is 80% identical over 100 times. I copied & pasted from w3schools.com with the intention of using Notepad++ to "Search and Replace" all of the values.

    What a condescending and irrationally presumptuous post! I'm done here.

  • #6
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    There seems to be a serious problem as when I select the day the month becomes blank, and when I select the year the month and day become blank. The reason is that you have several select lists all with the same name "cars". The values of the selects are the names of cars!!! Not dates!! That suggests to me that you have blindly copied the code from somewhere else and have no real idea of what you are doing.

    Fix this before we go any further.
    Phillip, your post is predicated on a false assumption. You are assuming that I believe my current web page is supposed to be functional in its present state. I hesitate to take the whole "I'm right, you're wrong" overtone but I don't know any other way to put it. Your assumption is wrong. I will quote myself so you can see why.
    Quote:
    It is probably easiest to see exactly what my goal by looking at that page.
    I linked to the web page merely so you could see what my goal was, not because I believed it was supposed to be functional in its current state.

    I copied and pasted the "option" element lines very deliberately and for a justifiable reason; I did not want to manually type a line that is 80% identical over 100 times. I copied & pasted from w3schools.com with the intention of using Notepad++ to "Search and Replace" all of the values.

    What a condescending and irrationally presumptuous post! I'm done here.

  • #7
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    There seems to be a serious problem as when I select the day the month becomes blank, and when I select the year the month and day become blank. The reason is that you have several select lists all with the same name "cars". The values of the selects are the names of cars!!! Not dates!! That suggests to me that you have blindly copied the code from somewhere else and have no real idea of what you are doing.

    Fix this before we go any further.
    Phillip, your post is predicated on a false assumption. You are assuming that I believe my current web page is supposed to be functional in its present state. I hesitate to take the whole "I'm right, you're wrong" overtone but I don't know any other way to put it. Your assumption is wrong. I will quote myself so you can see why.
    It is probably easiest to see exactly what my goal by looking at that page.
    I linked to the web page merely so you could see what my goal was, not because I believed it was supposed to be functional in its current state.

    I copied and pasted the "option" element lines very deliberately and for a justifiable reason; I did not want to manually type a line that is 80% identical over 100 times. I copied & pasted from w3schools.com with the intention of using Notepad++ to "Search and Replace" all of the values.

    What a condescending and irrationally presumptuous post! I'm done here.

    Moderator: Please delete the prior two posts. I triple-posted because I saw no "Edit" button and I made typos. This post is correct. Thank you.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,983
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    It is plain that, as I said, you have copied completely irrelevant code from somewhere and you do not have the slightest idea of what you are doing. You could easily have asked for a script to enable the user to select his birthday. But you will get no more help from me. Nor from anyone else when you have that juvenile attitude.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You say I don't have the slightest idea what I'm doing but I just coded this as an extension to the script you posted here and made a numerology reader from it.
    Code:
    function generateReading() {
    	var months = document.getElementById('months1').selectedIndex;
    	months = months + 1;
    	var days = document.getElementById('days1').selectedIndex;
    	days = days + 1;
    	var years = document.getElementById('years1').selectedIndex;
    	years = 2013 - years;
    	var monthsString = months.toString();
    	var daysString = days.toString();
    	var yearsString = years.toString();
    	if (monthsString.length > 1) {
    		for (var i = 1; i < monthsString.length; i++) {
    			months = Number(monthsString[i]) + Number(monthsString[i-1]);
    			monthsString = months.toString();
    		}
    	}
    	if (daysString.length > 1) {
    		for (var i = 1; i < daysString.length; i++) {
    			days = Number(daysString[i]) + Number(daysString[i-1]);
    			daysString = days.toString();
    		}
    	}
    	while (yearsString.length > 1) {
    		if (yearsString.length == 4) {
    			for (var i = 1; i < yearsString.length; i++) {
    				years = Number(yearsString[i+2]) + Number(yearsString[i+1]) + Number(yearsString[i]) + Number(yearsString[i-1]);
    				yearsString = years.toString();
    			}
    		}
    		if (yearsString.length == 3) {
    			for (var i = 1; i < yearsString.length; i++) {
    				years = Number(yearsString[i+1]) + Number(yearsString[i]) + Number(yearsString[i-1]);
    				yearsString = years.toString();
    			}
    		}
    		if (yearsString.length == 2) {
    			for (var i = 1; i < yearsString.length; i++) {
    				years = Number(yearsString[i]) + Number(yearsString[i-1]);
    				yearsString = years.toString();
    			}
    		}
    	}
    	var lifePathNumber = months + days + years;
    	var lifePathNumberString = String(lifePathNumber);
    	if (lifePathNumberString.length > 1) {
    		for (var i = 1; i <= lifePathNumberString.length; i++) {
    			lifePathNumber = Number(lifePathNumber[i]) + Number(lifePathNumber[i-1]);
    			lifePathNumberString = lifePathNumber.toString();
    		}
    	}
    	if (lifePathNumber == 1) {
    		document.getElementById('reading').innerHTML = "You are independent and possess qualities of leadership. Reading 1...";
    		document.getElementById('numerologySymbol').src = '1.jpg';
    	}
    	if (lifePathNumber == 2) {
    		document.getElementById('reading').innerHTML = "Reading 2...";
    		document.getElementById('numerologySymbol').src = '2.jpg';
    	}
    	if (lifePathNumber == 3) {
    		document.getElementById('reading').innerHTML = "Reading 3...";
    		document.getElementById('numerologySymbol').src = '3.jpg';
    	}
    	if (lifePathNumber == 4) {
    		document.getElementById('reading').innerHTML = "Reading 4...";
    		document.getElementById('numerologySymbol').src = '4.jpg';
    	}
    	if (lifePathNumber == 5) {
    		document.getElementById('reading').innerHTML = "Reading 5...";
    		document.getElementById('numerologySymbol').src = '5.jpg';
    	}
    	if (lifePathNumber == 6) {
    		document.getElementById('reading').innerHTML = "Reading 6...";
    		document.getElementById('numerologySymbol').src = '6.jpg';
    	}
    	if (lifePathNumber == 7) {
    		document.getElementById('reading').innerHTML = "Reading 7...";
    		document.getElementById('numerologySymbol').src = '7.jpg';
    	}
    	if (lifePathNumber == 8) {
    		document.getElementById('reading').innerHTML = "Reading 8...";
    		document.getElementById('numerologySymbol').src = '8.jpg';
    	}
    	if (lifePathNumber == 9) {
    		document.getElementById('reading').innerHTML = "Reading 9...";
    		document.getElementById('numerologySymbol').src = '9.jpg';
    	}
    }
    I'm certainly not claiming to be expert but I don't think it was fair or accurate to say I don't have the slightest idea what I'm doing, then suggest I should hire someone else (when I'm posting to come up with a coding strategy).

    Having said that, you are an amazing coder and have been an absolutely tremendous help in your second post. I promise you I'm typically not the type to come off unappreciative but you made a post that was condescending and I couldn't ignore it. I will happily PayPal you a payment for your code in the 2nd post if you send me your Email address.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,983
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by jessementalist View Post
    You say I don't have the slightest idea what I'm doing but I just coded this as an extension to the script you posted here and made a numerology reader from it.
    Code:
    function generateReading() {
    	var months = document.getElementById('months1').selectedIndex;
    	months = months + 1;
    	var days = document.getElementById('days1').selectedIndex;
    	days = days + 1;
    	var years = document.getElementById('years1').selectedIndex;
    	years = 2013 - years;
    	var monthsString = months.toString();
    	var daysString = days.toString();
    	var yearsString = years.toString();
    	if (monthsString.length > 1) {
    		for (var i = 1; i < monthsString.length; i++) {
    			months = Number(monthsString[i]) + Number(monthsString[i-1]);
    			monthsString = months.toString();
    		}
    	}
    	if (daysString.length > 1) {
    		for (var i = 1; i < daysString.length; i++) {
    			days = Number(daysString[i]) + Number(daysString[i-1]);
    			daysString = days.toString();
    		}
    	}
    	while (yearsString.length > 1) {
    		if (yearsString.length == 4) {
    			for (var i = 1; i < yearsString.length; i++) {
    				years = Number(yearsString[i+2]) + Number(yearsString[i+1]) + Number(yearsString[i]) + Number(yearsString[i-1]);
    				yearsString = years.toString();
    			}
    		}
    		if (yearsString.length == 3) {
    			for (var i = 1; i < yearsString.length; i++) {
    				years = Number(yearsString[i+1]) + Number(yearsString[i]) + Number(yearsString[i-1]);
    				yearsString = years.toString();
    			}
    		}
    		if (yearsString.length == 2) {
    			for (var i = 1; i < yearsString.length; i++) {
    				years = Number(yearsString[i]) + Number(yearsString[i-1]);
    				yearsString = years.toString();
    			}
    		}
    	}
    	var lifePathNumber = months + days + years;
    	var lifePathNumberString = String(lifePathNumber);
    	if (lifePathNumberString.length > 1) {
    		for (var i = 1; i <= lifePathNumberString.length; i++) {
    			lifePathNumber = Number(lifePathNumber[i]) + Number(lifePathNumber[i-1]);
    			lifePathNumberString = lifePathNumber.toString();
    		}
    	}
    	if (lifePathNumber == 1) {
    		document.getElementById('reading').innerHTML = "You are independent and possess qualities of leadership. Reading 1...";
    		document.getElementById('numerologySymbol').src = '1.jpg';
    	}
    	if (lifePathNumber == 2) {
    		document.getElementById('reading').innerHTML = "Reading 2...";
    		document.getElementById('numerologySymbol').src = '2.jpg';
    	}
    	if (lifePathNumber == 3) {
    		document.getElementById('reading').innerHTML = "Reading 3...";
    		document.getElementById('numerologySymbol').src = '3.jpg';
    	}
    	if (lifePathNumber == 4) {
    		document.getElementById('reading').innerHTML = "Reading 4...";
    		document.getElementById('numerologySymbol').src = '4.jpg';
    	}
    	if (lifePathNumber == 5) {
    		document.getElementById('reading').innerHTML = "Reading 5...";
    		document.getElementById('numerologySymbol').src = '5.jpg';
    	}
    	if (lifePathNumber == 6) {
    		document.getElementById('reading').innerHTML = "Reading 6...";
    		document.getElementById('numerologySymbol').src = '6.jpg';
    	}
    	if (lifePathNumber == 7) {
    		document.getElementById('reading').innerHTML = "Reading 7...";
    		document.getElementById('numerologySymbol').src = '7.jpg';
    	}
    	if (lifePathNumber == 8) {
    		document.getElementById('reading').innerHTML = "Reading 8...";
    		document.getElementById('numerologySymbol').src = '8.jpg';
    	}
    	if (lifePathNumber == 9) {
    		document.getElementById('reading').innerHTML = "Reading 9...";
    		document.getElementById('numerologySymbol').src = '9.jpg';
    	}
    }
    I'm certainly not claiming to be expert but I don't think it was fair or accurate to say I don't have the slightest idea what I'm doing, then suggest I should hire someone else (when I'm posting to come up with a coding strategy).

    Having said that, you are an amazing coder and have been an absolutely tremendous help in your second post. I promise you I'm typically not the type to come off unappreciative but you made a post that was condescending and I couldn't ignore it. I will happily PayPal you a payment for your code in the 2nd post if you send me your Email address.
    So why did you post that rubbish in your first post? You could have simply asked for a script to auto-populate date fields. You gave a very misleading impression of your capabilities.

    People who help out on these forums do not ask for any payment. If you wish you can make a donation to a charity of your choice.

    The script I posted in post#4 does not take account of leap years. Here is an improved and simplified version.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body>
    
    <form action="#" onsubmit="return false">
    <div align="center">
     <table border="0"><tr>
     <th>Select Birth Date:</th>
      <td><select id="years" onchange = "populateDays()"></select></td>
     <td><select id="mths" onchange="populateDays()"></select></td>
     <td><select id="days"></select></td>
     </tr>
     </table>
     </div>
    </form>
    
    <script type="text/javascript">
    
    var syr = new Date().getFullYear()-95;  // earliest date is 95 years ago from current year, alter to suit
    var startYear = new Date(syr,0,1); // you can use any date - here 1st January 1919
    
    onload = function() {
    populateYears((startYear.getFullYear()),(startYear.getFullYear()+90));  // 90 years after earliest date = 2009
    populateMonths();	
    populateDays();
    }
    
    function populateYears(endYear,startYear) {		// show most recent years first, i.e. reverse order
    for (var i=0; i<=(parseInt(startYear)-parseInt(endYear)); i++) {
    document.getElementById("years").options[i] = new Option(startYear-i);
    }	
    }
    
    function populateMonths() {
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    document.getElementById("mths").options.length = 0;
    for (var i=0; i<months.length; i++) {
    document.getElementById("mths").options[i] = new Option(months[i],months[i],false,false);
    }
    }
    
    function populateDays() {
    var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);  // days in each month
    var mm = document.getElementById("mths").selectedIndex;
    var yr = document.getElementById("years").value;
    var feb = new Date(yr, 1, 29).getMonth();  // is this year a leap year ?
    if (feb==1) {monthDays[1] = 29}  // yes, a leap year
    document.getElementById("days").options.length = 0;
    for (var i=0; i<monthDays[mm]; i++) {
    document.getElementById("days").options[i] = new Option(i+1);
    }
    }
    
    </script>
    
    </body>
    </html>
    Last edited by Philip M; 01-03-2014 at 07:08 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jessementalist (01-04-2014)

  • #11
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I decided to use the script from your second post in this thread and have finally gotten around to completing most of the CSS, mark-up, content, and images on the web page too.

    I understand the script in your most recent post accounts for leap years, so it has an advantage. It is coded cleanly and commented nicely as well, but I think I will stick with your excellent first script.

    If you're wondering my reasoning for preferring your first script: If someone chooses the day first and then the year, it resets the days to Day 1. I understand why you did this (not all months have the same number of days all years), but the date sequences (i.e. which order people write the date, month, and year) are different in different countries, so a person (in the US, for example, month comes before day) can be thrown off and not realize the field reset. I could change the order of the fields to work for the US but then it would be out of order for non-US countries. Moreover, having extra days in a month will not cause any problems because people know their own birthdate and will simply not choose the extra days in the month.

    Thanks for your efforts.
    Last edited by jessementalist; 01-04-2014 at 06:30 PM. Reason: typo in URL, simplifying language so it is easier to follow

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,983
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    As you say, horses for courses. There are many equally good ways of skinning a cat. You could simplify by showing 31 days for all months because as you say people know their own birthday and if they select February 31st Javascript will turn that into March 3rd - still within the range for that zodiac sign.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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