We Keep Coding

Evaluate sum of values without clicking a button

I really don't know how to program in Javascript, yet I've tried to do some stuff. I have values to be summed if some are selected. The following function does sum operation and show result at once without clicking a button only for checkbox fields, not for the dropdown list and text fields.
However, I need to involve the selected values as well from the dropdown lists and entered both text fields in the same manner of the checkboxes and their immediate responses(output).
I think change method can be used in the same manner.
#Edit:
Sorry, I forgot the tell but, I need to multiply the m2 entered value by before summing with 3134,204499 and Bina Yasi with -566,2202888.
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#housepriceguesslist :checkbox').change(calcAndShowTotal).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="housepriceguesslist">
<select id="ilce">
<option value="0">Choose a state</option>
<option value="63999.50712318567">Adalar</option>
<option value="6259.918435398593">Ataşehir</option>
<option value="46285.35729304834">Beykoz</option>
<option value="54258.92953697798">Kadıköy</option>
<option value="-3500.620905653726">Kartal</option>
<option value="12889.41219909602">Maltepe</option>
<option value="-33711.83156847153">Pendik</option>
<option value="-34577.42485251657">Sancaktepe</option>
<option value="-52183.1608811019">Sultanbeyli</option>
<option value="-34760.71735007784">Tuzla</option>
<option value="-27379.87966213786">Çekmeköy</option>
<option value="-5332.203990418937">Ümraniye</option>
<option value="26485.33532820411">Üsküdar</option>
<option value="-18732.62070553167">Şile</option>
</select>
<select id="odasalon">
<option value="0">Choose room number</option>
<option value="5940.027623576261">1+0</option>
<option value="-1399.625767475593">1+1</option>
<option value="-3033.638999060459">2+1</option>
<option value="11519.83954756076">3+1</option>
<option value="-7018.52116545078">4+1</option>
<option value="-6008.081239150166">5+1</option>
</select>
m2: <input type="text" id="m2" /> Bina Yasi: <input type="text" id="binayasi" />
<br/>
<br/> Features:
<br/>
<br/>
<input type="checkbox" id="Bati" value="Bati" price="-783.4452683566533" /> <label for="Bati">Bati</label>
<br/>
<input type="checkbox" id="Dogu" value="Dogu" price="-4895.732009084263" /> <label for="Dogu">Dogu</label>
<br/>
<input type="checkbox" id="Guney" value="Guney" price="-2599.001349652765" /> <label for="Guney">Guney</label>
<br/>
<input type="checkbox" id="Kuzey" value="Kuzey" price="3832.013070771234" /> <label for="Kuzey">Kuzey</label>
<br/>
<input type="checkbox" id="Amerikan Mutfak" value="Amerikan Mutfak" price="2346.347889828301" /> <label for="Amerikan Mutfak">Amerikan Mutfak</label>
<br/>
<input type="checkbox" id="Dusakabin" value="Dusakabin" price="-176.5092353740256" /> <label for="Dusakabin">Dusakabin</label>
<br/>
<input type="checkbox" id="Akilli Ev" value="Akilli Ev" price="-4756.206384200719" /> <label for="Akilli Ev">Akilli Ev</label>
<br/>
<input type="checkbox" id="Ebeveyn Banyosu" value="Ebeveyn Banyosu" price="10135.50644456019" /> <label for="Ebeveyn Banyosu">Ebeveyn Banyosu</label>
<br/>
<input type="checkbox" id="Kiler" value="Kiler" price="-10693.49979821809" /> <label for="Kiler">Kiler</label>
<br/>
<input type="checkbox" id="Kuvet" value="Kuvet" price="-941.0629741243247" /> <label for="Kuvet">Kuvet</label>
<br/>
<input type="checkbox" id="Parke Zemin" value="Parke Zemin" price="-8453.847199707092" /> <label for="Parke Zemin">Parke Zemin</label>
<br/>
<input type="checkbox" id="Seramik Zemin" value="Seramik Zemin" price="1545.025601000643" /> <label for="Seramik Zemin">Seramik Zemin</label>
<br/>
<input type="checkbox" id="Sauna" value="Sauna" price="8677.708176289747" /> <label for="Sauna">Sauna</label>
<br/>
<input type="checkbox" id="Spor Salonu" value="Spor Salonu" price="1159.884679563385" /> <label for="Spor Salonu">Spor Salonu</label>
<br/>
<input type="checkbox" id="Tenis Kortu" value="Tenis Kortu" price="16065.26794172257" /> <label for="Tenis Kortu">Tenis Kortu</label>
<br/>
</div>
<input type="text" id="total" value="0" />

