I'm trying to create a form for a silly little mad lib. After putting the form together I want to make sure that something from each section is selected. Each section passes the information to a varaible I created. I want to make sure something is always selected but have never done anything like this being new to coding. I tried to use the Required attribute but nothing came from this. If someone could give me a little push in the right direction that would be amazing.
<body>
<script language="JavaScript">
function generateMadLib() {
//Declaring and Initializing variables
var Hobbies = "";
var name ="";
var PersonalityTrait = "";
var ColorChoice = "";
var DayOrNight ="";
var theSelect;
var choice = 0;
var theOption;
var story = "";
/*
Retrieving Name
document.madLibForm.txtName
-- madLibForm matches the name of the <form> element.
-- txtName matches the name of the <input> element.
*/
name = document.madLibForm.txtName.value;
//Retrieving Hobbies
if (document.madLibForm.chkVideoGames.checked == true) {
Hobbies = "Video Games ";
} //end if
if (document.madLibForm.chkWorkingOut.checked == true) {
Hobbies += "Working Out ";
} //end if
if (document.madLibForm.chkReading.checked == true) {
Hobbies += "Reading ";
} //end if
if (document.madLibForm.chkNothing.checked == true) {
Hobbies += "Other ";
} //end if
//Retrieving Meal Type
if (document.madLibForm.DayOrNight[0].checked == true) {
DayOrNight = document.madLibForm.DayOrNight[0].value;
} else {
DayOrNight = document.madLibForm.DayOrNight[1].value;
} //end if
//Retrieving Personality trait
theSelect = document.madLibForm.Personality;
choice = theSelect.selectedIndex;
theOption = theSelect.options[choice];
PersonalityTrait = theOption.value;
//Retrieving Color choice
theSelect = document.madLibForm.FavoriteColor;
choice = theSelect.selectedIndex;
theOption = theSelect.options[choice];
ColorChoice = theOption.value;
/*
Create the story using the user input that was provided
*/
story = name + " such an odd name. Well " + name + " what kind of hobbies do you have? Oh I see you enjoy " + Hobbies +
". That's cool I personally enjoy playing video games and soccer so my hobbies are better than yours. It also seems you enjoy " + Hobbies +
" at " + DayOrNight + " that is strange, I enjoy the opposite time of day. Lets see what kind of personality you have. " + name +
" has " + PersonalityTrait + ". Wow finally something we have in common. Now lets see what color you picked. " + name +
" picked " + ColorChoice + ", and we are back to disagreeing again. Based on the answers you have given we can't be friends.";
document.madLibForm.story.value = story;
}
</script>
</head>
<h1>Mad Lib</h1>
Create a Mad-lib story by filling out the input controls listed.
<form name = "madLibForm">
<h3>Give a name, any name will do:</h3>
<input type = "text" name = "txtName" value = "">
<P>
<h3>what kind of hobbies do you have?:</h3>
<input type = "checkbox" name = "chkVideoGames" value = "Video Games">Video games<br>
<input type = "checkbox" name = "chkWorkingOut" value = "Working Out">Working out<br>
<input type = "checkbox" name = "chkReading" value = "Reading">Reading<br>
<input type = "checkbox" name = "chkNothing" value = "Other">Other<br>
<h3>Morning or Night</h3>
<input type = "radio" name = "DayOrNight" value = "Morning">Morning<br>
<input type = "radio" name = "DayOrNight" value = "Night">Night<br>
<P>
<h3>What kind of personality do you have?</h3>
<select name = "Personality">
<option value = ""></option>
<option value = "Shy">Shy</option>
<option value = "Outgoing">Outgoing</option>
<option value = "Crazy">Crazy</option>
</select>
<p>
<h3>Of the three which color do you prefer</h3>
<select name = "FavoriteColor">
<option value = ""></option>
<option value = "Red">Red</option>
<option value = "Blue">Blue</option>
<option value = "Yellow">Yellow</option>
</select>
<p>
<input type = "button" value = "Display Story" onClick = "generateMadLib()">
<p>
<h3>Mad-lib story:</h3>
<textarea name= "story" rows="20" cols="80" wrap>
</textarea>
<p/>
<input type="reset" value="Reset Mad-lib">
</form>
</body>
You can use HTML attributes on some form elements to force the user to select or input something. See the HTML select required attribute and HTML input required attribute.
This won't prohibit users from submitting the form with blank elements though, so you should always validate on the front end and the back end if you are submitting this to a server somewhere.