We Keep Coding

Javascript Array value not defined

I'm trying to get a preview box update with form data when you click on a checkbox. But it doesn't work for array values.
Here's the code:
<script>
function FillPreview(f) {
if(f.update.checked == true) {
f.preview_name.value = f.post_title.value;
f.preview_description.value = f._ecp_custom_13.value;
f.preview_date.value = f.EventStartDate.value;
f.preview_venue_name.value = f.venue[Venue].value;
f.preview_venue_address.value = f.venue[Address].value;
f.preview_venue_city.value = f.venue[City].value;
f.preview_venue_state.value = f.venue[Province].value;
f.preview_phone.value = f.organizer[Phone].value;
f.preview_website.value = f.organizer[Website].value;
}
}
</script>
The following form HTML is just a summary. I'm actually using The Community Events Add-on to The Events Calendar plugin for Wordpress.
<form name="eventForm">
<input type="text" name="post_title" />
<input type="text" name="_ecp_custom_13" />
<input type="text" name="EventStartDate" />
<input type="text" name="venue[Venue]" />
<input type="text" name="venue[Address]" />
<input type="text" name="venue[City]" />
<input type="text" name="venue[Province]" />
<input type="text" name="venue[Zip]" />
<input type="text" name="organizer[Phone]" />
<input type="text" name="organizer[Website]" />
</form>
And the preview box HTML
<div id="preview">
<h2>Print Preview</h2>
<input type="text" class="preview-date" name="preview_date" />
<div class="preview-category" name="preview_category"></div>
<input type="text" class="preview-name" name="preview_name" />
<input type="text" class="preview-time" name="preview_time" />
<input type="text" class="preview-venue-name" name="preview_venue_name" />
<input type="text" class="preview-venue-address" name="preview_venue_address" />
<input type="text" class="preview-venue-city" name="preview_venue_city" />
<input type="text" class="preview-venue-state" name="preview_venue_state" />
<input type="text" class="preview-venue-zip" name="preview_venue_zip" />
<input type="text" class="preview-description" name="preview_description" />
<input type="text" class="preview-phone" name="preview_phone" />
<input type="text" class="preview-website" name="preview_website" />
</div>
<div>
<input type="checkbox" id="update" name="update" onclick="FillPreview(this.form)" />
</div>
My problem is that the array values are undefined while the other values (title, description, etc.) work just fine. Like I said before, the form code is actually from The Community Events Add-on to Wordpress's "The Events Calendar" plugin, so anybody who knows that plugin well will be more helpful.
I grabbed the javascript from this link. I tested that on my submit event page by itself and it worked just fine. As you can see I'm an absolute script kiddie. Any help would be greatly appreciated.

Dropdownchecboxes selected value validation in javascript

I have a DropDownCheckBoxes where I can CHECK multiple items from the list. Now what I want is,
A validation on button click for multiple Items selected must be from the same month if the selected items are not from the same month then it should prompt an alert message for selecting the items as for same month.
For ex:- If first selected item from the list is of April then the user has to select the next item from April only, if other month selected than it should throw an alert message.
Here is the screenshot of my DropDownCheckBoxes
[![DropDownCheckBoxes][1]][1]
Below is my code which I tried first for getting selected value of the list but got an error as
Line: 13
Error: 'options' is null or not an object
See the js fiddle for my code [HERE][2]
kindly suggest what is wrong and how to validate the user on button click for the same.

