XML request from ajax form

Question

Hello everyone I am newbie in java-script so i hope you can help me with my issue. So I have the form, it look something like this:

<form method="post">
  Field1: <input type="text" name="field1"><br>
  Field2: <input type="text" name="field2"><br>
  <input type="submit" value="Submit">
</form>

I need to take data from the form and make xml request, the xml request should look like this

<root>
   <header section>
      <section>data</section>
   </header section>
   <data section>
      <field1>data</field2>
      <field2>data</field2>
   </data section>
</root>

After that i have to display xml response on the page. I made xml request

<script>
                $('.button').click( function() {
                        $(".results").append("<ul></ul>");
                        $.ajax({
                                type: "GET",
                                dataType: 'xml',
                                url: 'response.xml',
                                success: function(xml) {
                                        $(xml).find('root').each(function(){
                                        var sField1 = $(this).find('field1').text();
                                        var sField2 = $(this).find('field2').text();
                                        $("<li></li>").html(sTitle + ", " + sPublisher).appendTo(".results ul");
                                        });
                                },
                                error: function() {
                                alert("An error occurred while processing XML file.");
                                }
                        });
                });
        </script>

But I don't know how to take data from the form and make request. Can you help me with it? Thanks a lot.

kinjelom · Accepted Answer · 2015-09-19 13:31:57Z

// You can use jQuery to build XML document:

function buildXmlFromForm(form) {
  var xml = $('<XMLDocument />');
  xml.append (
    $('<header-section />').append(
      $('<section />').text('data')
    )
  ).append (
    $('<data-section />').append(
      $('<field1 />').text(form.find("input[name='field1']").val())
    ).append(
      $('<field2 />').text(form.find("input[name='field2']").val())
    )
  );

  return xml.html();
}

// you should use POST or PUT method (not GET) to post xml-data to server side
$( "#form1" ).submit(function(event) {
  event.preventDefault();
  $("#results").append("<ul></ul>");
  var xmlString = buildXmlFromForm($(this));
  $("#xmlSrc").val(xmlString);
  $.ajax({
    type: "POST",
    dataType: 'xml',
    url: 'response.xml',
    data: xmlString,
    success: function(respData) {
      $("<li></li>").html("ok: "+respData).appendTo("#results ul");
      console.log(respData);
    },
    error: function(errorData) {
      $("<li></li>").html("error: "+errorData.statusText).appendTo("#results ul");
      console.log(errorData);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" id="form1">
  Field1: <input type="text" name="field1" value="***v1***"><br/>
  Field2: <input type="text" name="field2" value="***v2***"><br/><br/>
  <input type="submit" value="Submit">
</form>
<hr/>
<textarea id="xmlSrc" cols="70" rows="5"></textarea>

<div id="results"/>

Rayon · Accepted Answer · 2015-09-19 03:06:47Z

Try this:

serialize will return formData of current form

You must have unique identifier for your form to be used as querySelector

$('#myForm').on('submit', function(e) {
  e.preventDefault();
  var formData = $(this).serialize();

  $(".results").append("<ul></ul>");
  $.ajax({
    type: "GET",
    dataType: 'xml',
    url: 'response.xml',
    data: formData,
    success: function(xml) {
      $(xml).find('root').each(function() {
        var sField1 = $(this).find('field1').text();
        var sField2 = $(this).find('field2').text();
        $("<li></li>").html(sTitle + ", " + sPublisher).appendTo(".results ul");
      });
    },
    error: function() {
      alert("An error occurred while processing XML file.");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="myForm">
  Field1:
  <input type="text" name="field1">
  <br>Field2:
  <input type="text" name="field2">
  <br>
  <input type="submit" value="Submit">
</form>

Collectives™ on Stack Overflow

XML request from ajax form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related