We Keep Coding

How to call Script of post method which is in innerHtml in angular8+?

I am getting the response from API which consist of html and inside that I have script of post method.
I binded the html through [innerHtml] then I want to hit the script which is of post method from Angular8+.
How do I hit the post method which is in the [innerHtml]?
Explanation in brief
I got complete html from API response, it holds form with two input field for ex:-
form name="example" method="post" url="www.google.com"
input type="text" value="name"/
input type="text" value="passsword"/
/form
in it and post method for ex:- script document.example.submit /script".
When I get the response I will open the html which I get from response in model window by binding it to [innerHml]. for example :-
div "#exp" [innerHtml]="response" </div,
which will display the html content but with the content I have the form which should be auto posted and it should open external form.
can be opened in different tab or on top of the present website.

I got solution by using Jquery, which worked for me.
I coded Jquery inside ngAfterViewInit().
ngAfterViewInit(): void
{
$(document).ready(function () {
$('form[name="Bankfrm"]').submit();
});
}
I used "name" instead "id" because I dont have id in-side form.

POST data to the same page (not through URL)

Am a newbie, a hardcore one.
I am in a need of reloading page with passing variables; so when the page is reloaded it would already have those variables before initializing some of the elements (as u can guess, those variables will be used there).
I need this because I am working with an old videoplayer, which can't be reset on-the-fly, the whole page has to be reloaded to re-initialize it with new params.
Also these variables cannot be passed through url, because they are too long.
I would be glad to see any help and to answer clarifying questions as well.
Thanks!
UPD1: There's no real need to delve into specifics of my code thus not posting it; Just imagine a simple page with a textfield and a button, where user enters a string, presses the button, then the page reloads getting that string into a global variable.
UPD2: Found this code on a related page:
$.ajax({
type: "POST",
url: "packtypeAdd.php",
data: infoPO,
success: function() {
location.reload();
}
});
That is how I post the data and reload. But how do I get it after reload then? How is this data accessible?

