CODEWITHSUNDEEP
javascriptjqueryhtmlformsserialization
Cris
Cris

Reputation: 261

How to serialize form, but instead of an input's values get the input's ID

Here is a jsfiddle for reference.

I need to serialize a form, so when a user hits submit I get all the ID's of the inputs the user has selected in a "serialized" format. I have used this to get the form ID's:

$("button").click(function(){
  $("div").text($("form").serialize());
});

The problem is, it gives me the form's values. How do I modify this code to give me the IDs of the selected inputs instead of the values?

This is the HTML:

<form action="">
  Choose one:<br>
  <input type="radio" name="name" id="option1" value="2.00">Option 1<br>
  <input type="radio" name="name" id="option2" value="2.00">Option 2<br>
  <input type="radio" name="name" id="option3" value="2.00">Option 3<br>
</form>

<button>Serialize form</button>

<div></div>

So for example, when the button is clicked, the serialized output should say either "option1" "option2" or "option3", not "2.00" "2.00" or "2.00".

Edit
I was hoping there was a way to incorporate ".attr('id')" into the serialization, I have 

$(document).ready(function() {
  $('input').on('change', function () {
      alert($(this).attr('id'));
  });
});

This alerts me the ID's, but I cannot find a way to incorporate it into the serialization.

Upvotes: 1

Views: 3524

Answers (5)

Phani Kumar M
Phani Kumar M

Reputation: 4590

Another way of implementation using Array.from

$(document).ready(function () {
    $('#form').bind('submit', function () {
        var serialize = Array.from($('input:checked'), e => "id=" + e.id).join('&');
        console.log(serialize);
        return false;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form action="" id="form">
    Choose one:<br>
    <input type="radio" name="name" id="option1" value="2.00">Option 1<br>
    <input type="radio" name="name" id="option2" value="2.00">Option 2<br>
    <input type="radio" name="name" id="option3" value="2.00">Option 3<br>
<br/>
    Choose one:<br>
    <input type="checkbox" name="name1" id="option1" value="2.00">Option 1<br>
    <input type="checkbox" name="name2" id="option2" value="2.00">Option 2<br>
    <input type="checkbox" name="name3" id="option3" value="2.00">Option 3<br>
    <input type="submit" name="submit" value="Serialize form" id="submit" />
</form>

Upvotes: 1

Ananthakrishnan Baji
Ananthakrishnan Baji

Reputation: 1290

This function gives a the value of ID instead of name, hope this is what you needed.

Snippet has two forms one with radio and other with check boxes

function getSerialize(form)
{
 var selected = $('form input:checked');
 var serialized = '';
 selected.each(function(){
 	if(serialized != '')serialized += '&';
 	serialized += $(this).attr('name') + '=' + $(this).attr('id');
 });
 return serialized;
}

$('#button1').click(function(){
console.log(getSerialize('#form1'));
});

$('#button2').click(function(){
console.log(getSerialize('#form2'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>For radio</h5>
<form  id="form1"  action="">
  Choose one:<br>
  <input type="radio" name="name" id="option1" value="2.00">Option 1<br>
  <input type="radio" name="name" id="option2" value="2.00">Option 2<br>
  <input type="radio" name="name" id="option3" value="2.00">Option 3<br>
</form>
<br>
<button id="button1">Serialize form</button>
<br>
<h5>For checkboxes</h5>

<form id="form2" action="">
  Choose one:<br>
  <input type="checkbox" name="name1" id="option1" value="2.00">Option 1<br>
  <input type="checkbox" name="name2" id="option2" value="2.00">Option 2<br>
  <input type="checkbox" name="name3" id="option3" value="2.00">Option 3<br>
</form>

<button id="button2">Serialize form</button>

Upvotes: 1

hallleron
hallleron

Reputation: 1992

A "dirty" way that works in your case is the following. But if you use it like that you are not dynamic in any way. I just get the id and the name and add it together as string (not urlencoded or anything else in this example though...).

Please read the following for a practical solution:

However you could place those radios outside the form. When someone submits the form you use preventDefault() to stop submission and instead append the radio id to the serialized form data. An example would be serialized_data += "&name=" + encodeURIComponent(THE_ID);.

$(document).ready(function(){
    $("button").click(function(){
    	var radio = $('input[name="name"]:checked');
      $("div").text(radio.prop('name') + '=' + radio.prop('id'));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  Choose one:<br>
  <input type="radio" name="name" id="option1" value="2.00">Option 1<br>
  <input type="radio" name="name" id="option2" value="2.00">Option 2<br>
  <input type="radio" name="name" id="option3" value="2.00">Option 3<br>
</form>

<button>Serialize form</button>

<div></div>

Upvotes: 0

CodeHacker
CodeHacker

Reputation: 2138

If the answer from Styx didn't satifies your needs then think you'll have to come up with your own "serialization". The one from jQuery is meant to serialize the data in a manner much like if you where to hit submit on a form.. When you hit submit in html, only the selected values of a radiobutton are sent.

Upvotes: 0

Styx
Styx

Reputation: 10076

Classical XY problem.

You don't need another serialization method. You just have to put your option1, option2 and option3 into value attributes, instead of id. This way the usual serialization will return to you what you desire.

Upvotes: 0

Related Questions