form doesnt fires submit when i press enter - html

I have a little question... I dont know whats happening but submit event is working because when I click "ingresar" submit button, it sends all the data.
But when I press enter nothing happens.
I think the problem is that i have the form inside of a table....
Am I wrong? I think the problem is here because,as I said, when i press Ingresar submit button it sends the data.
Thx for your help! :)
<form id="forma-recurso" method="POST">
<table >
<tr>
<td><p>Nombre recurso:</p></td>
<td><input type="text" class="campo nombre-recurso" maxlength="50"></td>
</tr>
<tr>
<td><p>Dirección:</p></td>
<td><input type="text" class="campo direccion-recurso" maxlength="50"></td>
</tr>
<tr>
<td><p>Descripción:</p></td>
<td><input type="text" class="campo descripcion-recurso" maxlength="100"></td>
</tr>
<tr>
<td><p>Tipo de punto de interés:</p></td>
<td><select type="text" class="campo tipo-pto-interes">
<?php
$conexion=pg_connect("host= localhost port=5432 dbname=EmergenciesResponse user=postgres password=asdf");
$registros=pg_query("select tipo_pto, tipo_pto_interes from tipos_ptos_interes where tipo_pto_interes BETWEEN 1 AND 4");
while ($reg=pg_fetch_array($registros))
{
echo "<option value=\"$reg[tipo_pto_interes]\">$reg[tipo_pto]</option><br>";
}
pg_close($conexion);
?>
</select></td>
</tr>
<tr>
<td><p>Latitud/longitud</p></td>
<td><input type="text" class="latlng" disabled></td>
</tr>
<tr>
<td class="salida-btn"><button class="btn-salir">Salir</button></td>
<td class="ingreso-boton"> <input type="submit" class="ingresar-recurso"value="Ingresar"></td>
</tr>
</table>
</form>

Your HTML code seems to be okay, so there must be something in your browser or in the PHP code: the "enter submit" doesn't work when the submit button is not present in the form, otherwise, it should work.

You can see if it is working using inspector tool, press f12 to open it in your browser, change to networking tab, and try to click on submit button if something happens its ok.
I notice that in your form you are not using action form atribute, try it like this example: http://www.w3schools.com/html/html_forms.asp

Related

Pre-filling search query's. POST Http

I'm trying to understand how to use query strings in URL's and trying to make some shortcuts to make my job easier. From what I've been reading here and there there are ways to pre-program a website using query parameters. I went to the website I'm interested and pulled the "search form" part that I would like to pre-fill (this is a database search, I would like to have a direct link that just pre-populates and just shows the results of the search instead of me filling it each time I look for new data).
This is from the website's "inspect source". the part of it:
<form id="partInquiry" name="partInquiry" action="PartInquiryForEdit.htm" method="post">
<table style="width: 40%">
<tr>
<td colspan="2" align="left"></td>
</tr>
<tr class="ez1">
<td class="label">Search By:
</td>
<td class="input"><select id="searchby" name="search">
<option value="part_number">Part Number</option><option value="part_description">Part Description</option><option value="rdo_gpl">RDO/GPL</option><option value="rdo_productCd">RDO/Product Code</option>
</select></td>
</tr>
<tr class="ez1">
<td class="label">Match By:
</td>
<td class="input"><select id="matchby" name="match">
<option value="matches">Exactly Matches</option><option value="contains">Contains</option><option value="startsWith">Starts With</option><option value="endsWith">Ends With</option>
</select></td>
</tr>
<tr class="ez1">
<td class="label">Search For:
</td>
<td class="input"><input id="searchfor" name="searchString" type="text" value="" maxlength="750"/> </td>
</tr>
<tr class="ez1">
<td colspan="2"><input type="submit" onclick="clearSession();"
value="Submit"
class="Button" /> <input type="submit"
value="Cancel"
class="Button" /></td>
</tr>
</table>
<BR>
<BR>
<table>
<tr>
<td><label class="errorBox" id="errorBox"></label>
<table>
<tr>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
</tr>
</table> <input type="hidden" id="rowsToAdd" name="rowsToAdd" /> <input
type="hidden" id="rowsToRemove" name="rowsToRemove" /> <input
type="hidden" id="rowsToSubmit" name="rowsToSubmit" /> <input
type="hidden" id="isExport" name="isExport" />
<table>
<tr>
<td></td>
</tr>
</table> </td>
<td></td>
</tr>
</table>
<BR>
<BR>
</form>
I tried the following to no avail and I dont know how else to do it:
?search=part_description&searchby=part_description&matchby=contains&match=contains&searchfor=MYSEARCHSTRING&searchString=MYSEARCHSTRING&Submit
?search=part_description&match=matches&searchString=MYSEARCHSTRING&Submit&submit
?searchby=part_description&matchby=matches&searchfor=MYSEARCHSTRING
I'm not sure I'm understanding how to do this or if maybe there's somewhere in the code where It disables this (and how would I find it?). As shown, I tried using the "names" but nothing, I also tried using the "id"s but nothign either. Also I dont know how to actually "submit" the search since the submit button has no id or name. only an "onclick" and a "value".
Pre-populating a form via the query string is something that the website must explicitly support, it's not a general feature. The website must be coded to accept values on the query string and then return the appropriate HTML to pre-select those values.
If the website does not support this, then what you can do as an alternative is create a bookmarklet that populates the fields you want. For example:
javascript:var id=document.getElementById.bind(document);id('searchby').value='part_description';id('matchby').value='matches';id('searchfor')='MYSEARCHSTRING';void 0;
After you've loaded the site, you can click the bookmark to pre-fill the form.

