We Keep Coding

In Html why does clicking on regular button within form action the form

I have a webpage with three buttons, two of the buttons action the form submitting data to the server, it then sends back the appropriate page.
The third button is meant to just open a new webpage in a new tab, the current page does not need to be reloaded so this button is just a button element with some onclick() code, its is not part of an input element
The trouble is that when I click on the third button it actions the form action the form even though its not an input type, why does it do this ?
<main>
<form action="/license.process" name="process" id="process" method="post">
<label>
Please enter your license information as provided in your license email
</label>
<table>
<tr>
<td><label title="Email">Email</label></td><td><input type="text" name="licenseEmail" value="paultaylor#jthink.net" class="licenseinputfield"></td>
</tr>
<tr>
<td>
<label title="License Key 1">
License Key 1
</label>
</td>
<td>
<input type="text" name="licenseKey1" value="50302c02147f23ed809a8f2579338121a2b1594f967bb18" class="licenseinputfield">
</td>
</tr>
<tr>
<td>
<label title="License Key 2">
License Key 2
</label>
</td>
<td>
<input type="text" name="licenseKey2" value="0ff02146cd1777d7e0890e659b10218761869212d7b0d60" class="licenseinputfield">
</td>
</tr>
</table>
<input type="submit" name="cancel" value="Cancel">
<input type="submit" name="save" value="Save">
<button onclick="window.open('http://www.jthink.net/songkong/buy.jsp','_blank');">
Get License
</button>
</form>
</main>
I can make it work properly by moving this third button outside of the form. But then I get formatting problem because button is shown on next line, regardless I want to understand why having the butto within the form triggers the form.

The default type of a <button> is submit.
If you want it to be type=button then you have to say so explicitly.

You need to add the type="button" attribute to prevent the form from being submitted.
I'm not entirely sure why but came across this last week.

web2py How to add id to submit_button

In my html file, I'm adding two forms, each with their own submit_button. I have a text input in one of the forms and want to make it required to be not blank but it doesn't seem to work...
userQueryForm = SQLFORM.factory(
Field('userQuery', label='', requires=IS_NOT_EMPTY() ),
submit_button = T('Generate Report')
)
The html that gets rendered is as follows
<td class="w2p_fw">
<input class="string" id="no_table_userQuery" name="userQuery" type="text" value="">
</td>
...
<tr id="submit_record__row">
<td class="w2p_fl"></td>
<td class="w2p_fw">
<input type="submit" value="Generate Report" class="btn">
</td>
</tr>
I want my <input> to have an id so i can access it in Jquery...
My ultimate goal is to not allow the form to be subitted if the text

You can access the submit button server-side DOM element via userQueryForm.custom.submit, so to add an id attribute:
userQueryForm.custom.submit.update(_id='submit_button')
Alternatively, there are other methods to access the submit button via jQuery rather than relying on an id. For example:
jQuery('input[value="Generate Report"]')

ng-disabled behaving strangely

I'm running into an odd issue while trying to set ng-disabled on my 'Save' button in the code below. I want my input field to be required and to be a non-negative number. This code works great as structured, but when I remove that second form below my table ng-disabled no longer works. Why does ng-disabled depend on this completely unnecessary additional form which I purely added for temporary testing purposes?
<div>
<table>
<tr>
<td><p>Limit</p></td>
<td><p>1,000,000</p></td>
<form class="form-inline" name="form">
<td>
<div class="form-group">
<input type="text" ng-pattern="/^[0-9][0-9]*$/" class="form-control" ng-if="limit.saveAllowed" ng-model="limit.user.points"
ng-required="true"></input>
</div>
<p ng-if="!limit.saveAllowed">{{limit.user.points}}</p>
</td>
<td ng-if="limit.saveAllowed">
<div class="form-group">
<button class="btn btn-success" type="submit" ng-click='limit.setLimit(limit.user.points)' ng-disabled="form.$invalid">Save</button>
</div>
</td>
</form>
</tr>
</table>
<form class="form-inline" name="form">
<input type="text" ng-model="limit.user.points"
ng-required="true"></input>
</form>
</div>
Note: I am using the controllerAs syntax so limit refers to my controller. Further, this HTML all resides within a custom directive's template. I don't know if that additional info is helpful, but I'm stumped.

Forms can not be nested directly inside a <tr>(see this).
Simply wrap the form with a <td> (or just move it outside the <table>) and things should work.

how can I see the url output of submitted form?

there is a website and I want to create the link address that can automate the login process.
from the login page source code, I understood that it will submit the id, passwd values with post method in form.
but I want to know the entire 'url' address which this form submission leads to. I mean, eventually it will pass on the id, passwd values like in 'somewebpage?id=someid&passwd=somepw' right? (of course it will be processed with encodeURIComponent by the form)
this parameter included url address is what I'm looking for because I think if I know this, then I can automate the login process.
However, this address is not explicitly shown(not even for a brief moment). Is there a trick to somehow 'alert()' this url address or view it through chrome developer tools or something?
here's the login page example by the way:
<form id="login" name="login" class="login" method="post"
action="" enctype="application/x-www-form-urlencoded"
style="background-image: url(../main/image/index.gif)">
<input type="hidden" name="url" value="../main/index.cgi" />
<table class="login-form">
<tr>
<td>
<table>
<tr>
<td class="label"><label for="login_id">ID</label></td>
<td class="input">
<input type="text" id="login_id" name="id" value="" onclick="select();" maxlength="8"/>
</td>
</tr>
<tr>
<td class="label"><label for="login_passwd">Passwd</label></td>
<td class="input">
<input type="password" id="login_passwd" name="passwd" value="" onclick="select();" maxlength="8"/>
</td>
</tr>
</table>
</td>
<td>
<input type="submit" id="login_submit" value="Go" />
</td>
</tr>
<tr>
</tr>
</table>
</form>

You should be able to see the POST url in firebug net panel.

Form action attribute defines where the form will be submitted.
<form action="demo_form.asp" method="get">
The current form you have will submit to it self, meaning the current url the form is now on.
You can see the page properties from chrome developer tools network tab.

When there is no url in action the page, the form will post to itself. So all you would need to do is post the username and password to this page using the name of the input. On the server side, the username and password will be checked against the DB. To automate the post process look at the function here: https://stackoverflow.com/a/133997/3402205

form tag inside a table ? HTML 5

I want to ask you guys how i can put a form method "Get" in a table. In my table i have got a text field and when i submit this form it will check for validation. My validation works fine but this form doest actually submit it as i don't aget any values at the URL.
<form method="GET" id="my_form">
<table>
<tr>
<td>
<input type="submit" name="submit" id="submit" value="submit" onclick="return submitvalidation();" form="contactusform">
</td>
</tr>
</table>
</form>

Your submit button belongs to a different form.
Remove
form="contactusform"