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).

refresh external website with new form data provide with href

Folks
I am in need to construct a simple < a> tag. or another such mechanism such as < form> etc
There is a third party tool that does not takes arguments in the url.
But suppose at a certain endpoint "https://example.com/ticket" there is a form that performs a search on given tickets Number. I can head over there and manually type a ticket ID and submit the form and result is retrieved.
This tool has one input and one button
<input id="query" name="query" autocomplete="off" type="text">
<button> name="button" type="submit" class="btn"></button>
On my page I have list of tickets assign to certain users, and I am trying to construct an href link that will take the user to "https://example.com/ticket" in new window and reload the page with provide ticket ID in post method
something like following
TICKET-123
one of the option I tried is
<form action="https://example.com/ticket" method="post">
<input id="query" name="query" autocomplete="off" type="text" hidden>
<button> name="button" type="submit" class="btn" value="TICKET-123"></button>
</form>
Argument in the usr such as https://example.com/ticket?id=TICKET-123 would've been sweet, but form link does not work. what am I missing

Could you try something like this for the form sending a user to search.php
<form action="search" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
where search.php would contain the following
<?php
$ticketnumber = $_GET["ticketnumber"];
header("Location: https://example.com/ticket/$ticketnumber");
die();
?>
This would work if you just need to send users to an external site. As long as the pattern is like this. You then wouldn't need to reload the page if you can send the user to the URL correctly in the first instance.
Your question is a little vague but I think this approach could work because users then must input their ticket number instead of getting the inner text from the <a> tag. Let me know if you're looking at a different approach and please clarify how.
Also, if you didn't want to process this via PHP (I'd recommend it though because users can't see how it's done) you could go with the same form and the following
<form action="example.com/ticket/" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
Or you could use window.location.replace("https://example.com/ticket/#"); and place the ticket number where # is.

How to reset the form data in html using jquery/javascript && and also how to send the form data to an email using jquery?

I'm new to jquery
I'm working on a form data html,
now i need to reset the data on click on the reset button and also need to transfer the form data to email on click on submit button.
Can anyone help me in solving this??
Before Posting the question I have gone through the link which Pierre C. has updated and my question is different from that question and even how to add /can we add "type" attribute in anchor tag.??
here is the html:
<form id="form" method="post">
<fieldset>
<label>
<input type="text" value="Name">
</label>
<label>
<input type="text" value="Email">
</label>
<label>
<input type="text" value="Phone">
</label>
<label>
<textarea>Message</textarea>
</label>
<div class="btns">
Clear
Send
</div>
</fieldset>
</form>

To clear all the data within a form, all you have to do is add an
<input type="reset" name="reset" value="Reset"></input>
However, reset buttons are annoying and no one ever uses them, so I suggest you just leave that. With regards to sending the form, the way I would do it is write this app in ASP.NET MVC and just put the mail logic in the controller, or create an API for your app, then create an Ajax POST on the button click using the form data as API parameters.

How to update html page for all viewers?

Basically I want to update a page with the name of the last person to submit a form. I have the following code but I can only get it to update on one device. When the page is viewed form another device it doesn't have the updated name.
<form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
<input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here"><br>
<br>
<input type="submit" value="Update!" onclick="updateTable();"/>
</form>
<p id="last"></p>
<script>
function updateTable(){
document.getElementById("last").innerHTML =document.forms['leds'].elements[3].value;
alert(document.forms['leds'].elements[3].value+", You are about to change the Lights! Beware that there is about a 30 second delay on the live stream.");
}
</script>
</html>

When you use javascript like this (to set a value for an element, for example) you are only changing the value on the one workstation viewing the page.
You would need some kind of datastore on the server that the web browser can push data to and retrieve data from. For example, this could be in-memory on the server (short-term and volatile) or a database management system (long term persistence).

Mimicking a login form...

We have an internal application that requires the same username/password across the board.
However, if the login fails too many times, then the account is locked for that username.
We can't change the lockout because that will affect the public facing site as well.
I have been asked to come up with a way to essentially, click a button and auto-login.
Initial research has brought me to this script... (Credit)
<!doctype html>
<!-- saved from url=(0014)about:internet -->
<html>
<title>Auto Login</title>
</head>
<body>
<form id="loginForm" name="loginForm" method="post" action="http://mail.google.com">
<select name="uni_url" id="logServer" class="validate[required]">
<option class="" value="" fbUrl="" cookieName="" >
Test_en
</option>
</select>
<input id="loginName" name="name" type="text" value="Username" class="" />
<input id="loginPassword" name="password" type="password" value="ExamplePassword" class="" />
<input type="hidden" id="loginKid" name="kid" value=""/>
</form>
<script>document.loginForm.submit();</script>
</body></html>
...but I can't seem to get it to work for me.
So, I found another option where I can create a small html file (form) with a submit button, that does - onload="form1.submit();", and this could basically log me into this website without having to key in any login information.
Not sure where to start with mimicking a login form like this and need a good direction to get started in.
Thoughts?

Let's assume your existing login form looks like this:
<form action="/login.php" method="post" id="loginform">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" />
</form>
On your "auto-login" (which is really an auto-submit) page you want to mimic the same structure as before but:
Add in values to be submitted (static username and password?)
Optionally remove the submit button (if you know your users have JS enabled then you can get rid).
Add some JS that automagically submits the form for you.
That might give us something like this:
<form action="/login.php" method="post" id="loginform">
<input type="text" name="username" value="gvee" />
<input type="password" name="password" value="hunter2" />
</form>
<script type="text/javascript">document.forms[0].submit()</script>
The javascript will essentially look for the first form on the page (forms[0]) and submit that.
Update
Upon further inspection your existing login form is a bit of a funny onion. Instead of submitting the form directly, it's calling a function called doLogin() that sets certain hidden properties.
Therefore, instead of submitting the form, we should mimic the same behaviour (i.e. call doLogin() instead of .submit()).
One key thing here is that you'll want to only call the function after it has been declared. Simplest solution is to put our added bit of script at the very bottom of the HTML.
<script type="text/javascript">doSubmit();</script>