HTML - Issue with form submission

Issue with submitting form, I don't see anything wrong with the form section.
This is an example of my code, The ticket number and user ID is being pushed into from MYSQL. When it gets to the server side after submitting, I am getting only 2 of 21 items. The readonly is only on the top 2 items, the rest is entered by end user.
<form action="<?php echo $NAV_includes_Research_Upload; ?>" method="POST">
<table class="Table_Center">
<tr>
<td>Ticket number:</td>
<td><input type="text" id="ticket" class="all" value="<?php echo "1"; ?>" readonly></td>
</tr>
<tr>
<td>User ID:</td>
<td><input type="text" id="user" class="all" value="<?php echo "test"; ?>" readonly>
</tr>
<tr>
<td>Site:</td>
<td><input type="url" id="website" class="all" autofocus required <?php if ($testing === 'ON') {echo 'value="http://www.google.com"';}?>></td>
</tr>
</table>
<table class="Table_Center">
<tr>
<td><input type="reset" value="Reset"></td>
<td><input type="submit" class="f_right" value="Submit"></td>
</tr>
</table>
</form>
Thank you, it was the name section that was missing.
I will have to remember that.
In your form code, I am unable to find name attribute of input fields. In an HTML form Post, values entered by the user and submitted are called by the name attribute.

Why can't I submit my form with WWW::Mechanize::Firefox in Perl?

