как передать тип ввода в JQuery в AJAX

Question

У меня есть базовая форма начальной загрузки, и я хочу передать тип ввода через php через ajax.Я могу получить имя и значение ввода с помощью serializeArray().

Как бы я расширил вывод с serializeArray, добавив в него также тип ввода?

---

Немного больше информации ... Вот моя текущая форма ...

<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>

А вот ajax, вызывающий js ...

$('#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

Я закончил делать смесь других ответов, чтобы создать новый массив с нуля.

// 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"
    }
}

Answer 2

Serialize не предусматривает этого, вам придется создать значение имени всех типов и передать его на ваш сервер.

$('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);
});

<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>

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

Вы можете отправить тип в пределах значения или имени.В вашем 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);
    }
});