I have an html like below

HTML:

 <INPUT TYPE=CHECKBOX NAME="clcik" onClick="add('1234','blah')" />
 <input type="hidden" id="project" value="" />

JS:

    function add(obj1 , obj2){
    var jsonArray = [];
    var jsonObj = { product_id : obj1 , name : obj2 };
    jsonArray.push(jsonObj);
    var field = document.getElementById('project');
    field.setAttribute('value', JSON.stringify(jsonArray));
    alert(field.getAttribute('value'));
    }

I am trying to set first and retrieve again to check but nothing is happening..I can't understand where I am wrong...?

I have an html like below

HTML:

 <INPUT TYPE=CHECKBOX NAME="clcik" onClick="add('1234','blah')" />
 <input type="hidden" id="project" value="" />

JS:

    function add(obj1 , obj2){
    var jsonArray = [];
    var jsonObj = { product_id : obj1 , name : obj2 };
    jsonArray.push(jsonObj);
    var field = document.getElementById('project');
    field.setAttribute('value', JSON.stringify(jsonArray));
    alert(field.getAttribute('value'));
    }

I am trying to set first and retrieve again to check but nothing is happening..I can't understand where I am wrong...?

• javascript
• json

• 1 Where is the stringData variable set? – jfriend00 Commented Aug 17, 2011 at 18:39
• @jfriend00, I'm sure that's it. Write up an answer with var stringData = JSON.stringify(jsonArray) replaced. – hayesgm Commented Aug 17, 2011 at 18:41
• Its probably the output of JSON.stringify – Mrchief Commented Aug 17, 2011 at 18:41
• This is not jQuery related - i've removed the tag and updated the title. – Stephen Commented Aug 17, 2011 at 18:43
• Your question are all about one and the same problem. You won't get far if you are trying to solve the problem step by step by asking questions here (and questions about solutions you get here). I really remend you to take a step back and read about JavaScript, DOM, HTML etc so that you have a basic understanding of it and can use it. – Felix Kling Commented Aug 17, 2011 at 20:00

5 Answers 5

I guess you missed to get the stringify result into stringData variable because of which you are getting a js error before it reaches the line where you are trying to alert the value.

JSON or JSON.stringify is not provided by jQuery you have to include json2 library on the page if the browser natively do not support it.

Try this

function add(obj1 , obj2){
    var jsonArray = [];
    var jsonObj = { product_id : obj1 , name : obj2 };

    jsonArray.push(jsonObj);
    var stringData = JSON.stringify(jsonArray);

    var field = document.getElementById('project');

    field.setAttribute('value', stringData);
    alert(field.getAttribute('value'));
}

Code to remove element from array based on your request in the ment.

var newArray = [], productIdToRemove = "1234";
$.each(jsonArray, function(){
   if(this.product_id != productIdToRemove){
      newArray.push(this);
   }
});

//Now newArray will not have '1234'

Change

JSON.stringify(jsonArray)
// to
var stringData = JSON.stringify(jsonArray);

Other problems with the fiddle, fixed: http://jsfiddle/mattball/qWCwa/7/

In your example, you never set stringData.

get/set the "value" property directly on the input, not getAttribute and setAttribute methods.

After changing the code to assign stringData, it seems to work for me:

function add(obj1 , obj2){
    var jsonArray = [];
    var jsonObj = { product_id : obj1 , name : obj2 };
    jsonArray.push(jsonObj);
    var stringData = JSON.stringify(jsonArray)
    var field = document.getElementById('project');
    field.setAttribute('value', stringData);
    alert(field.getAttribute('value'));
    }

add(1, 2);

You can see it working here: http://jsfiddle/jfriend00/HNuak/.

FYI, if you just run in an environment where you can see javascript execution errors (like the Chrome or Firefox debuggers), errors like this would be easy to see in the error console.