3

I don't want to post the data to a server I want to pass it into a client side function that takes an object. What is the best way to do that?

fancy
  • 48,619
  • 62
  • 153
  • 231
  • Can you elaborate / add some context? – m.edmondson Sep 09 '11 at 09:28
  • 2
    Have a look at this question - http://stackoverflow.com/questions/1184624/serialize-form-to-json-with-jquery – ipr101 Sep 09 '11 at 09:29
  • 2
    *"I want to pass it into a client side function that takes a json object."* I'll give you 10:1 odds that you don't, that instead you want to pass it to a client-side function that accepts a **JavaScript** object. JSON is purely a textual notation; by the time you're actually interacting with things, they're JavaScript objects, nothing whatsoever to do with JSON. Now, if your client-side function accepts a string and expects that string to contain JSON-encoded data that it will deserialize and process, then apologies. :-) But I suspect not. – T.J. Crowder Sep 09 '11 at 09:35

3 Answers3

6

You can just create your own object as such:

<form name='f1'>

<input type='text' name='firstname' />
<input type='text' name='lastname' />

</form>

window.onload = function()
{
    var Person = 
    {  
      'FirstName' : document.f1.firstname.value, 
      'LastName' : document.f1.lastname.value 
    }
}

A JSON object is just a regular Javascript object, because JSON is subset of Javascript.

TJHeuvel
  • 12,403
  • 4
  • 37
  • 46
2

If you're using jQuery you may want to look at the .serializeArray() function it provides as it does all you want in a single call. Using TJ's example;

<script type="text/javascript">
    $(function () {
        $('form[name="f1"]').submit(function() {
            var person = $(this).serializeArray();
            // Do what you will with 'person' now...
        });
    });
</script>
<form name="f1">
    <input type="text" name="firstname" />
    <input type="text" name="lastname" />
    <input type="submit" value="Submit" />
</form>

This way you don't have to manually build an object and declare a property for each field which helps avoid human error.

If for some reason you don't want to use jQuery then you could always look at the code to see the logic used and create your own function.

Community
  • 1
  • 1
neocotic
  • 2,131
  • 18
  • 18
  • hrrm, this doesn't work perfectly. It results in this string `email=test%40example.com&password=1234` my goal is to have `{email:'test@example.com', password: '1234'}` @Alasdair – fancy Sep 09 '11 at 10:27
  • @fancy Oops! I used the wrong function by accident. Please see the changes I've made to my answer. Basically, use `.serializeArray()` instead of `.serialize()`. This will provide an array containing an object with a `name` and `value` property for each field. If you want a single object with name/value mapping (which is likely) you may wish to create an additional function: http://stackoverflow.com/questions/1184624/serialize-form-to-json-with-jquery/1186309#1186309 – neocotic Sep 09 '11 at 10:38
0

your question is the first on google, so here. Looks like the first way is the least amount of code.

var form = document.getElementById('iLoveLucy')

var obj1 = [...form.elements].reduce((_, el) => (_[el.name] = el.value, _), {})
console.log(obj1)

// another way
var obj2 = Object.assign({},
  ...[...form.elements].map(({name,value}) => ({[name]: value}))
)
console.log(obj2)

// a third way
var obj3 = new class {
  constructor() {
    [...form.elements].map(({name,value}) => this[name] = value)
  }
}
console.log(obj3)
<form id="iLoveLucy">
  <input name="fred" value="grumpy"/>
  <input name="wilma" value="tired"/>
  <input name="lucy" value="foolish"/>
  <input name="ricky" value="upset"/>
</form>
toddmo
  • 20,682
  • 14
  • 97
  • 107