So I took a look at your code. And since I didn't know it you wanted it in plain Javascript or jQuery, I took the liberty of doing it in jQuery (since it's easier).
Also I don't know the true purpose of your code, so I based it upon your example and the information you gave us. This might give you an idea on how to complete your task.
Either run the snippet below or take a look at this fiddle.
/* Slide open menu and change arrow direction */
$("#caption").click(function() {
$("#cmbEmp_Name_dv").slideToggle();
$("#down, #up").toggle();
});
/* On change disable all checkboxes from different months */
$("input[type='checkbox']").change(function() {
var amountChecked = $("input[type='checkbox']:checked").length;
if (amountChecked === 1) {
var month = getMonth($(this).next().html());
$("input[type='checkbox']").each(function() {
var myMonth = getMonth($(this).next().html());
if (month !== myMonth) {
$(this).prop("disabled", true);
$(this).next().css("background-color", "gray");
}
});
}
if (amountChecked === 0)
$("input[type='checkbox']").prop("disabled", false).next().css("background-color", "transparent");
});
/* Function to check if all checked options are from the same month */
$("#btnSubmit").click(function() {
var firstSelected = $("input:checked").first().next().html();
if (firstSelected !== undefined && firstSelected !== "undefined" && firstSelected && firstSelected != "") {
var firstMonth = getMonth(firstSelected);
var isNotEqual = false;
$("input:checked").each(function() {
var month = getMonth($(this).next().html());
if (firstMonth !== month)
isNotEqual = true;
});
if (isNotEqual)
alert("Please check items from the month " + firstMonth);
else
alert("Validation complete - good to go!");
}
else
{
alert("Select an option first!");
$("#cmbEmp_Name_dv").slideDown();
}
});
/* Function to strip off all characters and return the month */
function getMonth(html) {
var monthPart = html.split("(").length > 1 ? html.split("(")[1] : "-";
return monthPart.substr(0, monthPart.indexOf("-")).trim();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cmbEmp_Name_sl" class="dd_chk_select" style="display:inline-block;position:relative;width:55%;">
<div id="caption">
Select <span id="down">↓</span><span id="up" style="display: none;">↑</span>
</div>
<div id="cmbEmp_Name_dv" class="dd_chk_drop" style="display:none;position:absolute;width:500px;">
<div id="checks" style="height:45%;">
<input id="cmbEmp_Name_0" type="checkbox" name="cmbEmp_Name$0" />
<label for="cmbEmp_Name_0">--Select--</label><br />
<input id="cmbEmp_Name_1" type="checkbox" name="cmbEmp_Name$1" />
<label for="cmbEmp_Name_1">ANIL VITTHAL GAWADE-312(April - 2016)</label><br />
<input id="cmbEmp_Name_2" type="checkbox" name="cmbEmp_Name$2" />
<label for="cmbEmp_Name_2">ANURADHA A. DESHMUKH-53(April - 2016)</label><br />
<input id="cmbEmp_Name_3" type="checkbox" name="cmbEmp_Name$3" />
<label for="cmbEmp_Name_3">ASMA SIDDIQUI-83(April - 2016)</label><br />
<input id="cmbEmp_Name_4" type="checkbox" name="cmbEmp_Name$4" />
<label for="cmbEmp_Name_4">DEEPTI MAITHIL-1250(April - 2016)</label><br />
<input id="cmbEmp_Name_5" type="checkbox" name="cmbEmp_Name$5" />
<label for="cmbEmp_Name_5">GAURAV JHUNJHUNWALA-2222(March - 2016)</label><br />
<input id="cmbEmp_Name_6" type="checkbox" name="cmbEmp_Name$6" />
<label for="cmbEmp_Name_6">HITESH PANCHAL-253(April - 2016)</label><br />
<input id="cmbEmp_Name_7" type="checkbox" name="cmbEmp_Name$7" />
<label for="cmbEmp_Name_7">JAGDISH UBARE-362(April - 2016)</label><br />
<input id="cmbEmp_Name_8" type="checkbox" name="cmbEmp_Name$8" />
<label for="cmbEmp_Name_8">JAIDEEP MAHAKAL-134(April - 2016)</label><br />
<input id="cmbEmp_Name_9" type="checkbox" name="cmbEmp_Name$9" />
<label for="cmbEmp_Name_9">JASMINE RATHOD-228(April - 2016)</label><br />
<input id="cmbEmp_Name_10" type="checkbox" name="cmbEmp_Name$10" />
<label for="cmbEmp_Name_10">JIGAR SHAH-358(April - 2016)</label><br />
<input id="cmbEmp_Name_11" type="checkbox" name="cmbEmp_Name$11" />
<label for="cmbEmp_Name_11">Junaid Chaudhary-2487(April - 2016)</label><br />
<input id="cmbEmp_Name_12" type="checkbox" name="cmbEmp_Name$12" />
<label for="cmbEmp_Name_12">KAMAL MATALIA-17(April - 2016)</label><br />
<input id="cmbEmp_Name_13" type="checkbox" name="cmbEmp_Name$13" />
<label for="cmbEmp_Name_13">KETAN NALAWADE-2478(April - 2016)</label><br />
<input id="cmbEmp_Name_14" type="checkbox" name="cmbEmp_Name$14" />
<label for="cmbEmp_Name_14">KRUPA DAVE-349(April - 2016)</label><br />
<input id="cmbEmp_Name_15" type="checkbox" name="cmbEmp_Name$15" />
<label for="cmbEmp_Name_15">NEHA ARUN KHANNA-2145(March - 2016)</label><br />
<input id="cmbEmp_Name_16" type="checkbox" name="cmbEmp_Name$16" />
<label for="cmbEmp_Name_16">NILESH GAIKWAD-903(March - 2016)</label><br />
<input id="cmbEmp_Name_17" type="checkbox" name="cmbEmp_Name$17" />
<label for="cmbEmp_Name_17">PALLAVI KATHAL-2465(April - 2016)</label><br />
<input id="cmbEmp_Name_18" type="checkbox" name="cmbEmp_Name$18" />
<label for="cmbEmp_Name_18">RAMESH SANAP-1855(March - 2016)</label><br />
<input id="cmbEmp_Name_19" type="checkbox" name="cmbEmp_Name$19" />
<label for="cmbEmp_Name_19">SAKINA VIVIAN DSILVA-2392(April - 2016)</label><br />
<input id="cmbEmp_Name_20" type="checkbox" name="cmbEmp_Name$20" />
<label for="cmbEmp_Name_20">SAMANTHA SAXENA-2442(April - 2016)</label><br />
<input id="cmbEmp_Name_21" type="checkbox" name="cmbEmp_Name$21" />
<label for="cmbEmp_Name_21">SANGEETA JIJI RANE-314(April - 2016)</label><br />
<input id="cmbEmp_Name_22" type="checkbox" name="cmbEmp_Name$22" />
<label for="cmbEmp_Name_22">SARVESH SUBHASH CHAUDHARY-2462(March - 2016)</label><br />
<input id="cmbEmp_Name_23" type="checkbox" name="cmbEmp_Name$23" />
<label for="cmbEmp_Name_23">SAYED SOHAIL JAVED AKHTAR-2014(April - 2016)</label><br />
<input id="cmbEmp_Name_24" type="checkbox" name="cmbEmp_Name$24" />
<label for="cmbEmp_Name_24">SHALIBHADRA HAKANI-2158(April - 2016)</label><br />
<input id="cmbEmp_Name_25" type="checkbox" name="cmbEmp_Name$25" />
<label for="cmbEmp_Name_25">SONAL RAVINDRA AMBEDE-2533(March - 2016)</label><br />
<input id="cmbEmp_Name_26" type="checkbox" name="cmbEmp_Name$26" />
<label for="cmbEmp_Name_26">SRINIVAS VENKANNA SAMUDRALA-2525(March - 2016)</label><br />
<input id="cmbEmp_Name_27" type="checkbox" name="cmbEmp_Name$27" />
<label for="cmbEmp_Name_27">SUNIL DESAI-2484(March - 2016)</label><br />
<input id="cmbEmp_Name_28" type="checkbox" name="cmbEmp_Name$28" />
<label for="cmbEmp_Name_28">UMANG DARJI-2239(March - 2016)</label><br />
<input id="cmbEmp_Name_29" type="checkbox" name="cmbEmp_Name$29" />
<label for="cmbEmp_Name_29">UMESH VASHISTH-1900(March - 2016)</label><br />
<input id="cmbEmp_Name_30" type="checkbox" name="cmbEmp_Name$30" />
<label for="cmbEmp_Name_30">VISHAL SUBHASH PAWADE-1881(March - 2016)</label>
</div>
</div>
</div>
&nbsp&nbsp
<input type="submit" name="btnSubmit" value="Process" id="btnSubmit" />
Notice
I did implement #Freak his suggestion, by disabling all the options different from the user his first choice.
On the other hand, I also implemented the check on the Validate button, where as it will check if the user may or may not have checked a different month. Just in case.

HTML FORMS - Passing values to two different forms on the same page

I am having problems trying to pass values to two different forms on the same page. The page is populated with 16 radio buttons (which I’ve turned into boxes for display reasons) and they all hold a value (e.g. 001). Both of the forms jobs are to somehow grab the active/selected radio button value and post it to a PHP file so database changes can be made. Instead of a submit button, I am using an anchor to pass a JavaScript submit function. I have tried having
both forms cover the whole page but still didn't have any luck.
I’ll post some code below to help you understand.
PS. If you need more code to understand, I can post it to pastebin.
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="" />
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_ready').submit();">READY</a>
</form>
</li>
<li>
<form id="form_c" method="post" action="../backend/screen.php">
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_c').submit();">COLLECTED</a>
</form>
</li>
</ul>
<div id="content">
<div id="container">
<div id="table">
<div id="tr1">
<div id="td1">
<input type="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</div>
<div id="td2">
<input type="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</div>
<div id="td3">
<input type="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</div>
<div id="td4">
<input type="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</div>

To answer the suggestion in the comments and use only one form, here's how to grab the value from the selected radio button:
var inputs = document.getElementsByTagName('input');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
valueSelected will contain the value of the selected radio.
If you ever need to reduce the type to "radio" only for some reason, you can check an input type with inputs[i]['type'] === 'radio' in the for loop.
The best would probably still be to set a class for your "radio" inputs, it will allow the loop to be more specific, hence a more efficient code, for example:
<input type="radio" class="myRadio">
and in JS: var inputs = document.getElementsByClassName('myRadio');

CSS class toggle with jquery on different id's

I'm trying to write some Jquery code for toggling two different class on different ids.
Since the CMS strips out inline css, I need to find a solution for "display:none"
I have written two css classes, in hopes of toggling between them, but not really sure if this is the direction to go .
I'm very new to Stack and Jquery so any info or corrections are welcomed
Here is the code:
CSS
.displaynone{
display:none;
}
.displayblock{
display:block;
}
HTML & JAVASCRIPT
<form>
<input onclick="javascript:resetForm();document.forms[0].reset();" type="reset" value="Reset" /> 
<br />
<br />
<h4>Are you number 1?</h4>
<label>
<input name="one" onclick="unhide('hidden-input', this, 'hidden-input2')" type="radio" value="1" /> Yes
<br />
</label>
<label>
<input name="one" onclick="unhide('hidden-input2', this, 'hidden-input')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input2" style="display: none;">
<p>If you are not , please download:
<br />
<a href="#" target="_blank">
<span style="font-size: x-small;">number one</span>
</a>
</p>
</div>
<div id="hidden-input" style="display: none;">
<hr />
<h4>Were you selected for too many hours?</h4>
<label>
<input name="hours" onclick="unhide('hidden-input3', this, 'hidden-input4')" type="radio" value="1" /> Yes
<br />
</label>
<div id="hidden-input3" style="display: none;">
<p>If you were selected for too many hours, please download:
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Hours</span>
</a>
</p>
</div>
<label>
<input name="hours" onclick="unhide('hidden-input4', this, 'hidden-input3')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input4" style="display: none;">
<hr />
<h4>Were you selected for number 3?</h4>
<label>
<input name="gpa" onclick="unhide('hidden-input5', this, 'hidden-input6')" type="radio" value="1" /> Yes
<br />
</label>
<div id="hidden-input5" style="display: none;">
<p>If you were selected for number 3, please download:
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Form for Three </span>
</a>
</p>
</div>
<label>
<input name="gpa" onclick="unhide('hidden-input6', this, 'hidden-input5')" type="radio" value="2" /> No
<br />
</label>
<div id="hidden-input6" style="display: none;">
<p>Were you selected for 4 :
<br />
<a href="#" target="blank">
<span style="font-size: x-small;">Form for 4</span>
</a>
</p>
</div>
</div>
</div>undefined
</form>

change your element to default as display:block and define a class
.hidden{
display:none;
}
and use this to toggle that class on/off
$('#YOURID').toggleClass("hidden")

Easier to just have the hidden class and remove it when you want to show the element. That way you don't have to worry about altering inline, block and table display properties.
// hide the thing
$('.thing').addClass('displaynone');
// show the thing
$('.thing').removeClass('displaynone');

demo: http://jsfiddle.net/swm53ran/401/ something like this? i started recreating the logic, but i didnt finish it. you should get a gist of what's going, and if you have any questions on it, let me know.
$(document).ready(function() {
$('input[type="radio"]').on('change', function() {
var name = $(this).attr('name');
var value = $(this).val();
console.log(name, value);
if (name == 'one') { // if number 1 question
if (value == 2) {
$('#hidden-input2').show(); // if no, show the download text
}
else {
$('#hidden-input2').hide(); // if yes, hide the dl text
}
$('#hidden-input').show(); // always show the hours question
}
if (name == 'hours') { // if hours question
if (value == 2) {
$('#hidden-input4').show() // if no, show number 3 question
}
else {
$('#hidden-input4').hide() // if no, hide number 3 question
}
}
});
});

It's generally advisable to avoid targeting IDs, and instead use common classes inside grouping wrappers.
<div>
<label>
<input name="one" class="selector yes" type="radio" value="1" />Yes
<br />
</label>
<label>
<input name="one" class="selector no" type="radio" value="2" />No
<br />
</label>
<div class="followup yes hidden">
<p>If you are not , please download:
<br /> <a href="#" target="_blank">
<span style="font-size: x-small;">number one</span>
</a>
</p>
</div>
<div class="followup no hidden">
<hr />
<h4>Were you selected for too many hours?</h4>
</div>
</div>
$('.selector').click(function () {
$(this).closest('label').siblings('.followup').hide();
if ($(this).is('.yes')) {
$(this).closest('label').siblings('.followup.yes').show();
} else {
$(this).closest('label').siblings('.followup.no').show();
}
});
Demo
This single function is reusable for any number of groupings having the same structure, even if nested.
Nested demo

Combo box for all control

I created a filterable drop Down List using JavaScript. This is the List Box Coding.
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" style="display:none;" >
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>
I created 4 Text Field and a arrow character. If i click the arrow character , I'll show the list at the bottom of the control.
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
In the display List function I'm getting the corresponded textbox position and displayed the List Control under the Text Box. Okie. Now my problem is If i select any option in the text box, I need to display the selected value to the textbox which the listbox shown under. After selecting the value from the list box, How i find in which text box showing the List ? Dynamically how can i find the text box id ?
This is my JS code for displaying the Listbox to the corresponding TextBox.
function displayList(ele,txt)
{
vis=document.getElementById(ele);
obj=document.getElementById(txt);
if (vis.style.display==="none")
vis.style.display="block";
else
vis.style.display="none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
Note : I can call this function at the click event of arrow button. I can easily pass the text Field Id. But in the case ListBox action i can't send the particular ID of the Text Field.

If you have no opposition to using jquery you can using the jquery UI built-in autocomplete which will do pretty much what you're looking for. For more advanced and nicer plugins you can try chosen

Try this.
<script>
var targetInput=null;
function displayList(ele,txt) {
vis=document.getElementById(ele);
obj=document.getElementById(txt);
targetInput = obj;
if (vis.style.display==="none") {
vis.style.display = "block";
} else {
vis.style.display = "none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
}
function selectList(txt) {
if (!targetInput) return;
targetInput.value = txt.value;
txt.style.display = 'none';
}
</script>
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" onclick="selectList(this)" style="display:none;">
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>