Angular 5 simple form with Action is not working - html

The code given below is not working in my angular html file but if i use this code individually in an html file it works i don't know what i am doing wrong this is just a simple form .
<form action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
<input name='storeId' value='4950'>
<input name='amount' value='1000'>
<input name='postBackURL' value='https://easypaystg.easypaisa.com.pk/easypay/Confirm.jsf'>
<input name='orderRefNum' value='123113'>
<input name='merchantHashedReq' value='6ohsP8x3PpiaI4oNirWGwjVkyMLP4CbzcH6pZwvu9SViOzx9nLxyR/TtJhwFrxBU686Wf1z22G+TBxuo5QkSscuXp266qQWx8AbGWnLXxG79LHt+5VlD+lH2JkjKO997adwVHH6mGNm8ldtAKkRyf/E92QF5PwhWMjq8i4dlbABIjJxnwPS3x13R/Nbfmlugkz7XpX20DmZ0IhPuGBR95sOpDATIjfW51fuStCVVni4='>
<input name='autoRedirect' value='0'>
<input name='paymentMethod' value='CC_PAYMENT_METHOD'>
<input name='emailAddr' value='johndoe#live.com'>
<input name='mobileNum' value='0123455500'>
<button type="submit" class="btn btn-success" >Submit</button>
<input type='submit' value='asdasd' class="btn">
</form>

You can do it in following way:
<form #form action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
...
<button type="submit" class="btn btn-success" (click)="form.submit()">Submit</button>
...
</form>

Use the ngNoForm attribute as documented. This will prevent all "magic" Angular behavior, and you will be able to submit the form in the native way (with page reload).
So something similar to:
<form ngNoForm action='https://easypaystg.easypaisa.com.pk/easypay/Index.jsf' method='post'>
<input name='storeId' value='4950'>
...
<input type='submit' value='asdasd' class="btn">
</form>

Posting a form directly causes a page reload, that's usually not what you want in an Angular application (SPA). Grab the data from the form and send an HTTP request from your code to the server instead.
You should leverage the NgSubmit directive, as described here

Related

Sending an email using HTML form

Here is my code.
<form action="MAILTO:example#gmail.com " method="post" enctype="text/file">
A3 or A4:<br>
<input type="text" name="A3 or A4"><br>
Add image:<br>
<input type="file" name="image"><br>
<input type="button" id=" value="click">
</form>
Issue: After Clicking the submit button or in this case just the button, nothing happens. I am currently using gmail so if you could please help.
First, a button of input type="button" will not prompt the POST action. You should be using a submit button:
<input type="submit" value="click"/>
Second, form action="MAILTO: " should be form action="mailto:someone#example.com".
A simple example perhaps could provide some insights. Yet, as you mentioned Gmail usage, I suggested reading Gmail API Guides in which examples of various languages are provided.
The button should have type="submit"
<form action="mailto:" enctype="text/file" method="post">
A3 or A4:<br>
<input name="A3 or A4" type="text"><br>
Add image:<br>
<input name="image" type="file"><br>
<input type="submit" value="Send">
</form>

Form with get method no longer posting to action url

My form no longer posts to the action url. Here is the html code:
<form method="get" action="/search-results/">
<input type="text" placeholder="Search" name="q">
<input type="submit" value="Search">
</form>
Why isn't the form posting?
This HTML looks correct, so you could have some JavaScript that is preventing the default form submission.
<input type="submit" value="Search">
<input type="submit" name="submit" value="Search">
try this let me know give some code for problem you may past ...

What is fired first : submit or ng-click?

First of all, excuse me if my English is bad, that's not mother tongue.
So, I have a set up a search form that returns maximum 20 items, and if there is more than that, then the user can switch between the pages. So there would be an unknown number of pages. Here's how I do right now : (example with two pages)
<form class="searchForm" method="POST" action="~/Search/Products">
<input type="hidden" name="keyword" value="#Model.Keyword" />
<input type="hidden" name="pagenum" value="{{choosedPage}}" id="page" />
<button type="submit" ng-click="choosedPage=1" class="btn btn-primary">1</button>
<button type="submit" ng-click="choosedPage=2" class="btn btn-primary">2</button>
</form>
So, when the user clicks on the button, it changes "choosedPage" and directly fires the submit action with the page that we want. I Check that, all works fine.
But it seems pretty hacky though, what if the submit action is fired before the ng-click action ? Is it even possible ? Have you another idea that that (and other than creating 1 form per page button).
Thank you.
So, first of all, you don't really need Angular to do what you are doing. You can just assign name and value to the buttons with type="submit".
<form class="searchForm" method="POST" action="~/Search/Products">
<input type="hidden" name="keyword" value="#Model.Keyword" />
<button type="submit" name="pagenum" value="1" class="btn btn-primary">1</button>
<button type="submit" name="pagenum" value="2" class="btn btn-primary">2</button>
</form>
The Web actually existed before Angular, you know :)
But, if you need to perform some additional Angular tasks, you can use ng-submit on the form element instead of ng-click on the button:
<form ng-submit="doSomethingBeforeSubmit($event)"
method="POST" action="~/Search/Products">
...
</form>
This will invoke $scope.doSomethingBeforeSubmit before the form is submitted. $event is a special variable that you can pass to your doSomethingBeforeSubmit function.
Here's the ng-submit documentation.

HTML file input, name in the input

I'm working on an upload option, now I'm working on the lay-out of my file input. What I want to make is an input where the filename changes with the browse of the file input.
Code Now
<form action="" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label><input type="file" name="file" id="file"><br>
<input class="btn btn-success btn-block uploadform" type="submit" name="submit" value="Submit">
</form>
What I get now
https://scrshot.eu/s/4a157f9.png
What I want to get
https://scrshot.eu/s/b73c306.png
- It has to be still clickable
Does somebody has an idea how to do this?
Thanks.
I found the answer, thank you all
data-filename-placement="inside"

How to submit a form after submitting other form?

I'm working with html and jsp, and I'm trying to do a custom search that performs the same action as that of a catalog search that is on another page. I have two pages:
There is a page (outside my app, so I can't modify at all) that is a catalog search:
<form name="formulario" id="formulario" method="post" action="Main">
<input tabindex="116" size="55" id="txtSimpleSearch" name="txtSimpleSearch">
<input value="Search" type="submit" name="btnSearch" tabindex="102">
</form>
I have to create a page in my app that works as a custom search in that catalog seach. So I created this form:
<form method="post" rel="external" action="http://example.com/pages/SimpleSearch" target="_blank">
<fieldset>
<label for="txt"><span class="label">Text:</span>
<input name="txtSimpleSearch" id="txt" type="text"></label>
</fieldset>
<div>
<input class="boton" value="Search" type="submit">
</div>
</form>
The action of the second form (my page) goes to the catalog search, with the value of txt input, but it isn't do the search on the first page (the catalog search page not execute the submit of the form formulario).
Maybe I could get the form of the catalog search page and do the submit using Javascript? Or isn't possible?
Thanks.
You'll have to use the same name attributes for your input, so the page will be able to get the search value.
<form method="post" rel="external" action="http://example.com/pages/SimpleSearch" target="_blank">
<fieldset>
<label for="txt"><span class="label">Text:</span>
<input name="txtSimpleSearch" id="txt" type="text"></label>
</fieldset>
<div>
<input class="boton" value="Search" type="submit" name="btnSearch">
</div>
</form>
change input type='submit' to type='button' , add attribute to the input onclick='actionSubmitForm1()' then use javascript submit
document.forms["myform"].submit();
then submit you'rs second form
document.forms["myform2"].submit();