Question

我有一个基本的bootstrap表单，我想通过ajax将输入类型传递给php。我可以得到输入名称＆amp;值为serializeArray()。

如何将serializeArray的输出扩展为包含输入＆＃39;类型＆＃39;？

更多信息......这是我目前的表格......

<form id="second_example_form" class="form-horizontal core_form_submission" action="#" method="post" data-callback="<?php echo __DIR__ . '/form-second-example.callback.php'; ?>">
<div class="form-group">
    <label class="col-sm-2 control-label" for="email">Email</label>
    <div class="col-sm-5">
        <input id="email" class="form-control" required type="email" placeholder="Email" name="email">
    </div>
    <div class="col-sm-5 messages"></div>
</div>
    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</div>

这里是调用js的ajax ......

$('#form').on('submit', function(e) {

    e.preventDefault();

    var data = form.serializeArray();

    $.post('ajax/forms.ajax.php', {
            data: data
    }, function(r) {
        var json = JSON.parse(r);
    }
});

var data = form.serializeArray();非常适合传递名称和值...但不包含输入类型。

有人可以帮忙吗？

Answer 1

Serialize没有提供，你必须构造所有类型的名称值并将其传递给你的服务器。

＆＃13;

$('form').on('submit', function(e) {
  e.preventDefault();

  var formData = $(this).serializeArray();
  $('input, select', this).each(function() {
    formData.push({
      name: $(this).attr('name') + '_type',
      value: $(this).prop('tagName').toLowerCase()
    });
  });
  console.log(formData);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="second_example_form" class="form-horizontal core_form_submission" action="#" method="post" data-callback="<?php echo __DIR__ . '/form-second-example.callback.php'; ?>">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="email">Email</label>
    <div class="col-sm-5">
      <input id="email" class="form-control" required type="email" placeholder="Email" name="email">
    </div>
    <div class="col-sm-5 messages"></div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

＆＃13;

Answer 2

您可以在值或名称中发送类型。在您的PHP中，您可以使用explode将类型与值/名称分开。以下是如何在值内发送它。

$('#form').on('submit', function(e) {

    e.preventDefault();

    var fields = e.serializeArray();

    for(var i = 0; i < fields.length; i++){
        var item = e.find(':input').eq(i);
        var fieldType = item.attr("type") === null ? item.prop("tagName") : item.attr("type");
        fieldType = fieldType === null ? item.prop("tagName") : fieldType;
        data.push({"name": fields[i].name, "value": fieldType + "|" + fields[i].value })
    }

    $.post('ajax/forms.ajax.php', {
            data: data
    }, function(r) {
        var json = JSON.parse(r);
    }
});

Answer 3

你不能做这个正常的serializeArray功能我快速修复并与两个替代方案共享代码。

$(document).ready(function(){
//Make sure name and id will be same id=email_email name = email_email
   var fields = $( "#second_example_form" ).serializeArray();
   fields = fields.map(function(val){
    val.type =  $( "#"+val.name ).attr("type");
    return val;
    });
    console.log(fields);
//Change only name and add type with name seprated by _ like this name = name_type    
   var fields = $( "#second_example_form" ).serializeArray();
   fields = fields.map(function(val){
    val.type =  val.name.split("_")[1]
    return val;
    });
    console.log(fields);
 });

body, select {
    font-size: 14px;
  }
  form {
    margin: 5px;
  }
  p {
    color: red;
    margin: 5px;
  }
  b {
    color: blue;
  }

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 <form id="second_example_form" class="form-horizontal core_form_submission" action="#" method="post" data-callback="<?php echo __DIR__ . '/form-second-example.callback.php'; ?>">
<div class="form-group">
    <label class="col-sm-2 control-label" for="email">Email</label>
    <div class="col-sm-5">
        <input id="email_email" class="form-control" required type="email" placeholder="Email" name="email_email">
    </div>
    <div class="col-sm-5 messages"></div>
</div>
    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</div>
</form>

Answer 4

我最后做了其他答案的混合，从头开始创建一个新数组。

// Collect all of the fields in the form, their values and types
function gather_form_fields(form)
{

    var output = {};
    form.find(':input').each(function(){
        var type = $(this).attr('type'),
            name = $(this).attr('name'),
            val = $(this).val();

        // If it's a select or other element without a 'type', return the element
        if (type == null) {
            type = $(this).prop('tagName').toLowerCase();
        }

        // remove the submit button
        if (type == 'submit') {
            return true;
        }

        output[name] = {
            type: type,
            name: name,
            value: val
        };
    });

    return output;
}

然后生成一个具有类型，名称和值的对象，例如

data = {
    first_name: {
        name: "first_name",
        type: "text",
        value: "joe"
    },
    email: {
        name: "email",
        type: "email",
        value: "jbloggs@test.com"
    }
}

如何将jQuery中的输入类型传递给ajax

4 个答案: