CODEWITHSUNDEEP
jqueryajaxformsserialization
KenavR
KenavR

Reputation: 3899

jQuery: serialize() form and other parameters

Is it possible to send form elements (serialized with .serialize() method) and other parameters with a single AJAX request?

Example:

$.ajax({
    type : 'POST',
    url : 'url',
    data : {
        $('#form').serialize(),
        par1 : 1,
        par2 : '2',
        par3: 232
    }
}

If not what's the best way to submit a form together with other parameters?

Thanks

Upvotes: 151

Views: 385308

Answers (13)

Rory McCrossan
Rory McCrossan

Reputation: 337560

serialize() effectively turns the form values into a valid querystring, as such you can simply append to the string:

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&par1=1&par2=2&par3=232"
})

Upvotes: 277

Yilson alexis malambo madrigal
Yilson alexis malambo madrigal

Reputation: 21

cod 100% funcional 
<form id="formElem">
  <input type="text" name="firstName" value="John">
  Imagen: <input type="file" name="picture" accept="image/*">
  <input type="submit">
</form>

<script>
  formElem.onsubmit = async (e) => {
    e.preventDefault();

    let response = await fetch('/article/formdata/post/user-avatar', {
      method: 'POST',
      body: new FormData(formElem)
    });

    let result = await response.json();
    enter code here
    alert(result.message);
  };
</script>

Upvotes: 0

mrmert
mrmert

Reputation: 11

Those who want to add new data to form data can use this method. Exemple:

$("form#myForm").submit(function(e){
    e.preventDefault();
    let formData = jQuery("#myForm").serializeArray();
    let newData = [
        {name:"city", value: "Ankara"},
        {name:"jobs", value: "Full-Stack Web Developer"},
        {name:"action", value: "ajax_proccess"} 
    ];
    let postData = formData.concat(newData);

    console.log(formData);
    console.log(newData);
    console.log(postData);

    jQuery(".alert").text("İş: " + postData[4]['value']);
    
    jQuery.ajax({
        url: jQuery("#myForm").attr('action'),
        type: 'POST',
        dataType: 'json',
        data: postData,
        success: function(data) {
            //let response = JSON.parse(data);
            console.log(data);
            alert('Submitted.');
            jQuery(".alert").text(newData[5]);
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="" id="myForm">
<input type="hidden" name="name" value="Mahmut Yüksel">
<input type="hidden" name="surname" value="Mert">
<input type="hidden" name="countary" value="Turkey">
<input type="submit" value="Gönder">
</form>
<div class="alert">İş: </div>

Upvotes: 1

sh shojol
sh shojol

Reputation: 21

$("#add_form").submit(function(e) {
    e.preventDefault();
    var total_qty = $('#total_qty').text();
    var total_amt = $('#total_amt').text();
       
    $("#add_btn").val('adding....');
    $.ajax({
        url: 'action.php',
        method: 'post',
        data: $(this).serialize() + "&total_qty="+total_qty + "&total_amt="+total_amt,
        success: function(data){
            console.log(data);
        }   
    });
});

Upvotes: 2

Salim Mansoori
Salim Mansoori

Reputation: 61

encode in js :

  var temp =    $("#pay_property_amount").serialize();
            temp = btoa(temp);

and pass in ajex

 data: { temp_data : temp },

decode in php

    $temp_data = base64_decode($this->input->post('temp_data'));

 if($temp_data){
$temp_data = $this->unserializeForm($temp_data);
 }


function unserializeForm($str) {
$returndata = array();
$strArray = explode("&", $str);
$i = 0;
foreach ($strArray as $item) {
    $array = explode("=", $item);
    
    if (preg_match('/(%5B%5D)/', $array[0])) {
          $array[0] = str_replace('%5B%5D','',$array[0]);
          if(array_key_exists($array[0],$returndata)){
                  $returndata[$array[0]][]=$array[1];
          }else{
              $returndata[$array[0]] =array();
              $returndata[$array[0]][]=$array[1];
          }
    }else
    {
        $returndata[$array[0]] = $array[1];
    }
    
    
}

return $returndata;
}

Upvotes: 0

Dani
Dani

Reputation: 2036

Following Rory McCrossan answer, if you want to send an array of integer (almost for .NET), this is the code:

// ...

url: "MyUrl",       //  For example --> @Url.Action("Method", "Controller")
method: "post",
traditional: true,  
data: 
    $('#myForm').serialize() +
    "&param1="xxx" +
    "&param2="33" +
    "&" + $.param({ paramArray: ["1","2","3"]}, true)
,             

// ...

Upvotes: 0

Sanjay
Sanjay

Reputation: 9

pass value of parameter like this

data : $('#form_id').serialize() + "&parameter1=value1&parameter2=value2"

and so on.

Upvotes: 0

Suresh Prajapat
Suresh Prajapat

Reputation: 1

You can also use serializeArray function to do the same.

Upvotes: -1

Aziz Fazli
Aziz Fazli

Reputation: 11

I fix the problem with under statement ; send data with url same GET methode

$.ajax({
    url: 'includes/get_ajax_function.php?value=jack&id='+id,
    type: 'post',
    data: $('#b-info1').serializeArray(),

and get value with $_REQUEST['value'] OR $_GET['id']

Upvotes: -1

kliszaq
kliszaq

Reputation: 1106

Alternatively you could use form.serialize() with $.param(object) if you store your params in some object variable. The usage would be:

var data = form.serialize() + '&' + $.param(object)

See http://api.jquery.com/jQuery.param for further reference.

Upvotes: 90

Ambarish Yadav
Ambarish Yadav

Reputation: 412

If you want to send data with form serialize you may try this

var form= $("#formId");
$.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize()+"&variable="+otherData,
    success: function (data) {
    var result=data;
    $('#result').attr("value",result);

    }
});

Upvotes: 5

Felixuko
Felixuko

Reputation: 60

You can create an auxiliar form using jQuery with the content of another form and then add thath form other params so you only have to serialize it in the ajax call.

function createInput(name,value){
    return $('<input>').attr({
        name: name,
        value: value
    });
}
$form = $("<form></form>");
$form.append($("#your_form input").clone());
$form.append(createInput('input_name', 'input_value'));
$form.append(createInput('input_name_2', 'input_value_2'));
....

$.ajax({
    type : 'POST',
    url : 'url',
    data : $form.serialize()
}

Upvotes: -2

Rohit Arora
Rohit Arora

Reputation: 2252

I dont know but none of the above worked for me, Then i used this and it worked :

In form's serialized array it is stored as key value pair

We pushed the new value or values here in form variable and then we can pass this variable directly now.

var form = $('form.sigPad').serializeArray();
var uniquekey = {
      name: "uniquekey",
      value: $('#UniqueKey').val()
};
form.push(uniquekey);

Upvotes: 11

Related Questions