Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset=utf-8 />
<title>Position Trail</title>
  <script type="text/javascript">
function constructJSON()
{
  var myArray = {};
  myArray[0] = createArray('apple');
  myArray[1] = createArray('Mango');
  myArray[2] = createArray('Pineapple');
  myArray[3] = createArray('Grape');
  console.dir(myArray);
  $("#a").html(JSON.stringify(myArray));
  /*
  var obj = $("#myform").serializeArray();
  $("#a").html(JSON.stringify(obj));*/
}
​
function createArray(name){
    var data = new Object();
    var innerArray = [];
    var arrayCount = 0;
    var el = "input[data-gpname='"+name+"']";
    $el = $(el);
    $.each($el, function(i, item){
        data = {};
        if(item.checked){
            data.name = $(item).val();
            data.price = $(item).attr("data-price");
            innerArray[arrayCount] = data;
            arrayCount++;
        }
    });
    return innerArray;
}
</script>
</head>
<body>
  <form method="post" id="myform">
Apple
<input type="radio" onclick="constructJSON()" id="one" name="apple" data-gpname="apple" data-price="10" value="light"/> Light
<input type="radio" onclick="constructJSON()" id="two" name="apple" data-gpname="apple" data-price="20" value="dark" /> Dark
<input type="radio" onclick="constructJSON()" id="one1" name="apple1" data-gpname="apple"  data-price="120" value="light2"/> Light11
<input type="radio" onclick="constructJSON()" id="two1" name="apple1" data-gpname="apple" data-price="210" value="dark1" /> Dark22
<input type="text" id="appleqty" name="appleqty" value="" />
<br>
Mango
<input type="radio" onclick="constructJSON()" id="three" name="Mango" data-gpname="Mango"  data-price="30" value="light"/> Light
<input type="radio" onclick="constructJSON()" id="one" name="Mango" data-gpname="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />
<br>
Pine Apple
<input type="radio" onclick="constructJSON()" id="four" name="Pineapple" data-gpname="Pineapple" data-price="50" value="light"/> Light
<input type="radio" onclick="constructJSON()" id="five" name="Pineapple" data-gpname="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
<br>
Grape
<input type="radio" onclick="constructJSON()" id="six" name="Grape" data-gpname="Grape" data-price="70" value="light"/> Light
<input type="radio" onclick="constructJSON()" id="seven" name="Grape" data-gpname="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
​
<textarea name="a" id="a" cols="50"></textarea>
<input type="submit" name="se" value="se" />
​
</form>
</body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers