Develop Reference

Logging into https://www.amazon.com/ap/signin with PhantomJS

Maybe I am making this more complicated then I need to. I am learning about Phantom JS I figured I could use that to automate Android App submissions to the Amazon App Store/Amazon Developer Console. The login page has this URL: http://developer.amazon.com/home.html
It redirects to a super long URL and presents a form to enter one's username and password and a button to click. If you look at page source you see a form that has all sorts of hidden inputs. Here is the part of the actual form tag from the page source:
<form name="signIn" method="POST" id="ap_signin_form" novalidate="novalidate" action="https://www.amazon.com/ap/signin" onsubmit="var test1 = apCheckRequiredFields('ap_signin_form', ['ap_email','ap_password']);
return (apValidateEmail('ap_email') && test1);">
<input type="hidden" name="appActionToken" value="scIhj2FOCtxr39z7eUIj2FWeNOWxtIwj3D"><input type="hidden" name="appAction" value="SIGNIN">
<input type="hidden" name="openid.pape.max_auth_age" value="ape:MQ==">
<input type="hidden" name="openid.return_to" value="ape:aHR0cHM6Ly9kZXZlbG9wZXIuYW1hem9uLmNvbS9hcF9sb2dpbi82ODc0NzQ3MDczM0EyRjJGNjQ2NTc2NjU2QzZGNzA2NTcyMkU2MTZENjE3QTZGNkUyRTYzNkY2RDJGNjg2RjZENjUyRTY4NzQ2RDZDLmh0bWw=">
<input type="hidden" name="prevRID" value="ape:N1RBVEM3SFQxSEdXRTNITUFENEs=">
<input type="hidden" name="openid.identity" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjAvaWRlbnRpZmllcl9zZWxlY3Q=">
<input type="hidden" name="openid.assoc_handle" value="ape:bWFzX2Rldl9wb3J0YWw=">
<input type="hidden" name="openid.mode" value="ape:Y2hlY2tpZF9zZXR1cA==">
<input type="hidden" name="language" value="ape:ZW5fVVM=">
<input type="hidden" name="openid.claimed_id" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjAvaWRlbnRpZmllcl9zZWxlY3Q=">
<input type="hidden" name="pageId" value="ape:bWFzX2Rldl9wb3J0YWwy">
<input type="hidden" name="openid.ns" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjA=">
<div id="ap_signin1a_pagelet" class="ap_table ap_pagelet">
<div id="ap_signin1a_pagelet_title" class="ap_row ap_pagelet_title">
<h1>Sign In </h1>
</div>
<div id="ap_signin1a_email_section_title" class="ap_row ap_section_title">
<h2>
What is your email (phone for mobile accounts)?
... even more html here ...
I am kind of confused about what I am suppose to do with the Phantom JS code. Do I need to collect all these hidden inputs and build a form data object to send in a POST request? Or do I just need to figure out what DOM objects I need to set to my my credentials and then generate a button click event?

Sending form data without updating the HTML

I'm using jQuery/JavaScript to append my cart items into the checkout form and
item_name_x, amount_x are dynamically generated.
<input type="hidden" name="item_name_1" value="Orange">
<input type="hidden" name="item_name_2" value="Apple">
<input type="hidden" name="item_name_3" value="Pineapple">
<input type="hidden" name="amount_1" value="260">
<input type="hidden" name="amount_2" value="140">
<input type="hidden" name="amount_3" value="600">
Here is what it will look like in the browser's developer tool.
Whenever I check or uncheck an item, the HTML within the developer tools will update accordingly. Is there a way to prevent the developer tools from updating but still be able to send through data?

How to add a hidden list of IDs to a form in Javascript?

I've got a simple form in html:
<form action="" method="post">
<input id="title" name="title" size="30" type="text" value="">
<input type="submit" value="Save this stuff">
</form>
I also have a file upload on the page, which handles uploads using ajax and adds the files to a mongoDB. The file upload returns the mongoDB id of the file (for example 12345) and I want to add that id to the form as a hidden field so that the id is POSTed to the server upon submitting the form. Since the user can add multiple files though, I want to add a list of id's to the form.
I found how I can add one hidden field to a form from javascript, but this always handles a single field, not a field with multiple values. So I thought of adding a checkbox field to the form so that I can submit multiple values in one element, but it kinda feels like a hack.
Can anybody hint me in the right direction on how I can add a hidden list of values to a form using Javascript? All tips are welcome!
[EDIT]
In the end I would like the form to look something like this:
<form action="" method="post">
<input type="hidden" name="ids" value="[123, 534, 634, 938, 283, 293]">
<input id="title" name="title" size="30" type="text" value="">
<input type="submit" value="Save this stuff">
</form>

