CODEWITHSUNDEEP
javascriptjqueryhtmlxml
Spartacus
Spartacus

Reputation: 1508

How to take HTML form data and write to XML using JQuery?

I have a form that looks like this:

<form method="post" id="aodform">
<label for="a">Animal:</label>
<input class="input" type="text" name="a"/>
<label for="s">Sausage:</label>
<input class="input" type="text" name="s"/>
<label for="g">Bird:</label>
<input class="input" type="text" name="g"/>
<label for="d">Dessert:</label>
<input class="input" type="text" name="d"/>
<input id="submitter" type="submit"/>
</form>

I need to take the entered values in the form and overwrite (replace) the corresponding node's text value in an EXISTING XML file that looks like this:

<aod>
<animal>x</animal>
<sausage>x</sausage>
<bird>x</bird>
<dessert>x</dessert>
</aod>

Now, I know I can use 

$("#aodform").submit();

to achieve a form submit in Jquery, but after this I'm lost! I'm trying to figure out how to get those form values, store them as variables in a function that then writes to the XML file (all in Jquery).

I've searched all over the google box and found similar subjects, but not quite similar enough to help my situation. Would someone please help me? Thank you!

P.S. I CAN NOT use any server-side language, like PHP, or else I would.

Upvotes: 0

Views: 8057

Answers (3)

Stefan
Stefan

Reputation: 3900

You won't be able to create or edit a local XML file using javascript/jquery because of security concerns. Imagine going to a website and the webmaster wrote some code doing who knows what and puts this in a file on your computer...

The only way to write to a local file using javascript is to use cookies or HTML5 localStorage.

localStorage will allow you to store string keys and values of arrays and/or property names and values of objects.

If you need an XML file you will have to call a server-side script that has permission to write the file on the server, which you can then access via it's url.

Upvotes: 3

SlovaN
SlovaN

Reputation: 368

You have to send Labels within hidden inputs, etc: 

<form method="post" id="aodform">
<label for="a">Animal:</label>
<input type="hidden" name="a_label" value="Animal"/>
<input class="input" type="text" name="a"/>
<label for="s">Sausage:</label>
<input type="hidden" name="s_label" value="sausage"/>
<input class="input" type="text" name="s"/>
<label for="g">Bird:</label>
<input type="hidden" name="g_label" value="bird"/>
<input class="input" type="text" name="g"/>
<label for="d">Dessert:</label>
<input type="hidden" name="d_label" value="dessert"/>
<input class="input" type="text" name="d"/>
<input id="submitter" type="submit"/>
</form>

and then in PHP you access pairs:

$name = "a";  // "s", "g", "d"

$tag = $_POST[$name.'_label'];
$value = $_POST[$name];
$xml_element = "<$tag>$value</$tag>";

OR

use same name as label and then use: 

foreach($_POST as $key => $value)    
{
    $xml_element = "<$key>$value</$key>";
    ...
}

Upvotes: 0

Jason M. Batchelor
Jason M. Batchelor

Reputation: 2951

jQuery and Javascript on the client-side cannot persist to the server side. It has no access to write to code. You will have to gain access to a server-side language, or make use of some cloud-based services (you could, for example, persist to Amazon 3S, or a MongoDB or something of that nature, through Javascript API calls, on a cloud service).

While you could use Javascript/jQuery to construct an XML object in the client, you would then have to submit that to some server-side script to save it to a file.

Sorry to be the bearer of bad news, but you will need to get into something a bit more full-featured, if you want to be able to get this done.

Upvotes: 1

Related Questions