You can loop over all the <select> boxes and text inputs with:
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$("#housepriceguesslist select, #housepriceguesslist :text").each(function() {
let multiplier = 1;
if (this.id == "m2") {
multiplier = 3134.204499;
}
else if (this.id == "binayasi") {
multiplier = -566.2202888;
}
if (this.value) {
total += parseFloat(this.value) * multiplier;
}
});
$('#total').val(total);
}
And if you change the checkboxes to use value instead of price, you can do them all in one loop:
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$("#housepriceguesslist select, #housepriceguesslist :text, #housepriceguesslist :checkbox:checked").each(function() {
let multiplier = 1;
if (this.id == "m2") {
multiplier = 3134.204499;
else if (this.id == "binyasi") {
multiplier = -566.2202888;
}
if (this.value) {
total += parseFloat(this.value) * multiplier;
}
});
$('#total').val(total);
}
And call the function when any of the inputs are changed:
$('#housepriceguesslist input, #housepriceguesslist select').change(calcAndShowTotal).change();

This solution is simple, just the get the list of all the inputs (i.e. checkbox, and dropdown) using the .find() method and the selector 'input:checkbox, input:text, select'. Then verify if each one of these inputs elements has the attribute checked or select for the checkbox and select input types respectively, or it is a multiplier for the text inputs. This verification ca be done inside of the each() method callback. Finally, just convert then the value to a number, using the parseFloat() method and add it to the total accumulator.
Finally, sum the value to the total input. Like this:
let container;
let inputs;
let total;
function calcAndShowTotal() {
let sum = 55435.04798; // it is constant value which must be the beginning value.
let value;
inputs.each(function() {
if ($(this).is('input:checkbox:checked')) {
// If is a checkbox
value = parseFloat($(this).attr('price')) || 0;
sum += value;
} else if ($(this).is('input:text:not(#total)')) {
// If is a text wait until you move to another element
let factor = 1;
if (this.id == 'm2') {
factor = 3134.204499;
} else if (this.id == 'binayasi') {
factor = -566.2202888;
}
value = parseFloat($(this).val()) * factor || 0;
sum += value;
} else if ($(this).is('select')) {
// If is a option from the select element
value = parseFloat($('option:selected', this).val()) || 0;
sum += value;
}
});
total.val(sum);
}
function initHandlers() {
inputs.on('keydown', function(e) {
let focusable, next;
if (e.keyCode == 13) {
focusable = inputs.filter(':visible');
next = focusable.eq(focusable.index(this) + 1);
if (next.length) {
next.focus();
}
return false;
}
});
inputs.change(calcAndShowTotal);
calcAndShowTotal();
}
$(function() {
console.log('ready!');
total = $('#total');
container = $('#housepriceguesslist');
inputs = container.find('input:checkbox, input:text, select');
initHandlers();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="housepriceguesslist">
Total: <input type="text" id="total" value="0" />
<br/>
<br/>
<select id="ilce">
<option value="0">Choose a state</option>
<option value="63999.50712318567">Adalar</option>
<option value="6259.918435398593">Ataşehir</option>
<option value="46285.35729304834">Beykoz</option>
<option value="54258.92953697798">Kadıköy</option>
<option value="-3500.620905653726">Kartal</option>
<option value="12889.41219909602">Maltepe</option>
<option value="-33711.83156847153">Pendik</option>
<option value="-34577.42485251657">Sancaktepe</option>
<option value="-52183.1608811019">Sultanbeyli</option>
<option value="-34760.71735007784">Tuzla</option>
<option value="-27379.87966213786">Çekmeköy</option>
<option value="-5332.203990418937">Ümraniye</option>
<option value="26485.33532820411">Üsküdar</option>
<option value="-18732.62070553167">Şile</option>
</select>
<select id="odasalon">
<option value="0">Choose room number</option>
<option value="5940.027623576261">1+0</option>
<option value="-1399.625767475593">1+1</option>
<option value="-3033.638999060459">2+1</option>
<option value="11519.83954756076">3+1</option>
<option value="-7018.52116545078">4+1</option>
<option value="-6008.081239150166">5+1</option>
</select>
m2: <input type="text" id="m2" />
Bina Yasi: <input type="text" id="binayasi" />
<br/>
<br/> Features:
<br/>
<br/>
<input type="checkbox" id="Bati" value="Bati" price="-783.4452683566533" /> <label for="Bati">Bati</label>
<br/>
<input type="checkbox" id="Dogu" value="Dogu" price="-4895.732009084263" /> <label for="Dogu">Dogu</label>
<br/>
<input type="checkbox" id="Guney" value="Guney" price="-2599.001349652765" /> <label for="Guney">Guney</label>
<br/>
<input type="checkbox" id="Kuzey" value="Kuzey" price="3832.013070771234" /> <label for="Kuzey">Kuzey</label>
<br/>
<input type="checkbox" id="Amerikan Mutfak" value="Amerikan Mutfak" price="2346.347889828301" /> <label for="Amerikan Mutfak">Amerikan Mutfak</label>
<br/>
<input type="checkbox" id="Dusakabin" value="Dusakabin" price="-176.5092353740256" /> <label for="Dusakabin">Dusakabin</label>
<br/>
<input type="checkbox" id="Akilli Ev" value="Akilli Ev" price="-4756.206384200719" /> <label for="Akilli Ev">Akilli Ev</label>
<br/>
<input type="checkbox" id="Ebeveyn Banyosu" value="Ebeveyn Banyosu" price="10135.50644456019" /> <label for="Ebeveyn Banyosu">Ebeveyn Banyosu</label>
<br/>
<input type="checkbox" id="Kiler" value="Kiler" price="-10693.49979821809" /> <label for="Kiler">Kiler</label>
<br/>
<input type="checkbox" id="Kuvet" value="Kuvet" price="-941.0629741243247" /> <label for="Kuvet">Kuvet</label>
<br/>
<input type="checkbox" id="Parke Zemin" value="Parke Zemin" price="-8453.847199707092" /> <label for="Parke Zemin">Parke Zemin</label>
<br/>
<input type="checkbox" id="Seramik Zemin" value="Seramik Zemin" price="1545.025601000643" /> <label for="Seramik Zemin">Seramik Zemin</label>
<br/>
<input type="checkbox" id="Sauna" value="Sauna" price="8677.708176289747" /> <label for="Sauna">Sauna</label>
<br/>
<input type="checkbox" id="Spor Salonu" value="Spor Salonu" price="1159.884679563385" /> <label for="Spor Salonu">Spor Salonu</label>
<br/>
<input type="checkbox" id="Tenis Kortu" value="Tenis Kortu" price="16065.26794172257" /> <label for="Tenis Kortu">Tenis Kortu</label>
<br/>
</div>
Note:
Remember to round the numbers to get more precision. The text modification will apply after you tab, or move to another element. So I added an enter listener so when you press enter is gonna move to the next element like when you press tab. Also, I moved the total to the top so you can see the results in the preview.
Update:
I recommend you to use the $(function(){}); to get the document when is ready. Inside you can assign the values of your elements. I notice that there was a bug in my code whenever ever you uncheck a checked element the Total should be 55435.04798, but it shows the double it is because total is also a text input.

Similar to Barmar's, I added all elements to the .each() loop but also added the .change() handler to all elements:
var context = $('#housepriceguesslist');
var elems = $('input:checkbox, input:text, select', context);
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
elems.each(function() {
if ( $(this).is('input:checkbox:checked') ) {
total += parseFloat($(this).attr('price')) || 0;
} else if ( $(this).is('#m2') ) {
total += parseFloat($(this).val()) * 3134.204499 || 0;
} else if ( $(this).is('#binayasi') ) {
total += parseFloat($(this).val()) * -566.2202888 || 0;
} else if ( $(this).is('select') ) {
total += parseFloat($('option:selected',this).val()) || 0;
}
});
$('#total').val(total);
}
elems.change(calcAndShowTotal); // handlers
calcAndShowTotal(); // first run
See example here: https://jsfiddle.net/qgvsern4/1/

Dynamic textbox that calculates price based on change in quantity or item

I'm new to javascript and am keen on learning.
I currently have a form that allows the user to select their food, enter their quantity and calculates the price.
My function is able to dynamically calculate the price whenever i change the food item selected. However, if i choose re-enter another quantity, the price will not update dynamically. I'm trying make it so that the price will dyanmically update whenever i change either the food dropdown or the quantity value. Appreciate any kind help.
Thank you.
Attached is my code.
function getSelectValue() {
var selectedValue1 = document.getElementById("dropdownList").value;
if (selectedValue1 === 'Carbonara') {
var currentPrice1 = 4.50 * parseFloat(amount_1.value);
document.getElementById("price_1").value = "$" + currentPrice1;
} else {
var currentPrice1 = 3.50 * parseFloat(amount_1.value);
document.getElementById("price_1").value = "$" + currentPrice1;
}
var selectedValue2 = document.getElementById("dropdownList2").value;
if (selectedValue2 === 'Carbonara') {
document.getElementById("price_2").value = "4.50";
var currentPrice2 = 4.50 * parseFloat(amount_2.value);
document.getElementById("price_2").value = "$" + currentPrice1;
} else {
var currentPrice2 = 3.50 * parseFloat(amount_2.value);
document.getElementById("price_2").value = "3.50";
}
}
Select Food:
<select id="dropdownList" name="dropdownList" onchange="getSelectValue();">
<option value="Prawn Aglio Olio">Prawn Aglio Olio</option>
<option value="Carbonara">Carbonara</option>
</select>
<br>
Select Quantity:
<input type="text" id="amount_1">
<br>
Price per unit:
<input type="text" id="price_1" value="" disabled>
<br>
<br>
<!-- Second Selection -->
Select Food:
<select id="dropdownList2" name="dropdownList2" onchange="getSelectValue();">
<option value="">Prawn Aglio Olio</option>
<option value="Carbonara">Carbonara</option>
</select>
<br>
Select Quantity:
<input type="text" id="amount_2">
<br>
Price per unit:
<input type="text" id="price_2" value="" disabled>
<br>
<input type ="button" value="Submit">
<a href="vendor.jsp">
<input type="button" value="Back">
</a>
</form>

Try to write the same event (getSelectedValue()) in the input of quantity
Try to initialize all the variables at the beginning so that everything is cleaner
Check that the input element.value "Quanity" exists, if so, fill in the field of 'price'
Test this
function getSelectValue() {
var dropdownList = document.getElementById("dropdownList");
var price_1 = document.getElementById("price_1")
var amount_1 = document.getElementById("amount_1");
var dropdownList2 = document.getElementById("dropdownList2");
var price_2 = document.getElementById("price_2");
var amount_2 = document.getElementById("amount_2");
var currentPrice1 = "$" + 0;
var currentPrice2 = "$" + 0;
if (amount_1.value) {
if (dropdownList.value === 'Carbonara') {
currentPrice1 = 4.50 * parseFloat(amount_1.value);
} else {
currentPrice1 = 3.50 * parseFloat(amount_1.value);
}
price_1.value = "$" + currentPrice1;
}
if (amount_2.value) {
if (dropdownList2.value === 'Carbonara') {
currentPrice2 = 4.50 * parseFloat(amount_2.value);
} else {
currentPrice2 = 3.50 * parseFloat(amount_2.value);
}
price_2.value = "$" + currentPrice2;
}
}
Select Food:
<select id="dropdownList" name="dropdownList" onchange="getSelectValue();">
<option value="Prawn Aglio Olio">Prawn Aglio Olio</option>
<option value="Carbonara">Carbonara</option>
</select>
<br>
Select Quantity:
<input type="number" id="amount_1" onchange="getSelectValue();">
<br>
Price per unit:
<input type="text" id="price_1" value="" disabled>
<br>
<br>
<!-- Second Selection -->
Select Food:
<select id="dropdownList2" name="dropdownList2" onchange="getSelectValue();">
<option value="">Prawn Aglio Olio</option>
<option value="Carbonara">Carbonara</option>
</select>
<br>
Select Quantity:
<input type="number" id="amount_2" onchange="getSelectValue();">
<br>
Price per unit:
<input type="text" id="price_2" value="" disabled>
<br>
<input type ="button" value="Submit">
<a href="vendor.jsp">
<input type="button" value="Back">
</a>
</form>

how to bind URL param (key, values) to html fields dynamically using javascript

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 :)

