Question

如何使用表单的字段和值创建对象？

像这样：

{
  fields:
   {
      name: 'foo',
      email: 'foo@moo.com',
      comment: 'wqeqwtwqtqwtqwet'     

   }
}

假设表格如下：

<form>
  <input type="text" name="name" value="foo" />
  <input type="text" name="email" value="foo@moo.com" />
  <textarea name="comment">wqeqwtwqtqwtqwet</textarea>
</form>

我需要知道如何为任何具有单一功能的表单执行此操作，而不仅仅是特定表单。

Answer 1

你可以这样做：

var fields = {};
$("#theForm").find(":input").each(function() {
    // The selector will match buttons; if you want to filter
    // them out, check `this.tagName` and `this.type`; see
    // below
    fields[this.name] = $(this).val();
});
var obj = {fields: fields}; // You said you wanted an object with a `fields` property, so...

请注意，表单可以包含重复名称的字段，而您尝试执行的操作不支持该字段。此外，HTML表单中字段的顺序可能很重要。（这些都是serializeArray按原样运作的原因。）

请注意，普通的HTML练习是省略禁用的字段。如果您想这样做，请在获取值之前检查this.disabled。

请注意，上面（两年前写的）使用了jQuery伪选择器。发现我写的那些，我有点惊讶。正如它在documentation for the :input pseudo-selector中所说的，使用它意味着jQuery无法将选择器移交给浏览器的原生querySelectorAll（几乎所有浏览器现在都有）。

现在我可能会写：

$("#theForm").find("input, textarea, select, button")...

...如果我想要按钮，或者如果不是那么

$("#theForm").find("input, textarea, select")...

...然后在input[type="button"]内过滤掉input[type="submit"]和each。例如。（根本没有按钮）：

$("#theForm").find("input, textarea, select").each(function() {
    var inputType = this.tagName.toUpperCase() === "INPUT" && this.type.toUpperCase();
    if (inputType !== "BUTTON" && inputType !== "SUBMIT") {
        // ...include it, either it's an `input` with a different `type`
        // or it's a `textarea` or a `select`...
    }
});

Answer 2

var inputs = $("form :input");
var obj = $.map(inputs, function(x, y) {
    return {
        Key: x.name,
        Value: $(x).val()
    };
});
console.log(obj);

Answer 3

根据http://api.jquery.com/serializeArray/页面上的评论，您可以执行以下操作：

(function( $ ){
    $.fn.serializeJSON=function() {
        var json = {};
        jQuery.map($(this).serializeArray(), function(n, i){
            json[n['name']] = n['value'];
        });
        return json;
    };
})( jQuery );

然后做：

var obj = $('form').serializeJSON();

或者如果您需要使用fields属性，则可以修改该功能或执行此操作：

var obj = {fields: $('form').serializeJSON()};

如果您不介意输出格式，可以使用serializeArray()。

Answer 4

jquery在froms之类的上有一个serialize（）函数 $（ '＃myForm的'）。序列（）

这就是你要找的东西吗？

更新： oops，也许尝试使用serializeArray（），它应该为您提供一个名称和值的数组。

Answer 5

function formsToObj(){
    var forms = [];
    $('form').each(function(i){
        forms[i] = {};
        $(this).children('input,textarea,select').each(function(){
            forms[i][$(this).attr('name')] = $(this).val();
        });
    });
    return forms;
}

这是一个通用函数，可以为页面中的每个表单创建一个对象

Answer 6

这样，您可以从多个选项或复选框组中捕获所有值

function form2obj(form) {
    var arr = $(form).serializeArray(), obj = {};
    for(var i = 0; i < arr.length; i++) {
        if(obj[arr[i].name] === undefined) {
            obj[arr[i].name] = arr[i].value;
        } else {
            if(!(obj[arr[i].name] instanceof Array)) {
                obj[arr[i].name] = [obj[arr[i].name]];
            }
            obj[arr[i].name].push(arr[i].value);
        }
    }
    return obj;
};

