Text area not being rendered - javascript

I made a website that takes what you put into the text area and displays it to another text area below.
So what you do is once you go to the site you type in the text area. Once you are satisfied you need to tab out of the text box. Once you are tabbed out you should see the text you entered at the bottom of the site. Once it is in the rendered section you should be able to modify it by using javscript. You can change the color, font size etc with sliders. The site looks correct and seems to be fine but my text wont render. I think I am missing something in my html because I know the java-script is all correct. I think I may have a spelling error or something I am not catching. The html needs to match the javascript and I am too close to this see an error. All help is welcome, thanks!
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 6
Case Problem 3
WidgetMage
Author: James DuBois
Date: 4/14/2015
Filename: cssDemo.htm
Supporting files: back.png, cssForms.css, modernizr-1.5.js,
rundemo.js, wm.css, wmlogo.png
-->
<meta charset="UTF-8" />
<title>CSS Styles Demo</title>
<script src="modernizr-1.5.js"></script>
<script type="text/javascript"src="rundemo.js"></script>
<link href="wm.css" rel="stylesheet" type="text/css" />
<link href="cssforms.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="wmlogo.png" alt="WidgetMage" />
<nav class="horizontal">
<ul>
<li>Home</li>
<li>Tutorials</li>
<li>Widgets</li>
<li>Forums</li>
<li>Demos</li>
</ul>
</nav>
</header>
<nav class="vertical">
<ul>
<li class="newgroup">Home</li>
<li class="newgroup">Animations</li>
<li>Buttons</li>
<li>Calendars</li>
<li>Cookies</li>
<li>Drag & Drop</li>
<li>Image Tools</li>
<li>Icons</li>
<li>Layout Tools</li>
<li>List Boxes</li>
<li>Menus</li>
<li>Popups</li>
<li>Ribbons</li>
<li>Sliders</li>
<li>Spinners</li>
<li>Toolbars</li>
<li>Tooltips</li>
<li>Tree Views</li>
<li class="newgroup">Tutorials</li>
<li>Tips & Tricks</li>
<li>White Papers</li>
<li>User Forums</li>
<li>External Links</li>
<li class="newgroup">Demonstrations</li>
<li class="newgroup">Contact Us</li>
</ul>
</nav>
<section>
<h1>CSS Demo</h1>
<p>Select the CSS style values from the form below and preview the
effect on the sample text in the preview box.
</p>
<form>
<fieldset id="textstring">
<label>Enter your sample text below</label>
<textarea autofocus tabindex="1" wrap="hard" name="sampletext" id="sampletext">
</textarea>
</fieldset>
<fieldset id="fonts">
<legend>
Fonts
</legend>
<label for="fontfamily">Font Family</label>
<select id="fontfamily" name="fontfamily">
<optgroup label="generic">
<option value="default">default</option>
<option value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="monospace">monospace</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
</optgroup>
<optgroup label="specific">
<option value="Arial">Arial</option>
<option value="'Book Antiqua'">'Book Antiqua'</option>
<option value="'Courier New'">'Courier New'</option>
<option value="Geneva">Geneva</option>
<option value="Helvetica">Helvetica</option>
<option value="Impact">Impact</option>
<option value="Palatino">Palatino</option>
<option value="'Times New Roman'">'Times New Roman'</option>
</optgroup>
</select>
<label for="fontstyle">Font Style</label>
<select id="fontstyle" name="fontstyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<label for="fontweight">Font Weight</label>
<select id="fontweight" name="fontweight">
<option value="normal">normal</option>
<option value="bold">bold</option>
</select>
<label for="textdecoration">Text Decoration</label>
<select id="textdecoration" name="textdecoration">
<option value="none">none</option>
<option value="line-through">line-through</option>
<option value="overline">overline</option>
<option value="underline">underline</option>
</select>
<label for="texttransform">Text Transform</label>
<select id="texttransform" name="texttransform">
<option value="none">none</option>
<option value="capitalize">capitalize</option>
<option value="lowercase">lowercase</option>
<option value="uppercase">uppercase</option>
</select>
<label for="fontvariant">Font Variant</label>
<select id="fontvariant" name="fontvariant">
<option value="normal">normal</option>
<option value="small-caps">small-caps</option>
</select>
</fieldset>
<fieldset id="colors">
<legend>
Colors
</legend>
<label for="color">Font Color (hexadecimal)</label>
<input type="color" value="#000000" placeholder="#rrggbb" name="fontcolor" id="fontcolor">
<label for="color">Background Color (hexadecimal)</label>
<input type="color" value="#FFFFF" placeholder="#rrggbb" name="backgroundcolor" id="backgroundcolor">
</fieldset>
<fieldset id="sizes">
<legend>
Sizes
</legend>
<label>Font Size (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="fontsize" id="fontsize">
<label>Letter Spacing (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="letterspacing" id="letterspacing">
<label>Word Spacing (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="wordspacing" id="wordspacing">
<label>Line Height (em)</label>
<input type="range" value="1" min="0" max="4" step="0.2" name="lineheight" id="lineheight">
<label>Text Indent (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="textindent" id="textindent">
</fieldset>
<button type="button" id="removestyles">Remove Styles</button>
</form>
<h2>Rendered Text</h2>
<div id="output"></div>
</section>
</body>
</html>
JAVASCRIPT
/*
New Perspectives on HTML and CSS
Tutorial 6
Case Problem 3
Author: Anna Lopez
Date: 3/1/2014
Filename: rundemo.js
Purpose: The purpose of this program is to update the
appearance of the rendered text based on the styles
selected by the user from the form.
*/
function updatePreview() {
formStyles=document.forms[0];
inputtext=formStyles.sampletext.value;
previewobject=document.getElementById("output");
previewobject.innerHTML=inputtext.replace(/\n/g,"<br />");
ffi=formStyles.fontfamily.selectedIndex;
previewobject.style.fontFamily=formStyles.fontfamily.options[ffi].text;
fsi=formStyles.fontstyle.selectedIndex;
previewobject.style.fontStyle=formStyles.fontstyle.options[fsi].text;
fwi=formStyles.fontweight.selectedIndex;
previewobject.style.fontWeight=formStyles.fontweight.options[fwi].text;
tdi=formStyles.textdecoration.selectedIndex;
previewobject.style.textDecoration=formStyles.textdecoration.options[tdi].text;
tti=formStyles.texttransform.selectedIndex;
previewobject.style.textTransform=formStyles.texttransform.options[tti].text;
fvi=formStyles.fontvariant.selectedIndex;
previewobject.style.fontVariant=formStyles.fontvariant.options[fvi].text;
previewobject.style.color=formStyles.color.value;
previewobject.style.backgroundColor=formStyles.backgroundcolor.value;
previewobject.style.fontSize=formStyles.fontsize.value + "px";
previewobject.style.letterSpacing=formStyles.letterspacing.value+"px";
previewobject.style.wordSpacing=formStyles.wordspacing.value+"px";
previewobject.style.lineHeight=formStyles.lineheight.value+"em";
previewobject.style.textIndent=formStyles.textindent.value+"px";
}
window.onload=function() {
formStyles=document.forms[0];
formStyles.fontfamily.onchange=updatePreview;
formStyles.fontstyle.onchange=updatePreview;
formStyles.fontweight.onchange=updatePreview;
formStyles.textdecoration.onchange=updatePreview;
formStyles.texttransform.onchange=updatePreview;
formStyles.fontvariant.onchange=updatePreview;
formStyles.color.onchange=updatePreview;
formStyles.backgroundcolor.onchange=updatePreview;
formStyles.fontsize.onchange=updatePreview;
formStyles.letterspacing.onchange=updatePreview;
formStyles.wordspacing.onchange=updatePreview;
formStyles.lineheight.onchange=updatePreview;
formStyles.textindent.onchange=updatePreview;
formStyles.textstring.onchange=updatePreview;
document.getElementById("removestyles").onclick = redo;
}
function redo() {
window.location.reload();
}

The console tells you where your problem is:
Uncaught TypeError: Cannot set property 'onchange' of undefined
on line:
formStyles.color.onchange=updatePreview;
change to:
formStyles.fontcolor.onchange=updatePreview;
then we get:
Uncaught TypeError: Cannot read property 'value' of undefined
on line:
previewobject.style.color=formStyles.color.value;
change to:
previewobject.style.color=formStyles.fontcolor.value;
function updatePreview() {
formStyles=document.forms[0];
inputtext=formStyles.sampletext.value;
previewobject=document.getElementById("output");
previewobject.innerHTML=inputtext.replace(/\n/g,"<br />");
ffi=formStyles.fontfamily.selectedIndex;
previewobject.style.fontFamily=formStyles.fontfamily.options[ffi].text;
fsi=formStyles.fontstyle.selectedIndex;
previewobject.style.fontStyle=formStyles.fontstyle.options[fsi].text;
fwi=formStyles.fontweight.selectedIndex;
previewobject.style.fontWeight=formStyles.fontweight.options[fwi].text;
tdi=formStyles.textdecoration.selectedIndex;
previewobject.style.textDecoration=formStyles.textdecoration.options[tdi].text;
tti=formStyles.texttransform.selectedIndex;
previewobject.style.textTransform=formStyles.texttransform.options[tti].text;
fvi=formStyles.fontvariant.selectedIndex;
previewobject.style.fontVariant=formStyles.fontvariant.options[fvi].text;
previewobject.style.color=formStyles.fontcolor.value;
previewobject.style.backgroundColor=formStyles.backgroundcolor.value;
previewobject.style.fontSize=formStyles.fontsize.value + "px";
previewobject.style.letterSpacing=formStyles.letterspacing.value+"px";
previewobject.style.wordSpacing=formStyles.wordspacing.value+"px";
previewobject.style.lineHeight=formStyles.lineheight.value+"em";
previewobject.style.textIndent=formStyles.textindent.value+"px";
}
window.onload=function() {
formStyles=document.forms[0];
formStyles.fontfamily.onchange=updatePreview;
formStyles.fontstyle.onchange=updatePreview;
formStyles.fontweight.onchange=updatePreview;
formStyles.textdecoration.onchange=updatePreview;
formStyles.texttransform.onchange=updatePreview;
formStyles.fontvariant.onchange=updatePreview;
formStyles.fontcolor.onchange=updatePreview;
formStyles.backgroundcolor.onchange=updatePreview;
formStyles.fontsize.onchange=updatePreview;
formStyles.letterspacing.onchange=updatePreview;
formStyles.wordspacing.onchange=updatePreview;
formStyles.lineheight.onchange=updatePreview;
formStyles.textindent.onchange=updatePreview;
formStyles.textstring.onchange=updatePreview;
document.getElementById("removestyles").onclick = redo;
}
function redo() {
window.location.reload();
}
<body>
<section>
<h1>CSS Demo</h1>
<p>Select the CSS style values from the form below and preview the
effect on the sample text in the preview box.
</p>
<form>
<fieldset id="textstring">
<label>Enter your sample text below</label>
<textarea autofocus tabindex="1" wrap="hard" name="sampletext" id="sampletext">
</textarea>
</fieldset>
<fieldset id="fonts">
<legend>
Fonts
</legend>
<label for="fontfamily">Font Family</label>
<select id="fontfamily" name="fontfamily">
<optgroup label="generic">
<option value="default">default</option>
<option value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="monospace">monospace</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
</optgroup>
<optgroup label="specific">
<option value="Arial">Arial</option>
<option value="'Book Antiqua'">'Book Antiqua'</option>
<option value="'Courier New'">'Courier New'</option>
<option value="Geneva">Geneva</option>
<option value="Helvetica">Helvetica</option>
<option value="Impact">Impact</option>
<option value="Palatino">Palatino</option>
<option value="'Times New Roman'">'Times New Roman'</option>
</optgroup>
</select>
<label for="fontstyle">Font Style</label>
<select id="fontstyle" name="fontstyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<label for="fontweight">Font Weight</label>
<select id="fontweight" name="fontweight">
<option value="normal">normal</option>
<option value="bold">bold</option>
</select>
<label for="textdecoration">Text Decoration</label>
<select id="textdecoration" name="textdecoration">
<option value="none">none</option>
<option value="line-through">line-through</option>
<option value="overline">overline</option>
<option value="underline">underline</option>
</select>
<label for="texttransform">Text Transform</label>
<select id="texttransform" name="texttransform">
<option value="none">none</option>
<option value="capitalize">capitalize</option>
<option value="lowercase">lowercase</option>
<option value="uppercase">uppercase</option>
</select>
<label for="fontvariant">Font Variant</label>
<select id="fontvariant" name="fontvariant">
<option value="normal">normal</option>
<option value="small-caps">small-caps</option>
</select>
</fieldset>
<fieldset id="colors">
<legend>
Colors
</legend>
<label for="color">Font Color (hexadecimal)</label>
<input type="color" value="#000000" placeholder="#rrggbb" name="fontcolor" id="fontcolor">
<label for="color">Background Color (hexadecimal)</label>
<input type="color" value="#FFFFF" placeholder="#rrggbb" name="backgroundcolor" id="backgroundcolor">
</fieldset>
<fieldset id="sizes">
<legend>
Sizes
</legend>
<label>Font Size (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="fontsize" id="fontsize">
<label>Letter Spacing (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="letterspacing" id="letterspacing">
<label>Word Spacing (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="wordspacing" id="wordspacing">
<label>Line Height (em)</label>
<input type="range" value="1" min="0" max="4" step="0.2" name="lineheight" id="lineheight">
<label>Text Indent (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="textindent" id="textindent">
</fieldset>
<button type="button" id="removestyles">Remove Styles</button>
</form>
<h2>Rendered Text</h2>
<div id="output"></div>
</section>
</body>
</html>

Just to add to DTing's answer, to help you check bugs like these, you could hit F12 and reload your page. Check for errors in the Console tab, in this case:
Uncaught TypeError: Cannot set property 'onchange' of undefined
You could also check the Source tab, that would give you a hint on where the error is.
*No rep to comment

Related

Search box with dropdown options

I want to make a search box almost like this one https://roxburylibrary.org/ this is what I have done https://jsfiddle.net/fkjow82y/ the issue is it is not searching when a different option gets selected.
<script type="text/javascript">
function dosearch() {
var sf=document.catalogSearch;
var submit = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.keyword.value);
window.location.href = submit;
return false;
}
</script>
Index 0 contains the URL, since the other indexes contain other values, the error occurs. Below the correct code.
<p>
<script type="text/javascript">
function dosearch() {
var urlSubmit = "https://catalog.mainlib.org/search/searchresults.aspx?ctx=31.1033.0.0.6&type=Keyword";
var sf=document.catalogSearch;
if(sf.keyword.value!=""){
urlSubmit += "&term=" + escape(sf.keyword.value);
}
if(sf.sengines.selectedIndex > 0){
urlSubmit += "&by=" + sf.sengines.options[sf.sengines.selectedIndex].value;
}
window.location.href = urlSubmit;
return false;
}
</script>
</p>
<div class="floatright headerright">
<div class="top_search">
<div class="searcht">
<ul>
<li><a class="selected" href="#searchtab1">Search Catalog</a></li>
<li>Search Databases</li>
<li>Search Website</li>
</ul>
<div id="searchtab1" style="display: block;">
<form name="catalogSearch" id="catalogSearch" target="_blank" onsubmit="return dosearch()"class="searchform">
<input type="text" name="keyword" type="text" placeholder="Search" value=""/>
<select class="catalogselect" name="sengines"id="SearchBy">
<option selected="selected" value="" target="_blank">Any Field</option>
<option value="TI">Title</option>
<option value="AU">Author</option>
<option value="SU">Subject</option>
<option value="NOTE">General notes</option>
<option value="PUB">Publisher</option>
<option value="GENRE">Genre</option>
<option value="SE">Series</option>
<option value="ISBN">ISBN</option>
<option value="ISSN">ISSN</option>
<option value="LCCN">LCCN</option>
<option value="PN">Publisher No.</option>
<option value="SUDOC">SuDoc</option>
<option value="CODEN">CODEN</option>
<option value="STRN">STRN</option>
</select><input type="submit" name="btnG" class="searchsubmit" value="Go" /></form></div>
</div>
</div>
<div id="searchtab2">
<form class="searchform" action="https://roxburylibrary.org/collections-resources/databases/" method="POST">
<select name="subjectid" class="databaseselect">
<option class="inputbox2" value="business-resources" >Business Resources</option>
<option class="inputbox2" value="ematerials-ebooks-audio-books-videos" >eMaterials - eBooks, Audio Books, Videos</option>
<option class="inputbox2" value="health-and-science-resources" >Health and Science Resources</option>
<option class="inputbox2" value="history-and-geneaology-resources" >History and Geneaology Resources</option>
<option class="inputbox2" value="job-and-career-help" >Job and Career Help</option>
<option class="inputbox2" value="languages" >Languages</option>
<option class="inputbox2" value="literature-resources" >Literature Resources</option>
<option class="inputbox2" value="magazines-newspapers" >Magazines & Newspapers</option>
</select>
<input class="searchsubmit" type="submit" value="Go"/>
<input type="hidden" name="catsearch" value="1"/>
</form>
</div>
<div id="searchtab3">
<p>
<script type="text/javascript">
function dosearchweb() {
var sf=document.websearch;
var submit = sf.sengine.options[sf.sengine.selectedIndex].value + escape(sf.keyword.value);
window.location.href = submit;
return false;
}
</script>
</p>
<form name ="websearch"class="searchform" target="_blank" onsubmit="return dosearchweb()" name="sengine">
<input type="text" name="keyword" type="text" placeholder="Search this Website..." value="" target="_blank" />
<select class="catalogselect" name="sengine"id="SearchBy">
<option selected="selected" value="https://roxburylibrary.org//?s=" target="_blank"></option>
<input type="submit" class="searchsubmit" value="Go" />
</form>
</select>
</div>
</div>
</div>

Use noUiSlider with this form

I'm in over my head with this stuff - I'm looking to make noUiSlider (http://refreshless.com/nouislider/) work with the following form. I want to have a slider for the Minimum and Maximum price values in the form, where the slider moves up in increments of $10,000. Is this possible?
<script type="text/javascript" src="http://idx.myrealpage.com/js/weblets/omnibox_wp.js"></script>
<div class="unibox-search unibox-search-regular">
<div class="unibox-label">
Enter city, area, postal code or MLS(r) number:
</div>
<div class="unibox-text-field">
<input type="text" onkeydown="uniboxKeyDown(event,this)" onkeyup="uniboxKeyUp(event,this)" placeholder="Enter city, area, postal code or MLS(r) number" class="unibox-field">
<button onclick="return uniboxSubmitted(this)" name="unibox-run" class="unibox-submit">Search</button>
</div>
<div class="unibox-controls">
<select onchange="runUniboxHits(this)" name="unibox-bedrooms" class="unibox-bedrooms">
<option value="">--- Bedrooms ---</option>
<option value="1">Min. 1 bedroom</option>
<option value="2">Min. 2 bedrooms</option>
<option value="3">Min. 3 bedrooms</option>
<option value="4">Min. 4 bedrooms</option>
<option value="5">Min. 5 bedrooms</option>
</select>
<select onchange="runUniboxHits(this)" name="unibox-bathrooms" class="unibox-bathrooms">
<option value="">--- Bathrooms ---</option>
<option value="2.0">Min. 2 bathrooms</option>
<option value="3.0">Min. 3 bathrooms</option>
<option value="4.0">Min. 4 bathrooms</option>
<option value="5.0">Min. 5 bathrooms</option>
</select>
</div>
<input type="text" class="unibox-price-min" placeholder="Min Price" onfocus="uniboxResetHint('Min Price',false,this);" onblur="uniboxResetHint('Min Price',true,this);" value="Min Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)">
<input type="text" class="unibox-price-max" placeholder="Max Price" onfocus="uniboxResetHint('Max Price',false,this);" onblur="uniboxResetHint('Max Price',true,this);" value="Max Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)">
</div>
<div class="unibox-quick-summary-line">
<span class="unibox-quick-summary"></span><span> </span>
</div>
<input type="hidden" value="recip" class="unibox-search-context" name="recip">
<input type="hidden" value="1" class="unibox-search-region" name="34">
<input type="hidden" value="29619" class="unibox-search-account" name="26743">
<input type="hidden" value="http://firsthomeplan.ca/propertylistings" class="unibox-search-result-page" name="/fairrealty/listings/">
<input type="hidden" value="AUTO" class="unibox-search-listing-type" name="AUTO">
</div>
jQuery(document).ready(function() {
$("#slider").noUiSlider({
start: [0, 1000000],
step: 10000,
connect: true,
range: {
'min': 0,
'max': 1000000
}
});
$("#slider").on('slide', function(event, values) {
$("input.unibox-price-min").val(values[0]);
$("input.unibox-price-max").val(values[1]);
});
});
#slider {
margin: 20px;
width: 70%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script src="https://raw.githubusercontent.com/leongersen/libLink/master/jquery.liblink.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
<script type="text/javascript" src="http://idx.myrealpage.com/js/weblets/omnibox_wp.js"></script>
<div class="unibox-search unibox-search-regular">
<div class="unibox-label">
Enter city, area, postal code or MLS(r) number:
</div>
<div class="unibox-text-field">
<input type="text" onkeydown="uniboxKeyDown(event,this)" onkeyup="uniboxKeyUp(event,this)" placeholder="Enter city, area, postal code or MLS(r) number" class="unibox-field">
<button onclick="return uniboxSubmitted(this)" name="unibox-run" class="unibox-submit">Search</button>
</div>
<div class="unibox-controls">
<select onchange="runUniboxHits(this)" name="unibox-bedrooms" class="unibox-bedrooms">
<option value="">--- Bedrooms ---</option>
<option value="1">Min. 1 bedroom</option>
<option value="2">Min. 2 bedrooms</option>
<option value="3">Min. 3 bedrooms</option>
<option value="4">Min. 4 bedrooms</option>
<option value="5">Min. 5 bedrooms</option>
</select>
<select onchange="runUniboxHits(this)" name="unibox-bathrooms" class="unibox-bathrooms">
<option value="">--- Bathrooms ---</option>
<option value="2.0">Min. 2 bathrooms</option>
<option value="3.0">Min. 3 bathrooms</option>
<option value="4.0">Min. 4 bathrooms</option>
<option value="5.0">Min. 5 bathrooms</option>
</select>
</div>
<input type="text" class="unibox-price-min" placeholder="Min Price" onfocus="uniboxResetHint('Min Price',false,this);" onblur="uniboxResetHint('Min Price',true,this);" value="Min Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)"
/>
<input type="text" class="unibox-price-max" placeholder="Max Price" onfocus="uniboxResetHint('Max Price',false,this);" onblur="uniboxResetHint('Max Price',true,this);" value="Max Price" onkeyup="uniboxKeyUp(event,this)" onkeydown="uniboxKeyDown(event,this)"
/>
<div id="slider"></div>
</div>
<div class="unibox-quick-summary-line">
<span class="unibox-quick-summary"></span><span> </span>
</div>
<input type="hidden" value="recip" class="unibox-search-context" name="recip">
<input type="hidden" value="1" class="unibox-search-region" name="34">
<input type="hidden" value="29619" class="unibox-search-account" name="26743">
<input type="hidden" value="http://firsthomeplan.ca/propertylistings" class="unibox-search-result-page" name="/fairrealty/listings/">
<input type="hidden" value="AUTO" class="unibox-search-listing-type" name="AUTO">
</div>

jQuery select to make HTML DIV visable

The HTML:
<select name="reports" id="sr">
<option value="">Select Report...</option>
<option value="avg" class="1">Average Sold</option>
<option value="mma" class="1">Min|Max|Avg Sold</option>
<option value="oh" class="2">On Hand Qty</option>
<option value="mr" class="2">Money Report</option>
</select>
<div id='1' class='box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>
The jQuery:
$(document).ready(function () {
$('#1').hide();
$('#sr').change(function () {
$('#'+$(this).val()).show();
});
});
I am trying to get this to function where when the avg or min, max, avg reports are selected in the select box, the DIV to enter the dates will become visible.
As of right now the page loads with the DIV hidden but it never become visible.
Thanks in advance.
You need to look at the accepted option, you can not use the value like you are doing.
$(document).ready(function () {
$('.region').hide();
$('#sr').change(function () {
$(".region").hide();
var region = $(this).find("option:selected").data("region");
$('#'+region).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reports" id="sr">
<option value="">Select Report...</option>
<option value="avg" data-region="1">Average Sold</option>
<option value="mma" data-region="1">Min|Max|Avg Sold</option>
<option value="oh" data-region="2">On Hand Qty</option>
<option value="mr" data-region="2">Money Report</option>
</select>
<div id='1' class='region box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date: <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>
<div id='2' class='region'>
2
</div>

Html/ javascript form calculation issues

I'm new to coding for websites and am really struggling! I'm trying to add the select values from different select menu options to a total which will then give me a figure I can add to a number entered in a free text box.
I"ve searched extensively on the net and on this site and have found examples that are similar but when I've tried them out it doesn't work with my additions/changes!
Any help would be greatly appreciated!!!! Below is my html and also javascript.
Thanks in advance!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="example.js"></script>
</head>
<form action="" id="myform" onsubmit="return false;">
<div class="cont_order">
<div data-role="fieldcontain">
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<select name="Sport" id="Sport" data-native-menu="false" data-theme="a" onchange="calculateTotal()">
<option value="0">Sport</option>
<option value="Tennis">Tennis</option>
<option value="Golf">Golf</option>
<option value="Soccer">Soccer</option>
<option value="Rugby">Rugby</option>
<option value="Polo">Polo</option>
<option value="Fencing">Fencing</option>
<option value="Swimming">Swimming</option>
</select>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<select name="Star Sign" id="SS" data-native-menu="false" onchange="calculateTotal()">
<option value="0">Star Sign</option>
<option value="1.5">Aries</option>
<option value="3">Taurus</option>
<option value="1.5">Gemini</option>
<option value="2">Cancer</option>
<option value="3">Leo</option>
<option value="1.5">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="1.5">Capricorn</option>
<option value="0.5">Aquarius</option>
<option value="0.5">Pisces</option>
</select>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<br/>
<select name="Hobby" id="Hobby" data-native-menu="false" onchange="calculateTotal()">Hobby
<option value="0">Hobby</option>
<option value="A lot">A lot</option>
<option value="Some">Some</option>
<option value="Few">Few</option>
<option value="None">None</option
</select>
</div>
<br/>
<label for="selectmenu" class="select">
<div align="right"></div>
</label>
<div align="center"></div>
</div>
<div align="center">
</p>
<br/>
<select name="Favourite Colour" id="FC" data-native-menu="false" onchange="calculateTotal()">
<option value="0">Favourite Colour</option>
<option value="1.5">Black</option>
<option value="3">Blue</option>
<option value="1.5">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="1.5">Pink</option>
<option value="2">Purple</option>
<option value="3">Red</option>
<option value="2">Yellow</option>
<option value="1.5">White</option>
<option value="4">Other</option>
</select>
<br/>
<p>
<br/>
<div data-role="fieldcontain">
<label for="Age">
<div align="center">Age
:
</div>
</label>
<div align="center">
<input type="number" name="Age" id="Age" value="" />
</div>
</div>
</form>
<p> </p>
<p> <a href="#" data-role="button"> <input type='submit' id='Submit' value='submit' onclick="calculateTotal()"/>
<br/>
</div>
</form>
</div>
</body>
</html>
// JavaScript Document
var Sport = new Array();
Sport["Tennis"]=1.5;
Sport["Golf"]=3;
Sport["Soccer"]=2;
Sport["Rugby"]=3;
Sport["Polo"]=1.5;
Sport["Fencing"]=2;
Sport["Swimming"]=3;
var SS = new Arr4ay();
Star_Sign["Aries"]=1.5;
Star_Sign["Taurus"]=3;
Star_Sign["Cancer"]=2;
Star_Sign["Leo"]=3;
Star_Sign["Virgo"]=1.5;
Star_Sign["Libra"]=2;
Star_Sign["Scorpio"]=3;
Star_Sign["Sagittarius"]=2;
Star_Sign["Capricorn"]=1.5;
Star_Sign["Aquarius"]=0.5;
Star_Sign["Pisces"]=1.5;
var Hobby = new Array();
Hobby["A lot"]=0.5;
Hobby["Some"]=1;
Hobby["Few"]=1;
Hobby["None"]=2;
var FC = new Array();
Favourite_Colour["Blue"]=3;
Favourite_Colour["Brown"]=1.5;
Favourite_Colour["Green"]=2;
Favourite_Colour["Orange"]=3;
Favourite_Colour["Pink"]=1.5;
Favourite_Colour["Purple"]=2;
Favourite_Colour["Red"]=3;
Favourite_Colour["Yellow"]=2;
Favourite_Colour["White"]=1.5;
Favourite_Colour["Other"]=4;
function calc() {
var Sport = Number(document.getElementsById("Sport").value);
var SS = Number(document.getElementsById("SS").value);
var Hobby = Number(document.getElementsById("Hobby").value);
var FC = Number(document.getElementsById("FC").value);
var Age = Number(document.getElementsById("Age").value);
var total = Sport + SS + Hobby + FC;
var Score = Age = Score
}// JavaScript Document
In your function calc replace Number with either parseInt if you always expect an integer from your value or parseFloat otherwise.
Unless I am misunderstanding what you're after you could just use the Array.reduce function:
Array.reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
So for you:
function calc() {
new tempAry = [
Number(parseInt (document.getElementsById("Sport").value),10),
Number(parseInt (document.getElementsById("SS").value),10),
Number(parseInt (document.getElementsById("Hobby").value),10),
Number(parseInt (document.getElementsById("FC").value),10)
];
var total = tempAry.reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
//No idea what these are for
//var Age = Number(document.getElementsById("Age").value);
//var Score = Age = Score
}
Not sure exactly what you're after, nor what `Score is meant for, but total should equal the total number.

Show form based on radio button select [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have the following html which has two forms with form id=cardpayment for first form and form id="intenetpayment" for the second.
Also I have 3 radio buttons named "Debit card","Credit Card","Internet Banking".
All I want to do is,when I select the radio button Debitcard or Credit card,form with id="cardpayment" should be shown and the other form should be hidden and when i click on Internetbanking radio button , form with id="cardpayment" should be hidden and form with id="internetpayment" should be shown. Im new to jquery and javascript.I checked online that this can be done using a css by adding/removing a css class
{
display:none;
}
But i dont know how to make it work using javascript.
You can find the fiddle at http://jsfiddle.net/d5qDb/1/
Pardon for the long question,and I havnt included the css here for not confusing the question.It is in the fiddle anyway.thanks in advance for any help.I have given the division to two forms below.
<body>
<div id="credit-card">
<header>
<span class="title" style="background-image: url('images/fethrpowered.png');"><strong>Card Payment:</strong> Enter payment details</span>
<span class="close"><img src="images/close.png"/></span>
</header>
<section id="content">
<div class="title"><strong>Payment Mode- Select your payment mode</strong></div>
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios"value="false">
<label for="radio2">Debit Card</label>
<input type="radio" id="radio3" name="radios"value="false">
<label for="radio3">Internet Banking</label>
<form method="post" id="cardpayment">
<div style="float:right;margin-top:50px;">
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</div>
<div class="table form-fields">
<div class="row">
<div class="label">Card Number:</div>
<div class="input full"><input type="text" name="ccnumber" id="ccnumber" placeholder="8763125487533457"/><br/></div>
</div>
<div class="row">
<div class="label">Card Type:</div>
<div class="input full">
<select class="styled">
<option selected>Visa</option>
<option>Mastercard</option>
<option>Maestro</option>
<option>SBI Maestro</option>
</select>
</div>
<div class="valid"></div>
</div>
<div class="row">
<div class="label">Your name:</div>
<div class="input full"><input type="text" name="name" id="name" placeholder="Mr. Personality of TV"/></div>
</div>
<div class="row name">
<div class="label">Expires On:</div>
<div class="input size50">
<select class="styled">
<option selected>Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select class="styled">
<option selected>Select Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option> <option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
<div class="valid"></div>
</div>
<div class="row name">
<div class="label">CVV Number:</div>
<div class="input size50"><input type="text" name="cvv" id="cvv" placeholder="490" maxlength="3"/></div>
</div>
</div>
<input type="submit" style="float:right" value="Pay Now"/>
</form>
<form method="post" id="internetpayment">
<div class="table form-fields">
<div class="row name">
<div class="label">Name:</div>
<div class="input full"><input type="text" name="name" id="Name" placeholder="Enter your name"/></div>
</div>
<div class="row name">
<div class="label">Email:</div>
<div class="input full"><input type="text" name="email" id="email" placeholder="Enter Email address"/></div>
</div>
<div class="row name">
<div class="label">Mobile Number:</div>
<div class="input size50"><input type="text" name="Mobile Number" id="mobileNo"/></div>
</div>
<div class="row name">
<div class="label">Bank:</div>
<div class="input size50">
<select name="BankId" class="styled" data-required="true" data-trigger="change">
<option value="CORP">Corporation </option>
<option value="HDFC"> HDFC </option>
<option value="ICICI"> ICICI </option>
<option value="IDBI"> IDBI </option>
<option value="SBI"> STATE BANK OF INDIA </option>
<option value="DB"> DEUTSCHE </option>
</select>
</div>
<div class="valid"></div>
</div>
<div class="row name">
<div class="label">Amount:</div>
<div class="input size50"><input type="text" name="amount" id="amount" placeholder="10.00"/></div>
</div>
</div>
<input type="submit" style="float:right" value="Pay Now"/>
</form>
</section>
</div>
</body>
Using pure JavaScript:
Write this in your Script section.
var radios = document.getElementsByName("radios");
var cardpayment = document.getElementById("cardpayment");
var internetpayment = document.getElementById("internetpayment");
/* If Credit Card is selected by default, add these two lines of code.
cardpayment.style.display = 'block'; // show
internetpayment.style.display = 'none';// hide
*/
for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
var val = this.value;
if(val == 'radio1' || val == 'radio2'){ // Assuming your value for radio buttons is radio1, radio2 and radio3.
cardpayment.style.display = 'block'; // show
internetpayment.style.display = 'none';// hide
}
else if(val == 'radio3'){
cardpayment.style.display = 'none';
internetpayment.style.display = 'block';
}
}
}
fiddle: http://jsfiddle.net/LbrCf/
Try this, using jQuery Onchange
$("#radio1, #radio2").on("change", function(){
$("#cardpayment").show();
$("#internetpayment").hide();
});
$("#radio3").on("change", function(){
$("#cardpayment").hide();
$("#internetpayment").show();
});
I added this JavaScript code into your JSFiddel to create that effect
$('#radio1').change(function() {
if(this.checked) {
$('#cardpayment').show();
$('#internetpayment').hide();
}
});
$('#radio2').change(function() {
if(this.checked) {
$('#internetpayment').show();
$('#cardpayment').hide();
}
});
Your jQuery code should look something like this:
$(document).ready(function(){
$('#internet_radio').on('click', function(){
$('#cardpayment').hide();
$('#internetpayment').show();
})
$('#debit_radio').on('click', function(){
$('#cardpayment').show();
$('#internetpayment').hide();
})
})
Don't forget to load jQuery libraries to make this work.
Also the next time you need this type of functionality, you could use this. You don't really have to load their css files, only the js libraries, and you can style your tabs as you like.
Pretty simple. Just do this:
$("#radio1, #radio2").on("click", function(){
$("#cardpayment").show();
$("#internetpayment").hide();
});
$("#radio3").on("click", function(){
$("#cardpayment").hide();
$("#internetpayment").show();
});

Categories