We Keep Coding

Remove a function without breaking my code

I'm trying to implement a site search feature on my web app, but I want to remove a redundant radio button input.
The original code allowed you to choose a search engine, using three radio buttons. I've removed three of the buttons, but I can't figure out how to remove the last one. I just want to use google by default.
// All-in-one Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
//Enter domain of site to search.
var domainroot = "ts.xxxxxxx.net"
var searchaction = [ //form action for the 3 search engines
"http://www.google.com/search"
]
var queryfieldname = ["q", "p", "q"] //name of hidden query form for the 3 search engines
function switchaction(cur, index) {
cur.form.action = searchaction[index]
document.getElementById("hiddenquery").name = queryfieldname[index]
}
function jksitesearch(curobj) {
for (i = 0; i < document.jksearch.se.length; i++) { //loop through radio to see which is checked
if (document.jksearch.se[i].checked == true)
switchaction(document.jksearch.se[i], i)
}
document.getElementById("hiddenquery").value = "site:" + domainroot + " " + curobj.qfront.value
}
<form name="jksearch" action="http://www.google.com/search" method="get" onSubmit="jksitesearch(this)">
<input id="hiddenquery" type="hidden" name="q" />
<input name="qfront" type="text" style="width: 200px" value="" /> <input type="submit" value="Search" /><br />
<div style="font: bold 11px Verdana;"><input name="se" type="radio" checked>
</div>
</form>

You can use the input type='hidden' and set value='1' to achieve the same result.
If you must keep the radio button in the form for some reason, set display:none; on the parent node for the input.
// All-in-one Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
//Enter domain of site to search.
var domainroot = "ts.kiwiroad.net"
var searchaction = [ //form action for the 3 search engines
"http://www.google.com/search"
]
var queryfieldname = ["q", "p", "q"] //name of hidden query form for the 3 search engines
function switchaction(cur, index) {
cur.form.action = searchaction[index]
document.getElementById("hiddenquery").name = queryfieldname[index]
}
function jksitesearch(curobj) {
for (i = 0; i < document.jksearch.se.length; i++) { //loop through radio to see which is checked
if (document.jksearch.se[i].checked == true)
switchaction(document.jksearch.se[i], i)
}
document.getElementById("hiddenquery").value = "site:" + domainroot + " " + curobj.qfront.value
}
// console.log(document.querySelector('input[name="se"]').value);
<form name="jksearch" action="http://www.google.com/search" method="get" onSubmit="jksitesearch(this)">
<input id="hiddenquery" type="hidden" name="q" />
<input name="qfront" type="text" style="width: 200px" value="" /> <input type="submit" value="Search" /><br />
<div style="font: bold 11px Verdana;">
<input name="se" type="hidden" value="1">
</div>
</form>
Hope this helps,

This should do the trick. It has the same behavior as your original code except there are no more radio buttons and no more functions relating to them.
// All-in-one Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
//Enter domain of site to search.
var domainroot = "ts.xxxxxxx.net"
var searchaction = [ //form action for the 3 search engines
"http://www.google.com/search"
]
function jksitesearch(curobj) {
document.getElementById("hiddenquery").value = "site:" + domainroot + " " + curobj.qfront.value
}
<form name="jksearch" action="http://www.google.com/search" method="get" onSubmit="jksitesearch(this)">
<input id="hiddenquery" type="hidden" name="q" />
<input name="qfront" type="text" style="width: 200px" value="" /> <input type="submit" value="Search" /><br />
</form>

Simulate multiple form clicks with javascript

