We Keep Coding

HTML/ Javascript: How to submit input and have it fill in a textarea with a submit/add more button

So I am creating a pre-fill resume builder for a class and I want to have only one input area for career experience/ job info but I want a button that can be clicked over and over to submit each jobs information. Ideally the results would show in a textbox below it so they can see and keep track of what they have submitted. I included the code I used on the HTML side:
**note: The entire page is basically one form with a submit at the bottom. This is a separate button.
Edited: So the idea is kind of just how submitting a StackOverflow Question works...as you type in the box, the results are shown below. And then there is a form submit button.
Screenshot of the HTML page so far:
<div>
<fieldset>
<legend>Work Experience</legend>
<p>
<label for="occupation">Job Title</label><br>
<input type="text" id="occupation" name="occupation"><br>
<label for="company">Company Name:</label><br>
<input type="text" id="company" name="company"><br>
<label for="duties">Duties and Skills Attained:</label><br>
<input type="text" id="duties" name="duties"><br>
<button type="button" id="generate">Add Work Eperience</button>
</p>
</fieldset>
</div>

Not sure I understand completely, but input names support arrays as well. So what you could do is something like this (assuming you want to have a submit for each entry).
<input type="text" id="occupation" name="experience[][occupation]" value="some-previous-occupation">
<input type="text" id="company" name="experience[][company]" value="some-previous-company">
You could then add hidden inputs to keep track of the ones that were already submitted (you could use a loop and replace 0 with the index of the loop)
<input type="hidden" id="occupation" name="experience[0][occupation]">
<input type="hidden" id="company" name="experience[0][company]">
This would then be submitted to your back-end like this:
[
0 => ['occupation' => 'some-previous-occupation', 'company' => 'some-previous-company']
1 => ['occupation' => 'developer', 'company' => 'stackoverflow']
]

HTML form losing its values when submitting?

I am attempting to submit a HTML form that has some values created via javascript. However, when I submit the form those input fields lose their values in favor of empty strings. What can I do to prevent the fields from dropping their new values upon hitting the submit button?
Form Code:
<form id="post-form" class="save-form" method="POST" action="/posts" style="display: none">
<input placeholder="Title" name="title" /><br>
<input placeholder="Location" name="location" /></br>
<input placeholder="Content" name="content" /><br>
<input id="formlat" name="latitude" type="hidden" />
<input id="formlng" name="longitude" type="hidden" />
<input name="user_id" type="hidden" value="<%= current_user.id %>" />
<input type="submit" value="Submit"/>
</form>
Relevant Javascript Code:
var newlat = newmarker.getPosition().lat();
var newlng = newmarker.getPosition().lng();
document.getElementById("formlat").value = newlat;
document.getElementById("formlng").value = newlng;
Setting default values, or not setting them, always produces the same result: the form submits with "" for those fields (or whatever was inside value=""). However, the console shows that those fields are correctly being filled with their lat/long up until I hit the submit button, where they revert to their default values (in this case ""). It is only in rails' logs that I can see the fields are blank in the actual POST.
The user id field, however, does keep its value when submitting. So I believe the form is overwriting its value fields upon hitting the submit button. Does anyone know how to prevent this behavior? Thanks in advance.

Can POST and GET be combined within a single input type?

I have a form running a shopping cart style application on my site. To add items, I POST values to a form using a submit button. To remove items, I have to use a GET command.
What I want to do is to limit the selection possibilities - as you select one option, others are removed. For instance, if I have three options: Apples, Oranges, Bananas you are only able to select one.
Apples
Oranges
Bananas
If you select Apples, I want to post the value "Apples" whilst using a GET command to remove "Bananas" and "Oranges".
Currently I am doing this to post the values:
<form method="post">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="id" value="Apples" />
<input type="hidden" name="name" value="Apples" />
<input type="hidden" name="color" value="red" />
<input type="hidden" name="shape" value="round" />
<div id="apples" >
<input type="submit" name="my-add-button" class="add" value="&nbsp"/>&nbsp Apples
</div>
</fieldset>
</form>
And to remove the items I do this:
remove Bananas and Oranges
Is there a way to do both at the same time? I have tried doing an onclick event like this:
<div id="Apples" >
<input type="submit" name="my-add-button" class="add" value="&nbsp" onclick="location.href='index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges';" />&nbsp Apples
</div>
and I have also tried to use an action at the start of the form
But neither of these work - they will still submit the new item, but will not remove the item. Any idea of a good way to do both together?

Technically, yes, but it's a hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
If the form is set to POST, then any <input> and <textarea> within the form will go as POST data, but any query strings you place into the action's url will show up at the server as GET data:
$_GET['x'] -> 'y'
$_POST['a'] => 'b'
$_POST['x'] => undefined index
But note that clicking a link that's inside a <form> does NOT submit the form. it's like clicking any other link and will just go to the new address.

You can use $_REQUEST. As per the php documentation, quoted as follows:
An associative array that by default contains the contents of $_GET, $_POST and $_COOKIE
As above, you can then use the following hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
EDIT: If both of the GET and POST requests work individually, it is possible that your PHP is where the problem lies - You haven't posted it, so I can't see where the issue could be. You could just put together some javascript to fire the remove request then fire the add request when clicked:
jQuery("input[name|='my-add-button']").click(function() {
var addform = jQuery(this);
event.preventDefault();
$.get("index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges", function(data) {
addform.submit();
});
});

Dynamically read GET string of a form using javascript

tl;dr: I want an easy way to retrieve the GET-string that is created by a form to dynamically load the according data without refreshing.
Normally, pressing submit on this form:
<form action = "action.php" method="get">
<p>
<input type="text" name="foo" value="bar" />
<input type="checkbox" name="check" value="true" checked="checked" />
<input type="submit" />
</p>
</form>
would create and access this string: action.php?foo=bar&check=true
I would like to access this string without reloading and without having to fiddle it together by iterating form elements (which is what I'm doing at the moment). The aim is to put the string into an XMLHttpRequest if something in the form changes so I can update my data on the webpage accordingly.

var string = $("form").serialize();
http://api.jquery.com/serialize/

How can I call a new page and add in the value of a form variable

I would like to link to a new page in the format:
/topic/create&qty=4
Right now I have the value (which is the number 4) stored in an field in a form. I tried to put everything in the form with a post but then realized this isn't what I want to do. I just need clicking on a button to go to link to a new page and send the input field value. The reason I want just a link is that later on I will have posts from that form and they will be handled completely differently.
Is this possible? All I know is that
<form action="/adminTopics" method="post">
isn't what I need.

you can not use POST to send data via url, but you can use GET like this: /topic/create?qty=4
EDIT: Clarification
Writing red in the text field and pressing submit on this form...
<form action="/handler.php" method="GET">
<input type="text" name="color" />
<input type="submit" />
</form>
will produce identical results on the server side to clicking this link
<a href='/handler.php?color=red'>rum</a>

If the url is
/topic/create?qty=4
and it has to be posted, then you can use
<form action="/topic/create" method="post">
<input type="hidden" name="qty" value="4" />
</form>
Send
or
<script>
window.onload=function() {
document.forms[0].submit();
}
</script>
If you do NOT need POST, then just call the URL which is the same as a GET
<input id="qty" type="hidden" name="qty" value="4" />
<a href="/topic/create"
onclick="location=this.href+'?qty='+document.getElementById('qty').value;
return false">Go</a>