What is fired first : submit or ng-click? - html

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.

Related

HTML 1 input text for different forms/methods

I am wanting to send POST/GET requests to one of my .jsps. I thought about using 2 buttons but only 1 input text as the action for the 2 buttons is actually the same and only the mehod differs. Right now I only have 1 <form> with the input text as well as the button.
<form action="systemDetail.jsp" method="GET">
<input type="text" id="get" name="paramName" /> <input type="submit"
value="Submit GET" />
</form>
Preferably I would now like to have a second button which uses POST method for the exact same call. I am fairly new to this subject all together.
My questions:
Is what I want even possible or should I use 2 input boxes as well as 2 buttons?
How can I realize it if its possible?
Please note that I do not want to use PHP, JavaScript or anything else. Only HTML and JSP/JSTL are okay
you can use this method for submitting in both methods
<form action="systemDetail.jsp" method="get">
<input type="text" id="get" name="paramName" />
<button type="submit">Submit</button>
<button type="submit" formmethod="post">Submit using POST</button>
</form>

Two forms on one page causes wrong validation

I have one page with two separate forms. Most input fields are required. When I click the submit button on the second form, it asks me to fill out the required fields in the first form.
How do I make sure that it only validates the form in which I clicked the submit button?
<form method="post" action="index.php" name="orderQuick" id="orderQuick">
<input type="text" name="street" id="street" required>
<button type="submit" name="submitBtn" id="submitBtn">Submit</button>
</form>
<form method="post" action="index.php" name="order" id="order">
<input type="text" name="street2" id="street2" required>
<button type="submit" name="submitBtn2" id="submitBtn2">Submit</button>
</form>
I think it is because you have not closed <button> tag so it is considering both input type in one form. Close <button> tag.I think it will solve your issue.
I think you will need to use the jqueryvalidation plugin: (http://jqueryvalidation.org/valid/)
Using this plugin, on the click of the respective submit buttons, you just need to call the method:
$("#orderQuick").valid();
and
$("#order").valid();
This should solve your issue.

Html submit value based on which button is clicked

Is it possible to submit hidden name value pair based on which button is clicked?
Here's my form:
<form action="POST" action="">
<button>
<input type="hidden" name="vote" value="up"/>
vote up!
</button>
<button>
<input type="hidden" name="vote" value="down"/>
vote down
</button>
</form>
For some reason, the name value pair I received was always the latter (the first one got replaced). For example a user clicked on 'vote down', I still get $input['vote'] = up
Does anyone know how to fix this?
Normally to work with multiple submit buttons, you would just give each button a name and value:
<form action="post" action="">
<button type="submit" name="vote" value="up">vote up!</button>
<button type="submit" name="vote" value="down">vote down!</button>
</form>
Only one button can be submitted, so only one of these values will be sent. At the receiving end, the script neither knows nor cares what type of input you used, so it will see the result you want.
Edit: I added type="submit" for completeness, though that should be unnecessary.
This is because you put both of them in the form so the parameters received by server will look like
vote=up&vote=down
Assume that you access it using php associative array you will always received the latest value in the entries having the same key. That aside, why not just
<form action="POST" action="">
<button>
<input type="hidden" name="vote" value="up"/>
vote up!
</button>
</form>
<form action="POST" action="">
<button>
<input type="hidden" name="vote" value="down"/>
vote down
</button>
</form>

How can I make an html button that passes a parameter?

I want a html button with parameter functionality.
new/?sorting=desc is the url that it should link to. But when I try, the parameter is not passed. How should it be done? I tried both the methods below but none worked.
<FORM METHOD="GET" ACTION="./?sorting=desc">
<INPUT TYPE="submit" VALUE="Äldst först">
</FORM>
I want buttons that behave like these links:
Äldst först
Nyast först
If you want something to act as a link, then you should use a link.
That said:
When you submit a GET form, the query string is removed from the action and a new one is generated from the data in the form.
You need to store the data in hidden inputs.
<form action="/social/tracking/new/">
<input type="hidden"
name="sorting"
value="desc">
<input type="submit"
value="Nyast först">
</form>
<form action="/social/tracking/new/">
<input type="hidden"
name="sorting"
value="asc">
<input type="submit"
value="Sort the other way">
</form>
If you are using jQuery, you can use the code below.
This will fill a hidden input with the correct value when you click on one of the submit buttons.
<form method="get" action="./">
<input type="hidden" name="sorting" id="sorting" value="" />
<input type="submit" value="Äldst först" id="sort_desc" />
<input type="submit" value="Nyast först" id="sort_asc" />
</form>
<script>
$('#sort_desc').click(function(){
$('#sorting').val('desc');
});
$('#sort_asc').click(function(){
$('#sorting').val('asc');
});
</script>
I think its not possible. A form is used to send data (mostly) via POST or GET. Your goal is to open a specific URL. I would create a standard and would style it like a button. Whats the reason you want to use a button?

Html input value

A simple html question i would like to make form that shows a different value to the one that it posts.
<form action="" method="post">
<input type="submit" name="action" value="Buy"/>
</form>
for example shows a button with Buy written on it and Buy is also posted. I would like it to show Buy, but I would like it submit a differnet value.
In theory you can:
<button type="submit" name="action" value="a differnet value">Buy</button>
In practise, we have to operate on a WWW that includes Internet Explorer.
You would probably be better off encoding the data into the name attribute and checking that.
probably the easiest way to do it is to attach an event to the form submission to change the value for that input button. You could probably also put an onclick for the submit button itself.
<form action="" method="post">
<input type="submit" name="action" value="Buy" onclick="this.value='some value';"/>
</form>
The button within form is only for checking if the form is submitted or not. You don't need to get the value of the button. Simply write html code:
<form action="smth.php" method="post">
<input type="submit" name="action" value="Buy"/>
</form>
And smth.php will look like that
if(isset($_GET['action']))
{
...
do smth
...
}