I have a product page on my website with product options, two with sub options. For those options with sub options they are using type="radio"
I've created javascript buttons which emulate clicking those sub options. I'd like to set up clearing the form and emulating the clicks all on one button. Currently I have a separate clear button, which still doesn't work.
Picture Example: http://i.imgur.com/uAlLBAK.jpg
Code examples below
Sub option code:
<li class="option">
<label for="09f0c74f3d92847ecfcf5837eb6b2f8b">
<input type="radio" class="validation" name="attribute[249]" value="127" id="09f0c74f3d92847ecfcf5837eb6b2f8b"/>
<span class="name">65cc</span>
</label>
</li>
<li class="option">
<label for="06fc48a0a3949a17c28162ea0eb1f406">
<input type="radio" class="validation" name="attribute[249]" value="128" id="06fc48a0a3949a17c28162ea0eb1f406"/>
<span class="name">75cc</span>
</label>
</li>
First button:
<input onclick="document.getElementById('06fc48a0a3949a17c28162ea0eb1f406').click(); document.getElementById('a596a2e871da26ba9b1cf7fffe325848').click();" type="button" value="0911" />
Second button:
<input onclick="document.getElementById('09f0c74f3d92847ecfcf5837eb6b2f8b').click(); document.getElementById('a596a2e871da26ba9b1cf7fffe325848').click();" type="button" value="0916" />
Clear options:
<input onclick="Clear();" type="button" value="Clear" />
<script type="text/javascript">// <![CDATA[
function Clear()
{
clearRadioGroup("09f0c74f3d92847ecfcf5837eb6b2f8b");
clearRadioGroup("a596a2e871da26ba9b1cf7fffe325848");
}
function clearRadioGroup(GroupName)
{
var ele = document.getElementsById(GroupName);
for(var i=0;i<ele.length;i++)
ele[i].checked = false;
}
// ]]></script>
In the above example the second button click would un-select the second element if the buttons were clicked in succession. Thoughts on at the very least being able to clear the form?

There is a typo in function clearRadioGroup. It should be
"var ele = document.getElementById(GroupName);" and not
"var ele = document.getElementsById(GroupName);".
The Clear function will work then.

Get values of selected checkboxes and their associated textareas in Javascript

I have a HTML form. In this form I have 5 checkboxes and each checkbox has an associated textarea.
So I want to get the values of only the checked checkboxes and their associated textarea text. I am able to get the values of the checked checkboxes but I can't figure out a way to get the values of their associated textarea.
My HTML code is:
<form class="my-form" id="id_MyForm">
<div class="form-group">
<label class="qquestion">6. Which of the following is most relevant to you and why? (Select all that apply).</label>
<div class="checkbox" id="id_Question6">
<label>
<input type="checkbox" id="input_que6a" value="Time" name="question6" />Time
</label>
<textarea name="question6a_textarea" id="id_que6a" class="form-control" placeholder="Please provide the reason"></textarea>
<br>
<label>
<input type="checkbox" id="input_que6b" value="Money" name="question6" /> Money
</label>
<textarea name="question6b_textarea" id="id_que6b" class="form-control" placeholder="Please provide the reason"></textarea>
<br>
<label>
<input type="checkbox" id="input_que6c" value="Family" name="question6" /> Family
</label>
<textarea name="question6c_textarea" id="id_que6c" class="form-control" placeholder="Please provide the reason"></textarea>
<br>
<label>
<input type="checkbox" id="input_que6d" value="Hobbies" name="question6" /> Hobbies
</label>
<textarea name="question6d_textarea" id="id_que6d" class="form-control" placeholder="Please provide the reason"></textarea>
<br>
<label>
<input type="checkbox" value="Other" name="question6" id="other_que6" /> Other
</label>
<br>
<textarea name="question6_textarea" id="id_Question6_textinput" class="form-control" placeholder="Please elaborate"></textarea>
</div>
</div>
<div class="text-center">
<button type="button" id="id_SubmitForm" class="btn btn-success">Submit</button>
</div>
</form>
My JavaScript code is:
/* Latest compiled and minified JavaScript included as External Resource */
var question6AnsArray = [];
/* To hide all the text areas when the page loads */
$("#id_Question6_textinput").hide();
$("#id_q6_opH_textarea").hide();
$('#id_que6a').hide();
$('#id_que6b').hide();
$('#id_que6c').hide();
$('#id_que6d').hide();
/* To show appropriate text area for selected check box */
$('#input_que6a').click(function() {
$("#id_que6a").fadeToggle(this.checked);
});
$('#input_que6b').click(function() {
$("#id_que6b").fadeToggle(this.checked);
});
$('#input_que6c').click(function() {
$("#id_que6c").fadeToggle(this.checked);
});
$('#input_que6d').click(function() {
$("#id_que6d").fadeToggle(this.checked);
});
$('#other_que6').click(function() {
$("#id_Question6_textinput").fadeToggle(this.checked);
});
$("#id_SubmitForm").click(function() {
// To get all the selected checkbox values and their associated textareas
$('input[name="question6"]:checked').each(function() {
question6AnsArray.push(this.value);
//Here I want to get the value for the textarea.
});
var question6Answer = question6AnsArray.join(", ");
alert(question6Answer);
});
Here is a link to JSFiddle