The result after adding 2 function is undefined

I am trying to add two functions calculate1() and calculate2(). Both functions are taking values from function populate(). Is the code wrong? Once I enter an amount on both functions, the result is total amount undefined.
<form>
Car:
<select id="slct1" name="slct1" onchange="populate('slct1','slct2')">
<option value=""></option>
<option value="Fiat">Fiat</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
Type of Car:
<select id="slct2" name="slct2">
</select>
<label> Amount <input style="width:10%" type="number" name="amount1" id="amount1" onkeyup="result()"/> (g) </label>
<label> Total <input style="width:10%" type="number" name="answer1" id="answer1"/></label>
<input type="reset" name="Reset" value="Reset" onclick="rstFunction()"/>
<br><br><br>
<hr>
<br>
</form>
<!--Starts 2 selection-->
<form>
Food:
<select id="slct1a" name="slct1a" onchange="populate('slct1a','slct2a')">
<option value=""></option>
<option value="Fiat">Fiat</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
Type of Food:
<select id="slct2a" name="slct2a">
</select>
<label> Amount <input style="width:10%" type="number" name="amount2" id="amount2" onkeyup="result()"/> (g) </label>
<label> Total <input style="width:10%" type="number" name="answer2" id="answer2"/></label>
<input type="reset" name="Reset" value="Reset" onclick="rstFunction()"/>
<br><br><br>
<hr>
<br>
<p id="ansCAL"></p>
</form>
<input type="reset" onclick="resetFunctions()" value="Reset">
</script>
var t = total1 + total2;
function result() {
document.getElementById('ansCAL').value = calculate1() + calculate2();
}
function populate(select1, select2)
{
var Brand1 = document.getElementById(select1);
var Brand2 = document.getElementById(select2);
Brand2.innerHTML = "";
if(Brand1.value == "Fiat")
{
var optionArray = ["|","4000|Uno","5000|Ritmo","6000|Panda"];
}
else if(Brand1.value == "Dodge")
{
var optionArray = ["|","4000|Avanger","5000|Challengere","6000|Charger"];
}
else if(Brand1.value == "Ford")
{
var optionArray = ["|","7000|Mustang","8000|Shelby","focus|Focus"];
}
for(var option in optionArray)//the options within the optionArray
{
var pair = optionArray[option].split("|");//in tha variable pair is stored both value and label
var newOption = document.createElement("option");// option in the bracket is used to create new options or you can insert divs paragraph etc
newOption.value = pair[0];//pair 0 gives the value
newOption.innerHTML = pair[1];//pair 1 gives the label
Brand2.options.add(newOption);
}
}
function calculate1() {
Brand1 = document.getElementById('slct1').value;
Brand2 = document.getElementById('slct2').value;
multi=document.getElementById('amount1').value;
total1=parseInt((Brand2)*multi/100);
document.getElementById('answer1').value=total1;
document.getElementById("ansCAL").innerHTML = "<br>Total amount " + t;
}
function calculate2() {
Brand1 = document.getElementById('slct1a').value;
Brand2 = document.getElementById('slct2a').value;
multi=document.getElementById('amount2').value;/*to change accordingly amount1*/
total2=parseInt(((Brand2)*multi)/100);
document.getElementById('answer2').value=total2;/*to change accordingly amount1*/
document.getElementById("ansCAL").innerHTML = "<br>Total amount " + t;
}
function resetFunctions() {
//using the array forEach method on the form
Array.prototype.forEach.call(document.forms,function(el,idx,array){
//the method parameters are element, index and the array
// we loop through all the forms and invoking reset()
el.reset();
});
result();
}
function rstFunction()
{
document.getElementById("ansCAL").innerHTML = "<br>Total amount" + result().value;
}
</script>

The answer was to increase the total in every calculate function. Example (total + total1). Removed the variable t and declared the totals in the printout section.

Grab multiple radio values

I have a section with a lot of blocks (I'll use only two on this example). The situation is: I have a <div> with a <input>, a <select> group and <radio> buttons. After filling all of them and clicking on "Grab" button, the script will show an alert with this values.
But if you fill more then one block, the last one doesn't grab the radios. It always returns "undefined". If you leave the first blocks with empty radios and fill the last one, the info on the alert screen will show the last one, however it's wrong.
What I'm doing wrong?
Here is the JSFiddle
JavaScript
$(document).ready(function(){
var contentArray = '';
$('button').click(function() {
$('.option_group').each(function(i) {
var NotEmptyTextBoxes = $('input:text').filter(function() { return this.value !== ""; });
var NotEmptyCombo = $('option:selected').filter(function() { return this.text !== ""; });
NotEmptyTextBoxes.each(function() {
name = this.name;
val = this.value;
var combo = $('#c_'+name).val();
var radio = $('input[name=r_'+name+']:checked', '#theform').val();
contentArray = contentArray+name+'='+"'"+val+"'"+","+"'"+combo+"'"+","+radio+";"+"|";
radio = '';
});
alert(contentArray);
contentArray = '';
return false;
});
});
});
HTML
<form id ="theform">
<div class="option_group" id="bloco">
<input type="text" placeholder="Cargo" name="cargo" id="carga"/>
<select class="filtercombo" id="c_cargo">
<option>like</option>
<option>=</option>
<option>!=</option>
<option><</option>
<option><=</option>
<option>></option>
<option>>=</option>
<option>is null</option>
<option>is not null</option>
<option>in</option>
<option>not in</option>
<option>between</option>
<option>contains</option>
<option>not like</option>
</select>
<input type="radio" value="up" name="r_cargo">
<input type="radio" value="down" name="r_cargo">
<input type="radio" value="flat" name="r_cargo">
</div><!-- #end of option_group -->
<div class="option_group" id="bloco">
<input type="text" placeholder="provider" name="provider" id="provider"/>
<select class="filtercombo" id="c_provider">
<option>like</option>
<option>=</option>
<option>!=</option>
<option><</option>
<option><=</option>
<option>></option>
<option>>=</option>
<option>is null</option>
<option>is not null</option>
<option>in</option>
<option>not in</option>
<option>between</option>
<option>contains</option>
<option>not like</option>
</select>
<input type="radio" value="up" name="r_provider1" />
<input type="radio" value="down" name="r_provider2" />
<input type="radio" value="flat" name="r_provider3" />
</div><!-- #end of option_group -->
<button type="button">grab</button>
</form>

You have different names for your last group of radios r_provider1, r_provider2, r_provider3, they should all have the same name 'r_provider'.