I am not sure if I understand your question correctly, so I may just be guessing here.
Try adding multiple hidden inputs with a name such as ids[] so that they will be posted to the server as an array.
Example:
<form action="" method="post">
<input type="hidden" name="ids[]" value="123">
<input type="hidden" name="ids[]" value="534">
<input type="hidden" name="ids[]" value="634">
<input type="hidden" name="ids[]" value="938">
<input type="hidden" name="ids[]" value="283">
<input type="hidden" name="ids[]" value="293">
<input type="submit" value="Save this stuff">
</form>

Why not simply concatenating all the ids into a string like so "123,456,890,..etc" and then adding them as a value to ids inupt. When you need them, simply split by ',' which would give you an array with ids?
Todo so only with javascript something like this should work
var elem = document.getElementById("ids");
elem.value = elem.value + "," + newId;

Do you mean that for each time the user clicks the 'upload' button you need to add a hidden field to the form?
Can you post the entire form, that should clear things up...
[Edit]
you could store the id's in an Array, everytime an id should be added to the hidden field's value you could do somthing like:
$('#ids').attr('value', idArray.join());
I'm just typing this out of the box so excuse any little errors

Possible Javascript submit one value from multiple equal name input?

This code has two links with same name but different values. If i click first link, i want to get value 10. Is it possible using javascript with link submit()??
<form name="listpages" action="page.php" method="post">
<input type="hidden" name="pgnum" value="10">
<input type="hidden" name="pgnum" value="20">
</form>
thanks in advance

No. But you can use this code to achieve the desired results.:
<form name="listpages" action="page.php" method="post">
<input type="submit" name="pgnum" value="10">
<input type="submit" name="pgnum" value="20">
</form>
EDIT
The JavaScript way. I don't see why you want to stick to JS. Your code will be broken when a user has disabled JavaScript (by using NoScript, for example);
<form name="listpages" action="page.php" method="post">
<input type="hidden" id="pgnum1" value="10">
Option 1
<input type="hidden" id="pgnum2" value="20">
Option 2
</form>

Why not use a single hidden input and set it's value via the hyperlink:
<form name="listpages" action="page.php" method="post">
<input type="hidden" name="pgnum" value="10">
10
20
</form>

You could use a single form and combine it with some javascript code to submit the form with the appropriate page number:
<form name="listpages" action="page.php" method="post">
<input type="hidden" name="pgnum" value="1">
</form>
<script type="text/javascript">
function submitPageForm(pageNo) {
var form = document.forms.namedItem("listpages");
form.elements.namedItem("pgnum").value = pageNo;
form.submit();
}
</script>
...
But be reminded that for websites it is actually recommended to use GET parameters to switch pages, content items etc.
Here is a very good guide on choosing between GET and POST: http://www.w3.org/2001/tag/doc/whenToUseGet.html
Finally, if you decide to switch to GET, you no more need the form at all. I.e. you can simply write:
...

Submit via javascript doesn't send the textbox value

Interesting problem. I have a client who wants the add to cart button to be an image. That's fine, submit via javascript in an onclick on the image. But when I look at the values being sent, quantity is always 1 (or whatever I set it as in the code). In other words, I can't change the value of quantity.
<form name="AddToCartForm<?=$index?>" id="AddToCartForm<?=$index?>" action="[cartaddress]" method="post">
<input type="hidden" value="1" name="insert" />
<input type="hidden" value="<?=$subcategory['Name'];?>" name="category" />
<input type="hidden" value="<?=$item['ProductNumber'];?>" name="prodnumber" />
<input type="hidden" value="<?=$item['Name'];?>" name="prodname" />
<input type="hidden" value="<?=$item['Price'];?>" name="prodprice" />
<input type="hidden" value=".10" name="handling"/>
<input type="hidden" value="10" name="weight" />
<p><?=$item['Description'];?></p>
<p><strong>Quantity:</strong> <input type="text" name="quantity" size="10" value="1"/></p>
<p><strong>Price:</strong> $<?=number_format($item['Price'], 2);?></p>
<p>
<img onclick="document.getElementById('AddToCartForm'+<?=$index?>).submit();" style="cursor:pointer;" src="images/cart_button.png" width="100" height="111" alt="add to cart" />
</p>
</form>
(If I use a submit button, the quantity goes through.)

You can use <input type="image"> instead of <img>. It acts like submit button.

Your onlcick merely submits, it doesn't do anything to change the value of quantity...so it's doing what you told it to. Before submitting you need to read the value of quantity, add 1 to that, and write the new value back to quantity.

Although the solution is already given, I think I got the cause of the problem:
document.getElementById('AddToCartForm'+<?=$index?>).submit();
I think the 'onclick' submits the wrong form. Would it also work if you changed it to document.getElementById('AddToCartForm<?=$index?>').submit();?