$("#id_SubmitForm").click(function() {
// To get all the selected checkbox values and their associated textareas
$('input[name="question6"]:checked').each(function() {
question6AnsArray.push(this.value);
question6AnsOtherArray.push($(this).closest("label").next("textarea").val());
});
var question6Answer = question6AnsArray.join(", ");
var question6OtherAnswer = question6AnsOtherArray.join(", ");
alert(question6Answer);
alert(question6OtherAnswer);
});
And, You could actually optimize your code this way a little bit too..
/* Latest compiled and minified JavaScript included as External Resource */
var question6AnsArray = [];
var question6AnsOtherArray = [];
/* To hide all the text areas when the page loads */
$("#id_Question6_textinput").hide();
$("#id_MyForm textarea").hide();
/* To show appropriate text area for selected check box */
$("input[type=checkbox]").click(function() {
$(this).closest("label").next("textarea").fadeToggle();
})
$('#other_que6').click(function() {
$("#id_Question6_textinput").fadeToggle(this.checked);
});
$("#id_SubmitForm").click(function() {
// To get all the selected checkbox values and their associated textareas
$('input[name="question6"]:checked').each(function() {
question6AnsArray.push(this.value);
question6AnsOtherArray.push($(this).closest("label").next("textarea").val());
});
var question6Answer = question6AnsArray.join(", ");
var question6OtherAnswer = question6AnsOtherArray.join(", ");
alert(question6Answer);
alert(question6OtherAnswer);
});

from your this context step back up to your parent then grab the next text element.
$('input[type="checkbox"]').on('click', function() {
if ( $(this, ':checked') ) {
$(this).val();
$(this).parent().next('textarea').val();
)
}

Try below function at last:
$("#id_SubmitForm").click(function() {
question6AnsArray = [];
// To get all the selected checkbox values and their associated textareas
$('input[name="question6"]:checked').each(function() {
question6AnsArray.push(this.value);
question6AnsArray.push($('.form-control').val());
//Here I want to get the value for the textarea.
});
var question6Answer = question6AnsArray.join(", ");
alert(question6Answer);
});

How to show jquery dialog with radio buttons when checkbox is checked and post value in textbox

I have 41 checkboxes like this
HTML
<input id="1" type="checkbox" onclick="updatebox()" />
<input id="2" type="checkbox" onclick="updatebox()" />
<input id="3" type="checkbox" onclick="updatebox()" />
<input id="4" type="checkbox" onclick="updatebox()" />
Javascript
<script type="text/javascript">
function updatebox()
{
var textbox = document.getElementById("list");
var values = [];
if(document.getElementById('1').checked) {values.push("1");}
if(document.getElementById('2').checked) {values.push("2");}
if(document.getElementById('3').checked) {values.push("3");}
if(document.getElementById('4').checked) {values.push("4");}
textbox.value = values.join(", ");
}
</script>
When checkbox is checked the value is posted in textbox,
now what i want is when the user clicks the checkbox the jquery dialog popups and the user will have two radio buttons with Male or Female options along with ok button so when the user will click on ok the value should be posted on textbox depending on selection M for male F for female along with number like 1M or 1F, 2M or 2F and so on.
P.S user can select multiple checkboxes.
Thanks You!

Here is something that does what you want. HTML:
<body>
<form id="form">
<input id="1" type="checkbox" /> 1
<input id="2" type="checkbox" /> 2
<input id="3" type="checkbox" /> 3
<input id="4" type="checkbox" /> 4
...
<input id="10" type="checkbox" /> 10
...
<input id="41" type="checkbox" /> 41
<input id="list" />
</form>
<div id="prompt" style="display:none;" title="Gender">
<form>
<input type="radio" name="gender" id="radio" value="male" />
<label for="radio">Male</label>
<input type="radio" name="gender" id="radio2" value="female" />
<label for="radio2">Female</label>
</form>
</div>
</body>
The JavaScript:
$(function() {
var form = document.getElementById("form");
var textbox = document.getElementById("list");
var $prompt = $("#prompt");
// We record what is currently checked, and the user's answers in this `pairs` object.
var pairs = [];
// Listen to `change` events.
$("input[type='checkbox']", form).on('change', function (ev) {
var check = ev.target;
if (check.checked) {
// Checked, so prompt and record.
$prompt.dialog({
modal: true,
buttons: {
"Ok": function() {
var gender = $prompt.find("input[name='gender']:checked")[0];
var letter = {"male":"M", "female":"F"}[gender.value];
pairs[check.id] = '' + check.id + letter;
$( this ).dialog( "close" );
refresh();
}
}
});
}
else {
// Unchecked, so forget it.
delete pairs[check.id];
refresh();
}
function refresh() {
// Generate what we must now display in the textbox and refresh it.
// We walk the list.
var keys = Object.keys(pairs);
var values = [];
for (var i = 0, key; (key = keys[i]); ++i) {
values.push(pairs[key]);
}
textbox.value = values.join(", ");
}
});
});
Here is a jsbin with the code above.
Salient points:
This code adds the event handlers using JavaScript rather than use onclick in the HTML. It is not recommended to associated handlers directly in the HTML.
It listens to the change event rather than click. Some clicks can sometimes not result in a change to an input element.
It uses $.dialog to prompt the user for M, F.
The refresh function is what recomputes the text field.
It keeps a record of what is currently checked rather than requery for all the check boxes when one of them changes.

function updatebox()
{
var textbox = document.getElementById("list");
var values = [];
for (var i = 1; i <= 41; ++i) {
var id = '' + i;
if (document.getElementById(id).checked) {
var gender = prompt('Male (M) or female (F)?');
values.push(gender + id);
}
}
textbox.value = values.join(", ");
}
A few things to note:
I got rid of all that code repetition by simply using a for loop from 1 to 41.
I also fixed the strange indentation you had there.
You may want to use a method of getting user input other than prompt, but it'll work the same way.
(If you're going to keep using prompt, you might also want to add input validation as well to make sure the user didn't input something other than M or F.)

Javascript Radiobutton Group Validation

I would like your help to develop a javascript function to validate if one of the following radiobutton group (IDType) is selected and which value is checked and view error message in (ValidationError) division in case no radio button selected ??
<td>
<div>
<span>
<input type="radio" name="IDType" id="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" id="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
</td>
Thanks for your help.....

First of all, as said my collegues, you cannot have the same id ("IDType") for both your radio buttons.
Here is a solution with javascript only, without any jquery.
<html>
<head>
<script type="text/javascript">
function Validate() {
var radios = document.getElementsByName('IDType')
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
alert("Selected Value = " + radios[i].value);
return true; // checked
}
};
// not checked, show error
document.getElementById('ValidationError').innerHTML = 'Error!!!';
return false;
}
</script>
</head>
<body>
<form>
<div>
<span>
<input type="radio" name="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
<input type="submit" value="Submit" onclick="return Validate();" />
</form>
</body>
</html>

function validateRadioButtons(){
var radio = $('input:radio[name="IDType"]:checked');
if(radio.length == 0)//no buttons selected
{
$('ValidationError').text("you haven't selected any buttons!");
return;
}
$('ValidationError').text(radio.val()+' is selected');
}
ps: in order for this to work, you should consider using unique id's for dom elements. you cannot have the same id ("IDType") for both your radio buttons.