We Keep Coding

HTML post form not worked when migrated to Angular

I am doing a POST request using an HTML form, I copied the same form content to a new blank Angular project and it didn't work and throws an error. Does Angular process forms in a different way?
Actually, what the HTML/JS file is doing is to post form content to a URL (by sending a unique generated hash and some other information), upon success it will redirect to the correct page, otherwise, it will throw an error.
Unfortunately, the backend doesn't support sending a JSON request to it, but only a form.
The code snippet for the HTML form:
<form name="formpaiement" Id="formpaiement" action="https://testpayment.cmi.co.ma/fim/est3Dgate" method="post">
<input type="hidden" name="hashAlgorithm" value="ver3">
<input type="hidden" name="encoding" value="UTF-8">
<input type="hidden" name="TranType" value="PreAuth">
<input type="hidden" name="currency" value="504">
<input type="hidden" name="amount" value="1">
<input type="hidden" name="CallbackResponse" value="true">
<input type="hidden" name="BillToCountry" value="MA">
<input type="hidden" name="storetype" value="3D_PAY_HOSTING">
<input type="hidden" name="failUrl" value="https://testpayment.cmi.co.ma/fim/est3dteststoreutf8?pagelang=en">
<input type="hidden" name="clientid" value="80000xxxx">
<input type="hidden" name="okUrl" value="http://cmiecom.dx.am/ok.php">
<input type="hidden" name="lang" value="en">
<input type="hidden" name="MERCHANTSAFE" value="MERCHANTSAFE" />
Token : <input type="Text" name="MERCHANTSAFEKEY" value="ABC123">
<input type="hidden" name="MERCHANTSAFEAUTHTYPE" value="3DPAYAUTH">
<input type="hidden" name="MERCHANTSAFEACQUIRER" value="60">
<input type="hidden" name="MERCHANTGROUPID" value="60029">
<input type="hidden" name="hash" value="hash">
</form>
<input type="submit" value="valider" onclick="document.formpaiement.submit()">
Link to the working HTML file
Link to the Angular project (you may notice that's not the best way to submit form content, but, just for demo purposes, it will look similar to the above HTML file).

I'm guessing the problem is how you've defined the hash field in you form. In the plunker that generates the error, you're sending undefined as the value for the hash field. In the stackblitz example that works there's an actual value.
Here's what your form data looks like in the plunker:
And here's what the stackblitz sends:
In your working example, you have an onclick event that appears to compute the value for "hash", append it to the form and then submit it. Snippet taken from the stackblitz:
function submitformpaiement() {
hashval = "";
// compute value for "hashval" (removed for brevity)
$('<input />').attr('type', 'hidden').attr('name', "hash").attr('value', hash).appendTo('#formpaiement');
document.formpaiement.submit();
}
<input type="submit" value="valider" onclick="submitformpaiement();">
In your Angular version, you've added the hash field and bound the value to something that doesn't exist (hence undefined). Your onclick event also doesn't execute any function, it just submits the form.
<form name="formpaiement" Id="formpaiement" action="https://testpayment.cmi.co.ma/fim/est3Dgate" method="post">
<!--lots of inputs (removed for brevity) -->
<!-- "hashCMI" doesn't exist!! -->
<input type="hidden" name="hash" [value]="hashCMI">
</form>
I suspect you need to make sure you generate a value for hash before actually submitting.

Angular has a very specific way of working with forms (https://angular.io/guide/forms-overview), and a very specific way of working with web services (https://angular.io/guide/http). Unfortunately, just having the form in the template is not going to work - you might as well not use Angular at all if that's your intention.
But that is not the only problem.
Looking at your two examples, what you have on Stackblitz describing as the "HTML example" vs. on Plunkr with Angular are not doing the same thing, so you can't compare one to the other.
In your Stackblitz example, there is a whole bunch of javascript that's executed prior to the form being submitted. If I change your example to do the same thing that your Angular example is doing, you get the same exact result as the Angular error. Here's the comparable "just HTML" example: https://stackblitz.com/edit/web-platform-2gvw46
So the solution is to make sure your Angular application is doing the same exact logic as your original Stackblitz example, and does it in an Angular way (you can't copy/paste the JavaScript from the other example and expect it to work).

Identical ID's in the same HTML page

I have a page that has two different inputs that contain same ID but each one in different form. and I'm actually setting values to inputs from javascript using get element by ID. I know this is not valid. but the thing is if i change one of the input id's I'm gonna need to re write a bunch of code in 'shopping cart ' cuz these input's pass value to cart. I'm actually not planning to touch that for now. So, is there any trick that can target one input instead of the other even if they have the same id's??
ex:
<input type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
thanks in advance!!

Although it is a wrong practice, and you should use different id's, you could add a different class attribute to each one.
<input class="input1" type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
<input class="input2" type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
var x = document.getElementsByClassName("input1")[0];
Again: I strongly recommend you to find time to change the logic of your program to use unique id's.

If they are in different forms you can target them by selecting IDs where they are inside a certain class. You can also change the name attribute and select that instead.
HTML
<div class="form1">
<input type="hidden" name="rename1" id="cart_1_ID_Add2" value="">
</div>
<div class="form2">
<input type="hidden" name="rename2" id="cart_1_ID_Add2" value="">
</div>
JS
$(".form1 #cart_1_id_add2")
//Or
$("input[name*='rename1']")
However you shouldn't really have the same id twice on one page otherwise it makes it hard to maintain and debug. If it's not a huge job to change your approach I'd recommend you do that.

Add another attribute to one or both tags.
For example, you can make them
<input type="hidden"name="cart_1_ID_Add2" id="cart_1_ID_Add2" data-id="add100" class="myInput" value=""/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" data-id="add101" class="myInput" value=""/>
Then get their values with jQuery
var myInput = $('[data-id=add100]').val();
console.log(myInput);
OR use plain javascript by adding a class and getting the value
var myVal = document.getElementsByClassName("myInput")[0];
console.log(myVal.value);
Hope this helps

Yes.
That code shouldn't have duplicate id properties in Dom btw.
You can use a custom HTML element property:
<input type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value="" my-property="some_identifier"/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value="" my-property="some_identifier2"/>

Auto Login html for live.com account

Good Evening Everyone. I need some help with an auto login procedure.
Specific Question = How can I get initiate a 2nd form action within the same html page? I also need to create a 5 second delay so the 1st action can complete
The Result I'm looking for = I want to double click on saved .html file and then get automatically logged into my email
The Website =
HTML Code:
https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1489346474&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fauthRedirect%3dtrue%26nlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015
How did I get this URL? = msn.com>clicked on outlook>clicked on sign in
The problem =
I have created a javascript function within a saved html page and I can get past the login in page. The issue is that I cannot get my password to be correctly placed in the password field and the submit button to work. For my live.com account it is a 2 page authentication. The first page is where you place your username and click next and then the 2 page is where you enter your password and click sign in.
What I have tried =
(1)Because there is a placeholder text, I've tried a POST method, but
I can't get it to work. POST would be best, but I can't figure it
out.
(2) I've tried get element by id and that does not work because
my password is just written on top of the placeholder text and does
not get replaced
(3) CURRENT STATE. What I have written now is 2 form
actions. The 1st form action (logonForm) enters my username and the
2nd form action (passForm) is supposed to enter my password and then
log me in. Is 2 form actions the best way to accomplish this?
WHAT I HAVE SO FAR =
<html>
<body style="display: none">
<form action="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015" method="POST" name="logonForm" ENCTYPE="application/x-www-form-urlencoded"
id="loginForm">
<input type="hidden" name="destination" value="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015">
<input type="hidden" name="username" value="this is my username#live.com" >
<input type="hidden" name="passwd" value="this is my password">
<input type="hidden" name="flags" value="4">
<input type="hidden" name="forcedownlevel" value="0">
<input type="radio" name="trusted" value="4" class="rdo" checked>
<input type="hidden" name="isUtf8" value="1">
</form>
<form action="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015" method="POST" name="passForm" ENCTYPE="application/x-www-form-urlencoded"
id="passwordForm">
<input type="hidden" name="destination" value="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=13&ct=1485483982&rver=6.7.6640.0&wp=MBI_SSL&wreply=https%3a%2f%2foutlook.live.com%2fowa%2f%3fnlp%3d1&id=292841&CBCXT=out&fl=wld&cobrandid=90015">
<input type="hidden" name="username" value="This is my username#live.com" >
<input type="hidden" name="passwd" value="this is my password">
<input type="hidden" name="flags" value="4">
<input type="hidden" name="forcedownlevel" value="0">
<input type="radio" name="trusted" value="4" class="rdo" checked>
<input type="hidden" name="isUtf8" value="1">
<input type="hidden" name="data-bind" value="this is my password">
</form>
<script type="text/javascript">
document.forms["logonForm"].submit();
document.forms["passForm"].submit();
</script>
</body>
</html>
I am a new student to java and I'm ambitious about coding, developing, and learning. I just can't seem to get this figured out. I'm sure my html/java looks like a jumbled mess but that's because I've been trying all types of things to see if anything would work and I got excited when i was able to get past the login page.
I do apologize for the long post, I just wanted to get as much info as I have out. I'm trying to be as specific as I can be. This is my first post in stack overflow and I couldn't be more excited to be part of this community.
Thanks in advance for your help!
TechStudent01

You cannot do this.
Once a <form> is sent (either as GET or POST), which is a synchronous action, your script basically stops executing, and unless the targeted webpage fails to load (and the browser doesn't display an error page, which can happen with severe network issues), .submit() is a no-return function : if it executed properly, you're not on the same page any more.
Letting you run scripts from a webpage onto a newly loaded other would be the open door to loads of security issues, so this, by design, is not allowed. As such, you can't get your password to be typed in automatically into the log-in form.
In addition, Microsoft account forms are subject to CSRF verification, preventing you from logging in from a page not sent by Microsoft, i.e. your HTML file.
Also, what you are trying to achieve is exactly the purpose of password managers that provide some sort of browser integration.

JavaScript value not set during form submit

I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.

You should do the getcitybyzip and getstatebyzip in the form onSubmit.

Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?

Updating the DOM to recognize AJAX inserted inputs

I'm pretty much an idiot when it comes to AJAX, so if this problem is really simple, please forgive me.
I have this little form:
<form id="location_ajax_request">
<label for="location">Enter Your Location:</label>
<input name="ajax_location" id="ajax_location" type="text" value="Irvine, CA, USA" />
<input id="requestLocation" type="button" value="Click to Submit" />
<p id="output"></p>
</form>
When requestLocation is clicked, a GET call to a php script returns something like:
<input type="radio" name="location_selected" value="0" />
<input type="hidden" name="location_x_0" value="-117.8253403" />
<input type="hidden" name="location_y_0" value="33.6868782" />
<input type="hidden" name="location_name_0" value="Irvine, CA, USA" />
[...]
<input type="button" id="confirmAddress" value="Confirm Address" />
Where the _0 is a count of items. If, for instance, someone had entered London, USA, they'd receive some 5 responses.
With jQuery, I grab the click of $('#confirmAddress') successfully using live() and attempt to grab the values of the inputs. I assume they somehow need to be checked for since inserted elements aren't registered with the DOM. Say I'm trying to grab:
document.forms['location_ajax_request']['location_name_0'].value;
How do I first register it with the DOM as a valid object so it stops returning undefined?

Well if you are using jquery as the OP tags say:
$('input[name="location_name_0"]', '#location_ajax_request').val();