I am new to javascript and html and I am writing a program that displays a dropdown list and depending on what option is selected, I then display two radio buttons and a textfield. I am having trouble getting access to the values of these inputs (both for the radio buttons and for the text box).
<html>
<script type="text/javascript">
window.onload = function()
{
var select = document.getElementById("select");
var texts = document.getElementById("texts");
select.onchange = function()
{
var val = select.options[select.selectedIndex].value;
texts.innerHTML = "";
if (val == "employees")
{
texts.innerHTML += '<div><input type="radio" name="condition_employees" value="select_money" /> ></div>';
texts.innerHTML += '<div><input type="radio" name="condition_employees" value="select_money1" /> <</div>';
texts.innerHTML += '<div><input type="text" name="input_employees" value="select_employees" /></div>';
//var realValue = document.getElementByName('input_employees')[0].value;
//texts.innerHTML += '<div>realValue</div>';
}
if (val == "total_money")
{
texts.innerHTML += '<div><input type="radio" name="condition_money" value="select_money" /> ></div>';
texts.innerHTML += '<div><input type="radio" name="condition_money" value="select_money1" /> <</div>';
texts.innerHTML += '<div><input type="text" name="input_money"' + '" value="select_money" /></div>';
}
if (val == "hits")
{
texts.innerHTML += '<div><input type="radio" name="condition_hits" value="select_money" /> ></div>';
texts.innerHTML += '<div><input type="radio" name="condition_hits" value="select_money1" /> <</div>';
texts.innerHTML += '<div><input type="text" name="input_hits"' + '" value="select_hits" /></div>';
}
if (val == "time_founded")
{
texts.innerHTML += '<div><input type="radio" name="condition_time" value="select_money" /> before date </div>';
texts.innerHTML += '<div><input type="radio" name="condition_time" value="select_money1" /> after date</div>';
texts.innerHTML += '<div><input type="text" name="input_time"' + '" value="select_date" /></div>';
}
}
}
var print = function()
{
var category = document.droplist.select.value;
document.getElementById("category").innerHTML = category
}
</script>
<body>
<form name="droplist" action="html_form_action.asp" method = "get">
<select id="select" size="1">
<option value=" " selected="selected"> </option>
<option value="employees">Number of Employees</option>
<option value="hits">Hits on TechCrunch</option>
<option value="time_founded">Time Founded</option>
<option value="total_money">Total Money</option>
</select>
<hr/>
<div id="texts"></div>
<input type="button" value="Submit" onClick="print()"/>
</form>
<div id="category"></div>
</body>
I tried to do this by using "//var realValue = document.getElementByName('input_employees')[0].value;" but this is clearly not working. I would also like to know how to then pass on this information as a paramater for a function in my python app.
Thanks!
Might I suggest the following:
Don't re-write the <div>s in your javascript. You can write to the <div>'s innerHTML.
Instead of constantly writing these values, why not disable/enable as necessary?
I unfortunately cannot comment on the question, so I had to post here. Sorry about that.
Related
function onEdit(e) {
var columnToWatch = 116;
var sheet = SpreadsheetApp.getActiveSheet();
var clickedCell = sheet.getActiveCell();
if (clickedCell.getColumn() == columnToWatch) {
showOptionWindow(clickedCell);
}
}
function showOptionWindow(clickedCell) {
var html = '<html><body><form><p>Options :</p>';
html += '<input type="checkbox" name="option1" value="APIs/Storefront">APIs/Storefront<br>';
html += '<input type="checkbox" name="option2" value="Employee Rewards">Employee Rewards<br>';
html += '<input type="checkbox" name="option3" value="Channel Incentives">Channel Incentives<br>';
html += '<input type="checkbox" name="option4" value="Customer Rewards">Customer Rewards<br>';
html += '<input type="checkbox" name="option5" value="Payouts">Payouts<br>';
html += '<br>'
html += '<input type="submit" value="Submit" style="font-weight:bold; background-color:black; color:white;" onclick="google.script.run.processForm(this.form)">';
html += '</form></body></html>';
var ui = HtmlService.createHtmlOutput(html)
.setWidth(250)
.setHeight(275);
SpreadsheetApp.getUi().showModalDialog(ui, 'Pillar Selection');
}
function processForm(form) {
var selectedOptions = [];
if (form.option1.checked) {
selectedOptions.push(form.option1.value);
}
if (form.option2.checked) {
selectedOptions.push(form.option2.value);
}
if (form.option3.checked) {
selectedOptions.push(form.option3.value);
}
if (form.option4.checked) {
selectedOptions.push(form.option4.value);
}
if (form.option5.checked) {
selectedOptions.push(form.option5.value);
}
var sheet = SpreadsheetApp.getActiveSheet();
var clickedCell = sheet.getActiveCell();
clickedCell.setValue(selectedOptions.join(', '));
SpreadsheetApp.getUi().alert('You selected: ' + selectedOptions.join(', '));
SpreadsheetApp.getUi().close();
}
When the user submits the form by clicking the submit button, the script runs the processForm function to process the form data. The selected options are stored in an array, selectedOptions, and joined into a string with a comma-space separator. The value of the clicked cell is then set to the joined string of selected options and a confirmation alert is displayed to the user.
I think it would be simpler to just allow the user to close the dialog than automate it because no solutions are working. I did find an article about this topic on Spreadsheet Dev regarding your issue.
Hope it helps!
Try this:
Use an installable onEdit trigger:
function showOptionWindow() {
var html = '<html><body><form><p>Options :</p>';
html += '<input type="checkbox" name="option1" value="APIs/Storefront">APIs/Storefront<br>';
html += '<input type="checkbox" name="option2" value="Employee Rewards">Employee Rewards<br>';
html += '<input type="checkbox" name="option3" value="Channel Incentives">Channel Incentives<br>';
html += '<input type="checkbox" name="option4" value="Customer Rewards">Customer Rewards<br>';
html += '<input type="checkbox" name="option5" value="Payouts">Payouts<br>';
html += '<br>'
html += '<input type="button" value="Submit" style="font-weight:bold; background-color:black; color:white;" onclick="google.script.run.withSuccessHandler((v) => {google.script.host.close();}).processForm(this.parentNode)"/>';
html += '</form></body></html>';
var ui = HtmlService.createHtmlOutput(html)
.setWidth(250)
.setHeight(275);
SpreadsheetApp.getUi().showModelessDialog(ui, 'Pillar Selection');
}
function onMyEdit(e) {
//e.source.toast("Entry")
const sh = e.range.getSheet();
if (e.range.columnStart == 1 && sh.getName() == "Sheet0") {
//e.source.toast("Gate1")
showOptionWindow(e.range);
}
}
function processForm(obj) {
Logger.log(JSON.stringify(obj))
var selectedOptions = [];
if (obj.hasOwnProperty("option1")) {
selectedOptions.push(obj.option1);
}
if (obj.hasOwnProperty("option2")) {
selectedOptions.push(obj.option2);
}
if (obj.hasOwnProperty("option3")) {
selectedOptions.push(obj.option3);
}
if (obj.hasOwnProperty("option4")) {
selectedOptions.push(obj.option4);
}
if (obj.hasOwnProperty("option5")) {
selectedOptions.push(obj.option5);
}
Logger.log(JSON.stringify(selectedOptions));
var sheet = SpreadsheetApp.getActiveSheet();
var clickedCell = sheet.getActiveCell();
clickedCell.setValue(selectedOptions.join(', '));
SpreadsheetApp.getUi().alert('You selected: ' + selectedOptions.join(', '));
return true;
}
Here is an example of how to close the modal dialog. I have split the html into its own file to better manage the html code.
Code.gs
function showTest() {
var html = HtmlService.createHtmlOutputFromFile("HTML_Test");
SpreadsheetApp.getUi().showModalDialog(html,"Test");
}
HTML_Test.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form>
<p>Options :</p>
<input type="checkbox" name="option1" value="APIs/Storefront">APIs/Storefront<br>
<input type="checkbox" name="option2" value="Employee Rewards">Employee Rewards<br>
<input type="checkbox" name="option3" value="Channel Incentives">Channel Incentives<br>
<input type="checkbox" name="option4" value="Customer Rewards">Customer Rewards<br>
<input type="checkbox" name="option5" value="Payouts">Payouts<br>
<br>
<input type="submit" value="Submit" style="font-weight:bold; background-color:black; color:white;" onclick="clickSubmit(this.form)">
</form>
<script>
function clickSubmit(form) {
try {
google.script.run.withSuccessHandler(
function() {
google.script.host.close();
}
).processForm(form);
}
catch(err) {
alert(err);
}
}
</script>
</body>
</html>
I have a simple HTML form that is used for bookings. Once completed it submits the fields via e-mail which can then be automatically uploaded into my Access database with VBA.
The process works fine if there is just text in the form but I want to include radio button choices as well. The problem is that it doesn't include an indication as to which button has been chosen.
The body of the e-mail, if "text" was entered into the text box and choice2 was selected would be:
text
Choice1
Choice2
Choice3
What I would like it to be is:
text
Choice2.
Can this be done?
A simplified version of my code so far is:
function displayRadioValue() {
var ele = document.getElementsByName('Choice');
for (j = 0; j < ele.length; j++) {
if (ele[j].checked)
document.getElementById("result").innerHTML = ele[j].value;
}
}
function btnClick() {
var link = "mailto:username#domain.com" +
"&subject=" + escape("Radio button trial") +
"&body=" + escape(buildForm());
window.location.href = link;
}
function buildForm() {
var str = "";
var elem = document.getElementById('RBT').elements;
for (var i = 1; i < elem.length; i++) {
if (elem[i].type != "button") {
str += elem[i].value + "\r\n";
}
}
return str;
}
<body>
<form id="RBT" name="RBT">
<fieldset>
<p></p>
<legend>Complete the form and\or choose an option</legend><br>
<div>
<label for "text1">Text1</label><br>
<input id="text1" name="text1"><br>
<input type="radio" id="radio1" name="Choice" value="Choice1" checked onclick="displayRadioValue()">
<label for="radio1">Choice1</label><br>
<input type="radio" id="radio2" name="Choice" value="Choice2" onclick="displayRadioValue()">
<label for="radio2">Choice2</label><br>
<input type="radio" id="radio3" name="Choice" value="Choice3" onclick="displayRadioValue()">
<label for="radio3">Choice3</label><br>
<br></div>
<div id="result" name="result" value="result"></div>
</fieldset>
</form>
<BUTTON type=submit onclick="btnClick()" />
<FONT size=5 bold>Submit choice</FONT>
</BUTTON>
You need to check if the element is checked.
And since you're adding it in the same loop as the text field you also need to make sure the element that has to be checked is actually a radio button:
if(elem[i].type != "radio" || elem[i].checked) {
str += elem[i].value + "\r\n";
}
But: In your snippet everything is added to the TO field of the mail, is that intended?
function displayRadioValue() {
var ele = document.getElementsByName('Choice');
for (j = 0; j < ele.length; j++) {
if (ele[j].checked)
document.getElementById("result").innerHTML = ele[j].value;
}
}
function btnClick() {
var link = "mailto:username#domain.com" +
"&subject=" + escape("Radio button trial") +
"&body=" + escape(buildForm());
window.location.href = link;
}
function buildForm() {
var str = "";
var elem = document.getElementById('RBT').elements;
for (var i = 1; i < elem.length; i++) {
if (elem[i].type != "button") {
if(elem[i].type != "radio" || elem[i].checked) {
str += elem[i].value + "\r\n";
}
}
}
return str;
}
<html>
<head>
<title>Radio button trial</title>
</head>
<body>
<form id="RBT" name="RBT">
<fieldset>
<p></p>
<legend>Complete the form and\or choose an option</legend><br>
<div>
<label for "text1">Text1</label><br>
<input id="text1" name="text1"><br>
<input type="radio" id="radio1" name="Choice" value="Choice1" checked onclick="displayRadioValue()">
<label for="radio1">Choice1</label><br>
<input type="radio" id="radio2" name="Choice" value="Choice2" onclick="displayRadioValue()">
<label for="radio2">Choice2</label><br>
<input type="radio" id="radio3" name="Choice" value="Choice3" onclick="displayRadioValue()">
<label for="radio3">Choice3</label><br>
<br></div>
<div id="result" name="result" value="result"></div>
</fieldset>
</form>
<BUTTON type=submit onclick="btnClick()" />
<FONT size=5 bold>Submit choice</FONT>
</BUTTON>
</body>
</html>
I am trying to take my form which outputs to a text area on the same page and have it only show any enabled fields. You can see it at my JSFiddle here, Right now, when you click the "Combine" button it outputs all 4 categories even though two are disabled by default.
So it will output:
Optional Detail:
Default Detail:
Optional Selection:
Default Selection:
But I want it to look like this if the details toggles are unchecked:
Default Detail:
Default Selection:
Here's my script:
function convertForm() {
var detailToggle = document.getElementById("detailToggle").value;
var basicDetail = document.getElementById("basicDetail").value;
var selectOne = document.getElementById("selectOne").value;
var selectTwo = document.getElementById("selectTwo").value;
var output = "";
output += "Optional Detail: " + detailToggle + "\n";
output += "Default Detail: " + basicDetail + "\n";
output += "Optional Selection: " + selectOne + "\n";
output += "Default Selection: " + selectTwo + "";
document.getElementById("output3").value = output;
}
function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled=false :
toggle.disabled=true;
}
function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}
And the HTML:
<table width="100%" height=" " border="0"><tr>
<td width=550 valign=top>
<form name="Form3" onsubmit="return false;" action="">
Toggle detail:
<input type="checkbox" id="ChecktoggleDetail" class="formArea"
name="Toggledetail" onClick="toggle('ChecktoggleDetail', 'detailToggle')">
<input type="text" class="formArea" name="details"
id="detailToggle" placeholder="Toggle field" disabled required>
<br>
Detail:
<br>
<input type="text" class="formArea" name="Basicdetail" id="basicDetail"
placeholder="Some detail" maxlength="25" required>
<br>
Selection 1:
<input type="checkbox" id="CheckselectOne" class="formArea"
name="detailsgiven" onClick="toggle('CheckselectOne', 'selectOne')">
<br>
<select type="drop" class="formArea" name="Selectone" id="selectOne"
disabled required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option Two">Option 2</option>
</select>
<br>
Selection 2:
<br>
<select type="drop" class="formArea" name="Selecttwo" id="selectTwo"
required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option two">Option 2</option>
</select>
<br>
</td>
<td valign="top">
<table border="0" height="200" ><tr><td valign="top" height=200>
<textarea type="textarea" class="formArea" name="form3output" id="output3"
onclick="this.focus();this.select()" cols="70" rows="10" placeholder=""
required></textarea><br>
</td></tr>
<tr><td valign=top>
<div class="btn-group">
<button value="Combine" onclick="convertForm()"
id="combine3">Combine</button>
</div>
<br>
<div class="btn-group2">
<button type="reset" value="Reset form" onclick="ResetForm();">Reset
form</button> <br>
</div>
</form>
</td></tr></table>
I am still new to Javascript, I am guessing there is some variable to insert, but am not sure what it is. Any help is appreciated.
You May Try For This:
Here I just check the disabled property of the element, if element is not disabled then i added text to output,
function convertForm() {
var detailToggle = document.getElementById("detailToggle").value;
var basicDetail = document.getElementById("basicDetail").value;
var selectOne = document.getElementById("selectOne").value;
var selectTwo = document.getElementById("selectTwo").value;
debugger;
var output = "";
if(!document.getElementById("detailToggle").disabled){
output += "Optional Detail: " + detailToggle + "\n";
}
if(!document.getElementById("basicDetail").disabled){
output += "Default Detail: " + basicDetail + "\n";
}
if(!document.getElementById("selectOne").disabled){
output += "Optional Selection: " + selectOne + "\n";
}
if(!document.getElementById("selectTwo").disabled){
output += "Default Selection: " + selectTwo + "";
}
document.getElementById("output3").value = output;
}
function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true;
}
function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}
For More info visit me on:
https://jsfiddle.net/66qpfyhh/8/
Use below javascript to check element is disabled first then append in variable
Check updated fiddle : https://jsfiddle.net/yogesh078/66qpfyhh/1/
function convertForm() {
var detailToggle = document.getElementById("detailToggle");
var basicDetail = document.getElementById("basicDetail");
var selectOne = document.getElementById("selectOne");
var selectTwo = document.getElementById("selectTwo");
var output = "";
if (!detailToggle.disabled) {
output += "Optional Detail: " + detailToggle.value + "\n";
}
if (!basicDetail.disabled) {
output += "Default Detail: " + basicDetail.value + "\n";
}
if (!selectOne.disabled) {
output += "Optional Selection: " + selectOne.value + "\n";
}
if (!selectTwo.disabled) {
output += "Default Selection: " + selectTwo.value + "";
}
document.getElementById("output3").value = output;
}
function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled = false : toggle.disabled = true;
}
function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}
This code snippet can solve your problem.
function convertForm() {
var detailToggle = document.getElementById("detailToggle").value;
var basicDetail = document.getElementById("basicDetail").value;
var selectOne = document.getElementById("selectOne").value;
var selectTwo = document.getElementById("selectTwo").value;
if(document.getElementById("detailToggle").disabled)
detailToggle='';
if(document.getElementById("selectOne").disabled)
selectOne='';
var output = "";
output += "Optional Detail: " + detailToggle + "\n";
output += "Default Detail: " + basicDetail + "\n";
output += "Optional Selection: " + selectOne + "\n";
output += "Default Selection: " + selectTwo + "";
document.getElementById("output3").value = output;
}
function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true;
}
function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}
<table width="100%" height=" " border="0"><tr>
<td width=550 valign=top>
<form name="Form3" onsubmit="return false;" action="">
Toggle detail:
<input type="checkbox" id="ChecktoggleDetail" class="formArea"
name="Toggledetail" onClick="toggle('ChecktoggleDetail', 'detailToggle')">
<input type="text" class="formArea" name="details"
id="detailToggle" placeholder="Toggle field" disabled required>
<br>
Detail:
<br>
<input type="text" class="formArea" name="Basicdetail" id="basicDetail"
placeholder="Some detail" maxlength="25" required>
<br>
Selection 1:
<input type="checkbox" id="CheckselectOne" class="formArea"
name="detailsgiven" onClick="toggle('CheckselectOne', 'selectOne')">
<br>
<select type="drop" class="formArea" name="Selectone" id="selectOne" disabled required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option Two">Option 2</option>
</select>
<br>
Selection 2:
<br>
<select type="drop" class="formArea" name="Selecttwo" id="selectTwo" required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option two">Option 2</option>
</select>
<br>
</td>
<td valign="top">
<table border="0" height="200" ><tr><td valign="top" height=200>
<textarea type="textarea" class="formArea" name="form3output" id="output3"
onclick="this.focus();this.select()" cols="70" rows="10" placeholder="" required> </textarea><br>
</td></tr>
<tr><td valign=top>
<div class="btn-group">
<button value="Combine" onclick="convertForm()" id="combine3">Combine</button>
</div>
<br>
<div class="btn-group2">
<button type="reset" value="Reset form" onclick="ResetForm();">Reset form</button> <br>
</div>
</form>
</td></tr></table>
I have a URL, and html form like below, if any of the key matches to any of the field’s ID then bind value to that field.
I wrote below script, it is working fine when the field ids, param name are static.
How to bind the dynamic values to the associated dynamic fields by looping through the URL’s param (key, value) using JavaScript only.
var url = window.location.href;
var regex = new RegExp("[?&]msg(=([^&#]*)|&|#|$)");
var results = regex.exec(url);
document.getElementById("msg").innerHTML = !results ? "" : !results[2] ? "" : decodeURIComponent(results[2].replace(/\+/g, " "));
HTML form:
<input type="text" id="URL" value="http://xxxxz.com?email=bob#gmail.com&country=us&gender=male&msg=recordupdated" />
<label>Email:</label>
<input type="text" id="email" />
<label>Country:</label>
<select id="country">
<option value="ind">India</option>
<option value="us">USA</option>
</select>
<label>Gender:</label>
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" />Female
<span id="msg"></span>
<button type="submit">Submit</button>
You can try out this method : jsFiddle
This is with the assumption that the id or name of the element will be same as the parameter name in url.
function setValues() {
var s = document.getElementById("URL").value;
var queryString = s.split("?");
var params = queryString[1].split("&");
for (var i = 0; i < params.length; i++) {
var attribs = params[i].split("=");
if (attribs[0] === "msg") continue;
var elem = document.getElementById(attribs[0]);
var newVal = '';
if (elem) {
newVal = elem.value
} else {
elem = document.getElementsByName(attribs[0]);
for (var i = 0; i < elem.length; i++) {
if (elem[i].checked) {
newVal = elem[i].value;
}
}
}
params[i] = attribs[0] + "=" + (newVal == null ? '' : newVal);
}
document.getElementById("msg").innerHTML = queryString[0] + "?" + params.join("&");
}
<input type="text" id="URL" value="http://xxxxz.com?email=bob#gmail.com&country=us&gender=male&msg=recordupdated" style="width:100%;" />
<br/>
<label>Email:</label>
<input type="text" id="email" value="test#test.com" />
<label>Country:</label>
<select id="country">
<option value="ind">India</option>
<option value="us">USA</option>
</select>
<label>Gender:</label>
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" checked/>Female
<hr/>
<span id="msg"></span>
<hr/>
<button type="submit" onclick="setValues()">Submit</button>
P.S. : I know its bit lengthy and uses .split & for loops etc.. But i came up with this to keep the solution very simple. Suggestions to improve this are welcome :)
Take a look at this:
<div id="main">
<div id="a">
<input value="1" />
<input value="2" />
<input value="3" />
</div>
<div id="b">
<input value="4" />
<input value="5" />
</div>
</div>
I need to get each input value inside div#a and each input value in div#b and build a matrix/mixing of those values, taking the same example as before, this is what the code should return:
<div id="mixed">
<input value="1" /><input value="4" />
<input value="1" /><input value="5" />
<input value="2" /><input value="4" />
<input value="2" /><input value="5" />
<input value="3" /><input value="4" />
<input value="3" /><input value="5" />
</div>
I have tried to move inside div#main using this code:
$("#main div").each(function() {
var that = $(this);
console.log("that.attr('id')");
});
But console.log() never logs something so I must doing something wrong. This is a advanced topic for me and need some help, any?
UPDATE
At this point I have this maded:
$("#choices div").each(function() {
var that = $(this);
that.each(function() {
var thati = $(this);
console.log(thati);
});
});
And I think in the second .each() is where I can get the input values and try to build the matrix
Should help:
var arr = [];
$('#a input').each(function () {
var that = $(this);
$('#b input').each(function () {
arr.push(that.val());
arr.push($(this).val());
});
});
Then go through the array and dynamically generate the HTML. You can treat this like a matrix by stepping every 2 values.
var a = $('#a input');
var b = $('#b input');
var html = '';
a.each(function () {
var first = this;
b.each(function () {
html += '<div>' + first.outerHTML + this.outerHTML + '</div>'
});
});
$('#mix').html(html);
jsFiddle here
update: code for what's asked for in comments.
var divs = $('#main > div');
var html = '';
divs.each(function (index) {
var divsLength = divs.length,
inputs = $('input', divs[index]),
inputsLength = inputs.length;
for (var i = 0; i < divsLength; i++) {
if (i === index) {
continue;
}
for (var j = 0; j < inputsLength; j++) {
$('input', divs[i]).each(function () {
html += inputs[j].outerHTML + this.outerHTML + '<br />';
});
}
}
});
$('#mix').html(html);