Answer 7

这是一个简单的解决方案：

See Demo

$(".form-sample").serializeArray().map(function(x){data[x.name] = x.value;});

Answer 8

所以我总是尝试在表单提交中添加一个包装器。

这对于在ajax上运行的表单提交尤其重要。

要做的第一件事是在提交时抓取表单。

$(".ajax-form").submit(function(){
    var formObject = objectifyForm($(this).serializeArray());
    // Do stuff with formObject 

    // always add return false to stop the form from actually doing a post anywhere
    return false;
});

这将包装任何具有“ajax-form”类的表单，并将serializeArray发送到一个名为objectify form的函数，该函数将返回该表单的所有值的对象。

function objectifyForm(formArray) {
    returnArray = {};
    for (var i = 0; i < formArray.length; i++) {
        returnArray[formArray[i]['name']] = formArray[i]['value'];
    }
    return returnArray;
}

Answer 9

简单的表单代码

<form id="myForm" name="myForm">
    <input type="text" name="email" value="fazelman@test.com"/>
    <input type="checkbox" name="gender">
    <input type="password" name="pass" value="123"/>
    <textarea name="message">Enter Your Message Her</textarea>
</form>

Javascript代码：

var data = {};
var element = document.getElementById("form").elements
for (var i = 0; i < element.length; i++) {
    switch (element[i].type) {
        case "text": data[element[i].name] = element[i].value; break;
        case "checkbox": data[element[i].name] = element[i].checked; break;
        case "password": data[element[i].name] = element[i].checked; break;
        case "textarea": data[element[i].name] = element[i].value; break;
    }
}

Answer 10

许多复杂的方法在某些情况下不起作用。在此期间，您可以使用FormData

function ftp_file_put_contents($remote_file, $file_string) {

    // FTP login details
    $ftp_server="ftp.xxx.it";
    $ftp_user_name="xxx@xx.it";
    $ftp_user_pass="xxxx";

    // Create temporary file
    $local_file = fopen('php://temp', 'r+');
    fwrite($local_file, $file_string);
    rewind($local_file);

    // FTP connection
    $ftp_conn=ftp_connect($ftp_server);

    // FTP login
    @$login_result=ftp_login($ftp_conn, $ftp_user_name, $ftp_user_pass);

    // FTP upload
    if($login_result) 
        $upload_result=ftp_fput($ftp_conn, $remote_file, $local_file, FTP_ASCII);

    // Error handling
    if(!$login_result) {
        echo('<p>FTP error: The file could not be written to the FTP server perche $login_result.</p>');
    } elseif (!$upload_result) {
        echo('<p>FTP error: The file could not be written to the FTP server perche $upload_result.</p>');
    } else {
        echo('<p>good</p>');
        echo $file_string;
    }

    // Close FTP connection
    ftp_close($ftp_conn);

    // Close file handle
    fclose($local_file); 
}

$Fname = 'invoce.csv';

$list = array (
    array('aaa', 'bbb', 'ccc', 'dddd'),
    array('123', '456', '789'),
    array('"aaa"', '"bbb"')
);

$fp = fopen($Fname, 'w');

foreach ($list as $fields) {
    fputcsv($fp, $fields);
}

fclose($fp);


// Function call
ftp_file_put_contents($Fname, $fp);

正是您想要的。它可以处理一切。

Answer 11

如果要保留任何冗余元素选择器，则可以从Submit Event handler函数中访问FormData。以下代码段将打印出来 Object with searchTerm and includeBananas 。

function submitForm(formElement) {
  const formData = new FormData(formElement)
  const allEntries = [...formData.entries()]
    .reduce((all, entry) => {
      all[entry[0]] = entry[1]
      return all
    }, {})
  console.log(allEntries)
  return false;
}

<form onsubmit="return submitForm(this)">
  <input name="searchTerm">
  <input name="includeBananas" type="checkbox">
  <button>Submit</button>
</form>

jQuery从表单字段创建对象

11 个答案: