Develop Reference

Iterating through multiple file upload fields

I have a directive that essentially populates multiple individual input file fields, with other HTML form elements. The mechanism itself is done through auto-population an array with the number of elements, which is pushed/popped as more file fields are added. This itself, drives an array with a numerical list, that is ideally supposed to alter the name/id of each element (this also doesn't work, the presence of the { in the attributes causes a script-breaking syntax error).
<div ng-controller="MultiFileUpload">
<form ng-submit="file_upload_multiple()" novalidate>
<div class="upload_fields">
<fieldset ng-repeat="Item in FileUploadItems">
<input type="file" name="upload_file" id="upload_file_{{Item}}" ngf-select ng-model="filename_{{Item}}" ngf-max-size="2MB" required />
<input type="text" name="filename" id="filename_{{Item}}" required/>
<select name="filetype" id='filetype_{{Item}}' required>
<option label="" value=""></option>
<option label="Example Document 1" value="example_doc_1">Example 1</option>
<option label="Example Document 2" value="example_doc_2">Example 2</option>
</select>
</fieldset>
</div>
<button>Save Files</button>
</div>
When the submit is fired, I am not clear on the best mechanism to have the client-side script iterate through all the available fields as a distinct group. having the template variable call in the name/id is a major throwoff, and If I can accomplish a solution that scales upward without this eyesore, that would be great. I already have an idea on how I'll eventually stash all the field data (through iterative POST REST calls -- i'm working with a very out of date API), but getting to that step requires determining the best approach to process multiple field entries. Any suggestions?
I should clarify, I am using ng-form-upload to assist in the task of interfacing with the data in the file input fields.

You can use an array to store your model something like this:
<div ng-controller="MultiFileUpload" ng-init="files = [{}]">
<form ng-submit="file_upload_multiple()" novalidate>
<div class="upload_fields" ng-repeat="fileData in files">
<fieldset ng-repeat="Item in FileUploadItems">
<input type="file" name="upload_file" ngf-select ng-model="fileData.file" ngf-max-size="2MB" required />
<input type="text" name="filename" ng-model="fileData.name" required/>
<select name="filetype" ng-model="fileData.type" required>
<option label="" value=""></option>
<option label="Example Document 1" value="example_doc_1">Example 1</option>
<option label="Example Document 2" value="example_doc_2">Example 2</option>
</select>
</fieldset>
</div>
<button>Save Files</button>
</div>
Then to add another set of fields you can push an empty object into files and the files array will contains all the data that is needed to be submitted.

How to pass input value from one form to another form at same jsp page?

I have two forms in my jsp page, first form have input values and second form have submit button,
i can't use both in same form because of some issue. now i want to access first form value into second form.
My Sample Code is Here,
<form name="onchange" id="first">
<div><input type="text" name="n1"></div>
<select onchange="document.forms['onchange'].submit();" name="select">
<option value="A">A</option>
<option value="A">A</option>
</form>
<form action="servlet" id="second">
<input type="submit" name="sub" value="Submit">
</form>
I need to access a first form value to second form on submit. is it any way to access? Thank You.

I dont exactly know what you want to do.But you cant send data of one form using a submit button of another form.
You could do one thing either use sessions or use hidden fields that has the submit button.
You could use javascript/jquery to pass the values from the first form to the hidden fields of the second form.Then you could submit the form.
Or else the easiest you could do is use sessions.
IN Jquery
<form>
<input type="text" class="input-text " value="" size="32" name="user_data[firstname]" id="elm_6">
<input type="text" class="input-text " value="" size="32" name="user_data[lastname]" id="elm_7">
</form>
<form action="#">
<input type="text" class="input-text " value="" size="32" name="user_data[b_firstname]" id="elm_14">
<input type="text" class="input-text " value="" size="32" name="user_data[s_firstname]" id="elm_16">
<input type="submit" value="Continue" name="dispatch[checkout.update_steps]">
</form>
$('input[type=submit]').click(function(){
$('#elm_14').val($('#elm_6').val());
$('#elm_16').val($('#elm_7').val());
});
This is the jsfiddle for it http://jsfiddle.net/FPsdy/102/

Paypal Upload Command - How to encrypt/secure dynamically generated payment amounts?

Alright so I saw a question similar to this but thought my situation was a little different and warranted a question. So I am working on a site that allows you to select from two dropdowns. I'm using jQuery to keep track of when these drop downs change. Then based off of the change I update the PayPal hidden form(Cart Upload Command).
Then once the user is done selecting the options they click the checkout button which takes them to the PayPal page that shows them the items they selected and they can begin the checkout process through PayPal. It sounds so easy when I say it like this but then I read that it needs to be encrypted. My question is how do I go about encrypting a dynamically generated form. They suggest using the PayPal button creation tool. Well that would make sense if I had a static amount, but I do not.
HTML
<label for="space-selector">Select Space</label>
<select class="form-control" id="space-selector" name="space-selector">
<option value="150">10' x 10'</option>
<option value="225">20' x 10'</option>
<option value="300">30' x 10'</option>
<option value="500">Custom</option>
</select>
<label for="parkingpass-selector">2 Day Parking Pass - $50</label>
<select class="form-control" id="parkingpass-selector" name="parkingpass-selector">
<option value="0">No</option>
<option value="50">Yes</option>
</select>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="jestewart.11#gmail.com">
<input type="text" name="item_name_1" value="Space Selected" readonly>
<input type="text" name="amount_1" value="1.00"readonly>
<input type="hidden" name="shipping_1" value="1.75">
<input type="text" name="item_name_2" value="Parking Pass" readonly>
<input type="text" name="amount_2" value="2.00" readonly>
<input type="hidden" name="shipping_2" value="2.50">
<input type="submit" value="Checkout">
</form>
jQuery
$(function (){
//space selector change
$("select[name=space-selector]").change( function () {
//update the hidden form values based off of selectors
$("input[name=item_name_1]").val($(this).find(":selected").text());
$("input[name=amount_1]").val($(this).find(":selected").val());
});
//parking pass selector change
$("select[name=parkingpass-selector]").change( function () {
//update the hidden form values based off of selectors
$("input[name=item_name_2]").val($(this).find(":selected").text());
$("input[name=amount_2]").val($(this).find(":selected").val());
});
});
Here is the fiddle to show you functionality. Fiddle

You do not need encrypting the amount and others. The only important thing is to make ALL verifications on the server.
Paypal has an API who permise that. IPN
Some links :
https://developer.paypal.com/webapps/developer/docs/classic/products/instant-payment-notification/
http://www.micahcarrick.com/paypal-ipn-with-php.html

getElementById() and input form

I have a
function calcRoute() {
var start = document.getElementById('start').value;
}
And then a
<select id="start" onchange="calcRoute();">
<option value="somevalue">Dropdown 1</option>
<option value="somevalue">Dropdown 2</option>
<option value="somevalue">Dropdown 3</option>
</select>
Everything works properly. Now, instead of a dropdown list I need an input box. The problem is that I tried with
<form onsubmit="calcRoute();" method="get" id="start" action="#">
<input type="text" id="start" name="start">
<input type="submit" value="Go">
</form>
But it doesn't work (it's submitting the form to the server).. you can see a demo here. Remember that I don't need the dropdown list (it's there only to prove everything works), so it can go (there's no problem of double-called function). Thanks in advance :-)

You should change from:
<input type="text" id="startText" name="start">
To:
<input type="text" id="start" name="start">
As Javascript is searching for ID, not for name. (and in your code the ID is different from what Javascript is searching)
If you want use the input and the dropdown list in the same page, you just change your variable definition to something as:
var start = document.getElementById('startText').value || document.getElementById('start').value;
As if the input is empty, Javascript uses the value from the dropdown list.
Update
In adition to the change of the ID, change your form to something as:
<form>
<input type="text" id="start" name="start">
<input type="button" onclick="calcRoute();" value="Go">
</form>
To not allow form submission.

HTML Form - using action and onsubmit

I have a form which calls a javascript function. This function will only works when called from a certain page on my site (homepage). I am looking to put the form in the header of my website so that it can be populated from other pages, redirect to the homepage and then call the onsubmit function. Is there a way that I can accomplish this?
My html that I am using for the form at the moment is -
<form action="#" onSubmit="runRoute();return false;" id="routeForm">
<input type="text" id="routeDistance" value="" placeholder="1" />
<select id="routeUnit">
<option value="miles">miles</option>
<option value="Km">km</option>
</select>
<input type="text" id="routeStart" value="" placeholder="postcode or location" />
<input type="submit" value="plan my route" class="submit" />
</form>
Thanks.