I have an HTML this is part of the form I'm working on
<form action="/goform/FormUpdateVAP" autocomplete="off" name="myform" id="formid" method="POST">
<table>
<tbody>
<tr>
<td align="right"><span class="label">Name:</span></td>
<td><input id="essid" name="essid" value="X" type="text"></td>
</tr>
<tr>
<td align="right"><input id="broadcast_essid" name="broadcast_essid" value="any" checked="" type="checkbox"></td>
<td><span class="label">Broadcast name:</span></td>
</tr>
</tbody>
</table>
<!-- BEGIN RIGHT COLUMN -->
<table>
<tbody><tr>
<td>
<input name="authentication" id="authentication" value="any" onclick="Update();" type="checkbox"><span class="label"><b>authentication</b></span>
</td>
<td>
<input onclick="Update();" name="wp" id="wp" value="any" type="checkbox"><span class="label"><b>Wp</b></span>
<select id="8021x_mode" name="8021x_mode" onchange="Update();"><option value="wpa">WPA</option>
<option value="wep">WEP</option>
</select>
</td>
</tr>
<tr>
<td height="26">
<input onclick="Update();" name="w_p" id="w_p" value="any" type="checkbox"><span class="label"><b>Wp</b></span>
<select id="8021x_mode" name="8021x_mode" onchange="Update();"><option value="wpa">WPA</option>
<option value="wep">WEP</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="cancel" name="cancel" value="Cancel" onclick="window.location.href = '/fg/list.asp';" type="button">
</td>
<td>
<input id="add-2" name="add" value="Save" type="submit">
</td>
</tr>
</tbody>
</table>
I'm trying to submit it filling the Name and the Broadcast name. And checking the 8021x_mode and the wp checkboxes. If I tick 8021x_mode and set the fields the form submits just fine. But when I try ticking wp it doesn't submit. I got no error messages.
Here's my code so far:
use WWW::Mechanize::Firefox;
use Crypt::SSLeay;
use URI::Fetch;
use HTML::TagParser;
$ENV{PERL_LWP_SSL_VERIFY_HOSTNAME}=0; #not verifying certificate
my $url = 'https://';
$url = $url.#ARGV[0];
my $mech = WWW::Mechanize::Firefox->new;
$mech->get($url);
$mech->form_id('formid');
$mech->tick( '8021x_mode','any');
$mech->tick( 'wp','any'); --after I add this the form doesn't submit
my $name = #ARGV[1];
$mech->set_fields(
'vap_name' => $name,
'essid' => $name,
);
$mech->click_button( id => 'add-2' );
$mech->reload();
add-2 is the submit button. Any idea why is not working? If you need more information please let me now. Any help will be highly appreciated.
The problem is that the html doesn't contains the choice any for 8021x_mode.
I get this error :
No elements found for Checkbox with name '8021x_mode' and value 'any'
at test.pl line 24.
To check the form, I recommend you the mech-dump utility (installed with WWW::Mechanize)
$ mech-dump --forms http://domain.tld/path_to_forms
POST /goform/FormUpdateVAP [myform]
essid=X (text)
broadcast_essid=<UNDEF> (checkbox) [*<UNDEF>/off|any]
authentication=<UNDEF> (checkbox) [*<UNDEF>/off|any/authentication]
wp=<UNDEF> (checkbox) [*<UNDEF>/off|any/Wp]
8021x_mode=wpa (option) [*wpa/WPA|wep/WEP]
w_p=<UNDEF> (checkbox) [*<UNDEF>/off|any/Wp]
8021x_mode=wpa (option) [*wpa/WPA|wep/WEP]
cancel=Cancel (button)
add=Save (submit)
As you can see, there's no any choice...
Maybe the javascript there is doing some things that we don't know.
A workaround is to use LiveHttpHeaders Firefox addon to catch the forms POSTed to /goform/FormUpdateVAP and then instead of ticking, do a POST request with WWW::Mechanize.

HTML tabindex problem

