Form

透過Jquery取得Form的內容

HTML

<form>
  <input type="radio" name="foo" value="1" checked="checked" />
  <input type="radio" name="foo" value="0" />
  <input name="bar" value="xxx" />
  <select name="this">
    <option value="hi" selected="selected">Hi</option>
    <option value="ho">Ho</option>
  </select>
</form>

JS

// "foo=1&bar=xxx&this=hi"
$('form').serialize();

/*
[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]
*/
$('form').serializeArray();


/*
[
  ["foo","1"],
  ["bar","xxx"],
  ["this","hi"]
]
*/
var array = $("form").serializeArray();
Object(array.map(function(v) {return [v.name, v.value];} ));

/*
{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}
*/
var out = {};
var s_data = $("form").serializeArray();
//transform into simple data/value object
for(var i = 0; i<s_data.length; i++){
   var record = s_data[i];
   out[record.name] = record.value;
}

參考連結

• How can I get form data with JavaScript/jQuery?

動態建立一個Form

不新增至DOM的方式

IE及Firefox必須將動態建立的Form新增至DOM，所以此例的程式碼會無法正常運作

$(".post-form").click(function(ev) {

    var postto = $(this).siblings(".post-to").val();    
    var form = document.createElement("form")
    $(form).attr("id", "reg-form").attr("name", "reg-form").attr("action", postto).attr("method", "post").attr("enctype", "multipart/form-data");

    $(this).siblings("input:text").each(function() {
        $(form).append($(this).clone());
    });

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);

    return false;
});

新增至DOM的方式

IE、Firefox、Chrome皆運作正常

util.post = function(url, fields) {
    var $form = $('<form action="'+url+'" method="post"></form>');
    var key, val;
    for(key in fields) {
        if(fields.hasOwnProperty(key)) {
            val = fields[key];
            $form.append('<input type="hidden" name="'+key+'" value="'+val+'" />');
        }
    }
    $form.submit();
}