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']
]

post form on any input change it contains the input type hidden which changes dynamically

<form id="pricecal">
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" placeholder="Check in" value="" required />
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" value="" placeholder="Check Out" required />
<input type="hidden" onchange="calprice()" id="noroom" value="" name="room" />
<input type="hidden" onchange="calprice()" id="noguest" value="" name="guest" />
</form>
my code perfectly works on input text but not on input type hidden
i tried following ways i dont want to loop for every input
function calprice(){
alert('Textarea Change');
}
$(document).on('change', 'form#pricecal input', function(){
alert('Textarea Change');
});
$("form#pricecal input").bind("change", function() {
alert('Textarea Change');
});

As you have bound event on the elements that can be triggered whenever you update your input's value:
$('input[type="hidden"]').trigger('change');
Put this line just after that line of code which causes the value change.

type=hidden
These fields should not be rendered and provide a means for servers to store state information with a form. This will be passed back to the server when the form is submitted, using the name/value pair defined by the corresponding attributes. This is a work around for the statelessness of HTTP. Another approach is to use HTTP "Cookies".
Refer this link

populating a field value based on the button clicked

I have a html form with a hidden field and 2 submit buttons. Based on what button in clicked ( trial or buy) I need to set the promo code field ( with "trial" as promo code for trial button and "buy "as promo code for buy button.
I am not sure how I could read what button is clicked in java script. I have a java script already in place that is copying email ID into another field on hitting submit. I'd like integrate the java script with existing one.
HTML code:
<form>Email:
<input type="text" name="email">
<br>
</label><input type ="hidden" name="retype-email">
<br>
<input type="hidden" name="PromoCode" value="" method="post">
<input class="Orange_button" type="submit" value="Start my free trial">
<input class="green_button" type="submit" value="Buy it now">
</form>
JS Fiddle: http://jsfiddle.net/x1bdgvyt/3/

It looks like the best solution is to manually track which button was clicked by subscribing to their "click" events.
Working Example here (jsFiddle)
HTML
<form>Email:
<input type="text" name="email">
<br>
</label><input type ="hidden" name="retype-email">
<br>
<input id="promo-code" type="hidden" name="PromoCode" value="" method="post">
<input class="Orange_button" type="submit" value="Start my free trial" data-code="trial"/>
<input class="green_button" type="submit" value="Buy it now" data-code="buy"/>
</form>
JavaScript
$('form').on('submit', function(e){
$('[name="retype-email"]').val($('[name="email"]').val());
var value = $("input[type=submit][clicked=true]").data("code");
$("#promo-code").val(value);
alert(value);
e.preventDefault()
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
Note that I added a data attribute to the submit buttons so that we can store the code that should be added.
source: jQuery: how to get which button was clicked upon form submission?

First, add 'data-type' (or whatever the name, most important is the prefix data-) to your inputs:
HTML
<input data-type="trial" class="Orange_button" type="submit" value="Start my free trial">
<input data-type="buy" class="green_button" type="submit" value="Buy it now">
Then, change a bit your javascript in order to grab the data-type value and populate your field with it:
Javascript
$('[type="submit"]').on('click', function(e) {
// populate your duplicated 'email' field
$('[name="retype-email"]').val($('[name="email"]').val());
// populate your 'code' field : grab the data-type attribute added in your HTML
$('[name="PromoCode"]').val($(this).data('type'));
// finally, submit the form
$('form').submit();
});
Quick warning: you should consider using IDs or classes instead of working with wide selectors like [attr], it could be an issue if you have more than one form in your page (and it's a better practice anyway)

Here is my solution:
$('#usuario_form').submit(function(e){
console.log($('#'+e.originalEvent.submitter.id));
e.preventDefault();
});
You can have access to OriginalEvent Submitter Id to identify wich button was clicked

want my form's values to show in another div after clicking submit

I have a ticket form and when they click buy, I would like it to be saved and shown in another div as "user's ticket information" plus they are also able to buy a new ticket and add to the old one after. It doesn't have to be saved in a database or anything, for example when you click refresh all info would go away and you can start from fresh. Another example of how I do it is when I sign up, the user information will go to my memory class. Any javascript/jquery/html will help. Bellow is a start of what im working at. Thanks ^^
<html>
<body>
<form id="buyTicket" action="" method="POST">
<div id="ticketHeader">Buy Your ticket here</div><br></br>
<div>Number of persons :<input type="number" required id="numberOP" value="" placeholder="number of persons"/></div>
<div>Flight Destination:<input type="text" required id="destination" value="" placeholder="hawaii/thailand/spain"/></div>
<div>Depature :<input type="text" required id="depature" class="datepicker" value="" placeholder="enter depature date"/></div>
<div>Return :<input type="text" required id="return" class="datepicker" value="" placeholder="enter return date"/></div>
<div><button type="submit" class="button" id="buttonTicket">Buy Ticket</button></div>
</form>
</body>
</html>

Like ben said use .val() http://api.jquery.com/val/ to get the values. Here is a working example http://jsfiddle.net/YNez9/
You will have the div, which shows the selected values floating to the right
<div id="result" style="float:right;">
</div>
and on submit you want to add the values entered\ or have a placeholder that you can set its value then make it visible
$('#buyTicket').submit(function() {
$('#result').append('<div>Number of persons :'+$('#numberOP').val()+'</div>');
//.....
//return false;
});​

You can use the val() function to get the values from the form once the button is clicked. Api documentation available here: http://api.jquery.com/val/. Perhaps in something a bit like this:
$('#buttonTicket').click(function() {
$('#ticketinfoheader').text($('#numberOfPersons').val());
});

Force click event on input file or open choose file window

I have a form in my HTML with field.
I'd like to show the file selection window when the user clicks somewhere else (for example, an image on other part of the screen). The reason I want to do this is that I have a form with many fields, posting to some action "x", and the file selection form on other part of screen, submiting to action "y"
<form action="x">
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<img src="select_file.png" onclick="//triggers file selection on other form">
<input type="text" name="field4">
<input type="text" name="field5">
</form>
<form action="y">
<input type="file" name="myfile">
</form>
Is there any other way to do this?

$("img").click(function(){
$("input[name=myfile]").trigger('click');
});
Demo. Click on the envelope image.
Edit: Giving ID's on the each of input fields will make the code more readable and "good."