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).
Related
I'm working on a project (Java with XSL/XML) where I have to make the least changes to the already existing code, but I have this scenario and I want to know if it is possible.
Let's say I have this form :
<form method="get">
<input id="checkbox-has-file" type="checkbox" name="myCheckBox" value="test">
<input name="" type="submit" value="sup">
</form>
Is it possible to like pre-select the checkbox using only the url parameters, like this :
localhost/page.html?myCheckBox=true
I know it is possible using JavaScript or JQuery, but I'm trying to avoid extra code.
Thank you!
Without any programming language (JavaScript etc.) it isn't possible.
Use PHP:
Here is a sample php file:
<form method="get">
<input id="checkbox-has-file" type="checkbox" name="myCheckBox" value="test" checked="<?php echo $_GET['myCheckBox'];?>">
<input name="" type="submit" value="sup">
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.
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.
I seem to have an issue with passing a value between two hidden fields.
I'm using a jquery plugin for for geolocation from google maps. The plugin uses a fieldset which includes two hidden fields, one for lat and one for lon. Each time then pin is moved the two values change, which is definitely happening and can be viewed in the developer tools.
I have a form that I'm bringing all of my values into to be sent to a php file all in one go. I've managed to get it working for all the other inputs I need but this one just wont work.
Heres the map with the two hidden fields. The hidden classes come with a value of 20 preset which changes.
<div class="gllpMap">Google Maps</div>
<input type="hidden" class="gllpLatitude" value="20"/>
<input type="hidden" class="gllpLongitude" value="20" />
<input type="hidden" class="gllpZoom" value="3"/>
</div>
And here is my search that is going to be sent to the php.
<form method="post" action="getData.php">
<input type="text" name="username" class="mySearch" value="" />
<input type="hidden" name="fromTest" id="fromTest"/>
<input type="hidden" name="untilTest" id="untilTest"/>
<input type="hidden" name="lat" id="lat"/>
<input type="hidden" name="long" id="long"/>
<input type="submit" class="myButton" value="">
</form>
For some reason I just cant get this to work. What I'm looking for is the simplest way to get this lat and long to equal the values set by the two hidden fields. The simpler the better, I'm pretty new to coding and this is just a first mock-up which I hope to revisit properly when I have more time available.
You can take and set the value using JQuery .val()
$("#lat").val($(".gllpLatitude").val());
$("#long").val($(".gllpLongitude").val());
DEMO
I would like to link to a new page in the format:
/topic/create&qty=4
Right now I have the value (which is the number 4) stored in an field in a form. I tried to put everything in the form with a post but then realized this isn't what I want to do. I just need clicking on a button to go to link to a new page and send the input field value. The reason I want just a link is that later on I will have posts from that form and they will be handled completely differently.
Is this possible? All I know is that
<form action="/adminTopics" method="post">
isn't what I need.
you can not use POST to send data via url, but you can use GET like this: /topic/create?qty=4
EDIT: Clarification
Writing red in the text field and pressing submit on this form...
<form action="/handler.php" method="GET">
<input type="text" name="color" />
<input type="submit" />
</form>
will produce identical results on the server side to clicking this link
<a href='/handler.php?color=red'>rum</a>
If the url is
/topic/create?qty=4
and it has to be posted, then you can use
<form action="/topic/create" method="post">
<input type="hidden" name="qty" value="4" />
</form>
Send
or
<script>
window.onload=function() {
document.forms[0].submit();
}
</script>
If you do NOT need POST, then just call the URL which is the same as a GET
<input id="qty" type="hidden" name="qty" value="4" />
<a href="/topic/create"
onclick="location=this.href+'?qty='+document.getElementById('qty').value;
return false">Go</a>