javascript - How to take HTML form data and write to XML using JQuery? - Stack Overflow

admin管理员组

文章数量:1406453

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.

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.

• javascript
• jquery
• html
• xml

Share Improve this question Follow edited Oct 25, 2012 at 16:14 Spartacus asked Oct 25, 2012 at 16:02 SpartacusSpartacus 1,50822 gold badges1515 silver badges2929 bronze badges 2

• Have you looked here? stackoverflow./questions/4913798/… – Adriano Carneiro Commented Oct 25, 2012 at 16:05
• It's very similar, but I already have an existing XML file. I don't want to write a new one. – Spartacus Commented Oct 25, 2012 at 16:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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.

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.

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>";
    ...
}

本文标签： javascriptHow to take HTML form data and write to XML using JQueryStack Overflow