I am stuck with a tabindex problem here. As you can see in the HTML mock up, I have four buttons namely "Add", "Subtract", "Save" and "Close". When user Hits the Tab key, the flow starts correctly from Add-> Subtract-> Save-> Close, but after Close if user hits the Tab key again, the focus goes to the TD TAG with comment "Jumping Here". What I want it to do is to go to Add button instead. I tried giving all Buttons a tabindex of 1, 2, 3, 4 then I tried giving every button an index of 1 and rest of the places as -1 but that didnt solve the problem either. How do I solve this issue?
http://jsfiddle.net/t3ch/aNxjy/
Pretty sure this is not possible. Just because you have a form with tabindex values, it doesn't mean those are the only elements that will receive focus. Even browser components, like the address bar, will receive focus at some point. The browser will use the tabindex you specify, but after that tabbing will cycle through everything else.
I don't like this idea but a way you could achieve this is registering an onblur event for the Close Button, then set the focus to what ever control you wanted...
This does work....
function resetFocusIndex(){
var obj = document.getElementsByName('addIt');
if(obj[0])
obj[0].focus();
}
<INPUT TYPE="button" tabindex = "1" VALUE="Close" NAME="closeIt" onblur="resetFocusIndex()">
UPDATE
<html>
<head>
<script>
function resetFocusIndex(){
var obj = document.getElementsByName('addIt');
if(obj){
obj[0].focus();
}
}
</script>
</head>
<body>
<TABLE WIDTH=95%>
<TR>
<TD><INPUT TYPE="button" tabindex = "1" id="test2" VALUE="Add" NAME="addIt"></TD>
<TD><INPUT TYPE="button" tabindex = "1" VALUE="Subtract" NAME="minusIt"></TD>
<TD> </TD>
</TR>
</TABLE>
<DIV>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1">
<TD> </TD>
<TD>First</TD>
<TD>Second</TD>
<TD>Third</TD>
<TD>Fourth</TD>
<TR>
<!-- Jumping Here --> <TD><INPUT TYPE="radio" NAME="selected" tabindex = "-1" VALUE=""></TD>
<TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled></TD>
<TD ></TD>
<TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled> </TD>
<TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled> </TD>
<INPUT TYPE="hidden" NAME="" VALUE="">
<INPUT TYPE="hidden" NAME="" VALUE=""></TD>
</TR>
</TABLE>
</DIV>
<TABLE>
<TR>
<TD>Click Here!</TD>
</TR>
<TR><TD> </TD></TR>
<TR>
<TD>
<INPUT TYPE="button" tabindex = "1" VALUE="Save" NAME="saveIt">
<INPUT TYPE="button" tabindex = "1" VALUE="Close" id="test" NAME="closeIt" onblur="resetFocusIndex()">
</TD>
</TR>
</TABLE>
</body>
</html>
Don't do this it's an awful idea.
Have focusable items (eg input) preceding the first and following the last button in tab order. Hide them (eg by positioning them off the side of the page with position: absolute; left: -1000px;). When they get a focus event, move focus to the button at the other end of the tab order.
Don't do this it's an awful idea. Really.
First you need 'id's for the buttons, that's always good.
Then you need to set two handlers; one on the last to tab to first, and one on the first button to shif+tab to the last.
See this: http://jsfiddle.net/aNxjy/11/.
I used jquery, but you can accomplish this with regular js as well. Just that you'll have to do cross-browser compatibility.
Further to gmcalab's answer instead of getElementsByName you could use getElementById
var obj = document.getElementById('test2');
if(obj){
obj.focus();
}
or possibly:
var obj = document.getElementById('test2');
if(obj){
obj.select();
}

Auto submitting to cfm

I've created a form that posts to a cfm file. When running a script onLoad that fills in the form values and tries to submit...The site takes me back to the login screen.
<script>
function f()
{
document.getElementById("email").value = "asdf#asdf.com";
document.getElementById("password").value = "asdf";
document.getElementById("form1").submit();
}
</script>
Please help!
update:
Here is the code....When the values for email and password are filled ini manually and the enter button is pressed it will direct me to the home page. However, when writing a script that submits the form onload, it redirects me to the login page.
<form action="https://www.asdf.com/dev/mem/login/login.cfm" method="post" id="caring" name="login" style="margin: 0px; padding: 0px;">
<input name="page" type="hidden" id="page" value="https://www.asdf.com/dev/mem/home/home.cfm">
<table>
<tr>
<td rowspan="2" class="title"></td>
<td class="label"><label for="email"></label></td>
<td class="element"><input name="email" id="email" value ="asdf#asdf.com" /></td>
<script>
//<td rowspan="2" class="action"><input type="submit" name="login" value="submit" alt="go" title="go" /></td>
</script>
</tr>
<tr>
<td class="label"><label for="username"></label></td>
<td class="element"><input name="password" value = "asdf" id="password" /></td>
</tr>
<td rowspan="2" class="action"><input type="submit" name="login" value="enter" alt="go" title="go" /></td>
<tr>
<td></td>
<td colspan="2"> </td>
<td> </td>
</tr>
</table>
</form>
It's hard to tell without the HTML of the form itself, but my guess would be that the action="" attribute of your form is blank. If that attribute is blank, the browser will post the form back to the same page.
Since you're using coldfusion, check to see if there is code generating your action="" value, and look for bugs in it if so. It may help to view the rendered HTML source of the page.
Make sure you aren't using a <cflocation> (or some other redirect) on your destination cfm page that could be redirecting the user back to the form page.
(It would help if you would post your full code)
Make sure to set the action. Here's the code:
<script type="text/javascript">
function f() {
document.getElementById("email").value="asdf#asdf.com";
document.getElementById("password").value="asdf";
document.getElementById('caring').action=document.getElementById("page").value;
document.getElementById('caring').submit();
}
</script>
And of course add the onload attribute to your body tag:
<body onload="f();">
There's a couple of other things to fix in your code. Check it with Total Validator. It's a great tool that will make you a better coder.