What about making a simple HTML form with attributes action="" and method="post" like:
<form action="" method="post"> <!-- in action specify where you want the content to be sent, the method speaks about his self -->
<input type="[type]" name="[name]"> <!-- in the name attribute define the name with which you can call the data in PHP via $_POST[name] -->
...some input fields...
...submit btn probably...
</form
Note: clicking the submit button automatically send the information to the page and redirects you to it. If you leave action empty like above it will redirect you to the same page (refresh it) and receive the data from the form.
Also if you don't want to use a form you can simply set cookies with PHP. For example:
setcookie($name, $value, $expireDate, $path(e.g "/");
And then just take information from the cookie with:
$_COOKIE[$name]
Note: in order to make cookies work, you need to refresh the page, so they can be set!

Page changes when i submit the form

<form action="/devilmaycry/register?action=addtocart" method="post">
<input type="hidden" name="user" value="<%=user%>"/>
<input type="hidden" name="pid" value="<%=pid%>"/>
<input type="submit" value="Add to cart" onclick="add();"/>
</form>
i am using the above code to submit a form and add a product to cart
the java code it calls is as follows:
else if(n.equals("addtocart"))
{
String user = req.getParameter("user");
int pid = Integer.parseInt(req.getParameter("pid"));
k=o.addintocart(user,pid);
if(k==1)
{
pw.println("<h3>Added to cart !!!<h3>");
}
else
{
pw.println("<h3>Errror , try again <h3><br>");
}
it does add the product to the table but it changes the jsp page ... i tried to use requestDispatcher but the URL has many parameters so i want something else through which i can retain the same page and update the table also

In order to stay on the same page you need to use AJAX rather than submit the form in the traditional way. HTTP works in a request-response fashion, so when the user submits the form, the browser expects to receive a new page in the response from the server, and will thus refresh the page and render the new HTML it receives.
You have two options here:
Stick with the traditional HTTP form submission request-response approach, and when you receive the request on the server to add an item to the card, after you add the item to the card, rebuild the URL of the page that is showing the information to the user. In this case it is important to use the 'Redirect-After-Post' approach (i.e. in the response to the form POST you put a redirect to the page). Otherwise if the user refreshes the page by pressing F5, the form data will be resubmitted again and the item added again to the cart.
Go for an AJAX approach. In the add() function, you need to submit the form using Javascript. If you are using JQuery it makes it very easy for you to do this. There are various questions / examples if you search around, such as the one here.
In the latter case you will need to change a bit how you process the information from your Servlet but its the only way to get the browser to stay on the same page (without reloading it). You also have the success and error handlers, which you can use to show a message on the screen to display the result.

Work of form action ./login and onsubmit keyword

Please explain the piece of code below, emphasize on ./login and onsubmit keywords..
<form action="./login" onsubmit ="return validatedata()" method="post">

This is a form tag of HTML language. It says following things:
content of this form (such as Text Box or Radio Button or Combo Box or other HTML component values) send to ./login url. It is better use HttpServletRequest.getContextPath() for set relative path rather of absolute path.
onsubmit ="return validatedata()" part says: When user click on submit button(with any label) before submit form to ./login url, execute validatedata function in Java Script functions, if this function not existed , user get a java script error(or other script languages).
method="post" part says: this form send with POST method . please see http://www.cs.tut.fi/~jkorpela/forms/methods.html for more information.
for more information related to form tag see : http://www.w3schools.com/tags/tag_form.asp

This declares an HTML <form> element. When submitting the form it will call the javascript function validatedata(). If the function return true the form will be submitted and if it return false, it won't. The './login' is the destination of the form data. So there is probably a page handling the url http://<your_site>/<where_you_currently_are>/login. It also depends on the technology you use. I don't know if you use a framework such as Struts or if you only use JSPs as is.

How to "break out" of a JQuery color box

If I have a JQuery colorbox() using an iframe, and there is a <form> in that (e.g. login form), then:
If the submission of the form is not successful (e.g. mandatory field empty) then the form should be re-displayed with the error in the iframe
If the form is successful (e.g. password correct), the surrounding page should be reloaded with the result
Only the server request can know if the submission is successful or not (e.g. password correct for a login form), therefore one cannot use a target= parameter on the <form> tag. (As that must be set on the requesting page, where the success of the response is not yet known.)
How should one go about achieving that? Right now I do the following:
The <form> has no particular "target", i.e. the result is displayed in the iframe
If the form submission is unsuccessful, re-display the form in the iframe (the simple case)
If the form submission is successful then display a "response" page in the iframe, which contains Javascript, to refresh the whole page.
The Javascript looks like the following (the wicket:id="link" means that the web framework adds a href= to the link, to specify the resulting page which should be displayed in the whole browser window).
<a wicket:id="link" id="linkToSuccessPage" target="_top"></a>
<script>
$(function() {
top.$.colorbox.close();
top.location.href =
document.getElementById("linkToSuccessPage").getAttribute("href");
});
</script>
The trouble with this approach is, firstly it feels inelegant, but it creates an odd visual effect. The colorbox firstly closes, then there this redirect happens. The other option is not to close the colorbox, but then the contents of the colorbox gets replaced by a blank page while the redirect happens.
Any better ways? This must be a common problem, must have a common elegant solution?
P.S. I have to use the iframe method of the colorbox (rather than JQuery taking the form and placing it in a <div> in the page) for the following reasons: the web framework I'm using (Wicket) submits forms to a relative URL. The relative URL in the <form> is relative to the URL of the page containing the form (= the colorbox contents). If a <div> is used, then this form is inserted into the surrounding page which has a different URL, therefore the relative URLs in the form submission do not work.

I think you will still be able to do this without using an iframe, which will allow you to use inline content for your colorbox windows. Although this suggestion could be adapted for iframes, it's a lot cleaner when using inline content.
First, use this jQuery ajax form plugin to manage the flow of form submission. This will allow you to manage your success/error code without loading anything extra to, as you mentioned, refresh the page or reload the form. In your docReady, instantiate the ajax form like this:
$('#login').ajaxForm({
beforeSubmit: onSubmitForm,
error: onServerResponse,
success: onServerResponse,
url: "site.com"
});
Then you just do what you need to do in those 3 callbacks (all in the context of the parent page). Because you are defining the url here, whatever wicket does with the action attribute of the form won't matter. In fact, the html code for the form does not change except for the fact that now you can omit the action attribute.
With the use of inline colorboxes, switching between them while maintaining their data state (if any) is easy. First, assuming we'll give all of our colorbox links the classname "colorboxLink", we also need this in the docReady:
$(".colorboxLink").colorbox({
inline:true
});
And in a hidden div, set up all the colorboxes (one of which is your form):
<div style="display:none">
<form id="login" method="post">
Username: <input type="text" name="username" /> <br>
Password: <input type="password" name="password" />
<input type="submit" value="Go" />
</form>
<div id="error">
Error message.<br>
<a class="colorboxLink" href="#login">« Back</a>
</div>
</div>
So, the first colorbox window would open with a link, back/forward/other windows can be opened by links inside the colorboxes (as demonstrated in the "error" div), and to open colorboxes in a function:
$.colorbox({
open:true,
href: "#error",
inline:true
});
You will also be able to avoid that flicker when changing windows because the colorbox is never fully closed.
Check out a complete example at this jsfiddle.