Pre-filling search query's. POST Http - google-chrome

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.

Related

Current input value does not get passed to event handler in AngularJS

<tr ng-repeat="item in groups">
<td hidden><input type="hidden" value="{{item.id_group}}" /></td>
<td><input type="text" value="{{item.description}}" class="form-control" /></td>
<td>
Edit |
Delete
</td>
</tr>
So this code was supposed to show values in a table and when the user changes anything in the description and click on Edit, it should POST the new value to the server. Instead it's posting the old value, I need some help please to identify why this is happening.
Try using Ng-model
<tr ng-repeat="item in groups track by $index">
<td hidden><input type="hidden" ng-model="groups[$index].id_group" /></td>
<td><input type="text" ng-model="groups[$index].description" class="form-control" /></td>
<td>
Edit |
Delete
</td>
</tr>

Proper way to post a new form in each row of a table?

I have a page where there is a table. In each row of the table, there is data about an online grocery delivery order. At the end of each row, there is a submit button about action to be performed on the order and the form ends there. A new form begins with the next row <tr>
Where exactly should I put the <form> and </form> tags? Should I put the <form> before each <tr> and </form> after the </tr> or should I introduce them in the first data cell <td> of each row and close in the last <td>?
I mean, the page would probably function all right in both ways, but what is "proper" way of doing this? Right now mozilla code view is showing the table tag in red color.
This is how it looks right now.
And this is the relevant part of the php code I am using to dynamically generate a new form for each table row. I am posting this just for the sake of reference, because this does not matter at all here. My question is basic HTML based, not php based.
for($i=0;$i<$count;++$i){
$res.='<form action="" method="post">' ."\n" .'<input type="hidden" name="orderid" value="' .$orders[$i]->idcode .'" />';
$res.="$nt<tr><td align=\"center\">" .$orders[$i]->display("pe","</td><td align=\"center\">") ."</td>$nt\t<td align=\"center\"><select name=\"agent\">$alistcode</select></td>$nt\t<td align=\"center\"><select name=\"vendor\">$vlistcode</select></td>";
$res.="$nt\t<td align=\"center\"><input type=\"submit\" value=\"PROCESS\" /></td>\n</tr>\n</form>\n";
}
$res.="</table>";
echo $res;
HTML5 offers decent solution for your problem. And its name is form attribute. Just put the form into last <td> and refer to its id from other inputs. See example.
<table>
<tr>
<td>
<input type="text" name="inp1" form="form1" />
</td> <!-- ^^^^ ^^^^^ -->
<td>
<form id="form1" method="get" action="/">
<!-- ^^ ^^^^^ -->
<input type="submit" name="submit1" value="submit" />
</form>
</td>
</tr>
<tr>
<td>
<input type="text" name="inp2" form="form2" />
</td>
<td>
<form id="form2" method="get" action="/"><input type="submit" name="submit2" value="submit" /></form>
</td>
</tr>
</table>
If using javascript is an option, you can work without <form> tags?
I used jQuery in this example, data is posted to itself (first argument of $.post()).
Table
<table>
<tbody>
<tr>
<td><input name="inputfield[]" type="text" value="input1" /></td>
<td><select name="selectfield[]">
<option selected value="select1-option1">select1-option1</option>
<option value="select1-option2">select1-option2</option>
<option value="select1-option3">select1-option3</option>
</select></td>
<td><a class="submit">Update</a></td>
</tr>
<tr>
<td><input name="inputfield[]" type="text" value="input2" /></td>
<td><select name="selectfield[]">
<option selected value="select2-option1">select2-option1</option>
<option value="select2-option2">select2-option2</option>
<option value="select2-option3">select2-option3</option>
</select></td>
<td><a class="submit">Update</a></td>
</tr>
<tr>
<td><input name="inputfield[]" type="text" value="input3" /></td>
<td><select name="selectfield[]">
<option selected value="select3-option1">select3-option1</option>
<option value="select3-option2">select3-option2</option>
<option value="select3-option3">select3-option3</option>
</select></td>
<td><a class="submit">Update</a></td>
</tr>
</tbody>
</table>
Script
$(".submit").on("click", function(){
var row = $(this).parents("tr");
$.post("", row.find("input, select, radio").serialize(), function(data){ console.log(data); });
});
JSFiddle

How to Click on checkboxes one by one in Groovy/Geb?

I was working on an automation script using Groovy/Geb and the HTML code looks like the tags below:
<table class="backgrid">
<thead>
<tr>
<th class="select-all-header-cell">
<input tabindex="-1" type="checkbox">
</th>
<th>
<a>
List Item<b class="sort-caret"></b>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="select-row-cell">
<input tabindex="-1" type="checkbox">
</td><td class="string-cell">CAD</td>
</tr>
<tr>
<td class="select-row-cell">
<input tabindex="-1" type="checkbox">
</td>
<td class="string-cell">
USD
</td>
</tr>
<tr>
<td class="select-row-cell">
<input tabindex="-1" type="checkbox">
</td>
<td class="string-cell">.
GBP
</td>
</tr>
<tr>
<td class="select-row-cell">
<input tabindex="-1" type="checkbox">
</td>
<td class="string-cell">
KPW
</td>
</tr>
</tbody>
</table>
I need to click on the checkboxes inside the one by one and then move to the next stage of the automation. But I am stuck here. I know for clicking checkboxes I should work with interact {} but I can't find any sample example for this kind of stuff. Any kind of hints or suggestions would be a great help for me!
You don't need to use interact {} to achieve it - there is a much easier way using click().
To click the checkbox in header you can use:
$("table.backgrid thead input").click()
To click on the currency checkboxes use:
def checkboxes = $("table.backgrid tbody input")
checkboxes[0].click() //CAD
checkboxes[2].click() //GBP
Quoting the docs
[...] Calling value(value) will set the current value of all elements in the Navigator. The argument can be of any type and will be coerced to a String if necessary. The exceptions are that when setting a checkbox value the method expects a boolean...
So, I didn't try this myself, but I think that if you can change your html to something like this (note that I added a name attribute to the element)
[...]
<td class="select-row-cell">
<input tabindex="-1" type="checkbox" name="GBP">
</td>
<td class="string-cell">.
GBP
</td>
[...]
Then the next code should do the trick:
$("checkbox", name: "GBP").value(true) //Should set the checkbox to 'checked'

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: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?

I can best describe this as follows:
I want this (entire table in editmode and save button in every row).
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
<td> </td>
</tr>
<tr>
<td><input type="hidden" name="id" value="1" /></td>
<td><input type="text" name="name" value="Name" /></td>
<td><input type="text" name="description" value="Description" /></td>
<td><input type="submit" value="Save" /></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="2" /></td>
<td><input type="text" name="name" value="Name2" /></td>
<td><input type="text" name="description" value="Description2" /></td>
<td><input type="submit" value="Save" /></td>
</tr>
<!-- and more rows here ... -->
</table>
Where should I put the <form> tags?
It's worth mentioning that this is possible in HTML5, using the "form" attribute for input elements:
<table>
<tr>
<td>Id</td>
<td>Name</td>
<td>Description</td>
<td> </td>
</tr>
<tr>
<td><form id="form1"><input type="hidden" name="id" value="1" /></form></td>
<td><input form="form1" type="text" name="name" value="Name" /></td>
<td><input form="form1" type="text" name="description" value="Description" /></td>
<td><input form="form1" type="submit" value="Save" /></td>
</tr>
<tr>
<td><form id="form2"><input type="hidden" name="id" value="1" /></form></td>
<td><input form="form2" type="text" name="name" value="Name" /></td>
<td><input form="form2" type="text" name="description" value="Description" /></td>
<td><input form="form2" type="submit" value="Save" /></td>
</tr>
</table>
While clean in its lack of JS and use of original elements, unfortunately this isn't working in IE10.
I had a similar question and this answer in question HTML: table of forms? solved it for me. (Not sure if it is XHTML, but it works in an HTML5 browser.)
You can use css to give table layout to other elements.
.table { display: table; }
.table>* { display: table-row; }
.table>*>* { display: table-cell; }
Then you use the following valid html.
<div class="table">
<form>
<div>snake<input type="hidden" name="cartitem" value="55"></div>
<div><input name="count" value="4" /></div>
</form>
</div>
You can't. Your only option is to divide this into multiple tables and put the form tag outside of it. You could end up nesting your tables, but this is not recommended:
<table>
<tr><td><form>
<table><tr><td>id</td><td>name</td>...</tr></table>
</form></td></tr>
</table>
I would remove the tables entirely and replace it with styled html elements like divs and spans.
I wrote the below over ten years ago, when the world was a different place. These days I know of many ways to crack this particular nut, but a quick and dirty solution that will validate is to do much the same but use CSS tables for layout, not a regular HTML table.
I'd say you can, although it doesn't validate and Firefox will re-arrange the code (so what you see in 'View generated source' when using Web Developer may well surprise). I'm no expert, but putting
<form action="someexecpage.php" method="post">
just ahead of the
<tr>
and then using
</tr></form>
at the end of the row certainly gives the functionality (tested in Firefox, Chrome and IE7-9). Working for me, even if the number of validation errors it produced was a new personal best/worst! No problems seen as a consequence, and I have a fairly heavily styled table. I guess you may have a dynamically produced table, as I do, which is why parsing the table rows is a bit non-obvious for us mortals. So basically, open the form at the beginning of the row and close it just after the end of the row.
The answer of #wmantly is basicly 'the same' as I would go for at this moment.
Don't use <form> tags at all and prevent 'inappropiate' tag nesting.
Use javascript (in this case jQuery) to do the posting of the data, mostly you will do it with javascript, because only one row had to be updated and feedback must be given without refreshing the whole page (if refreshing the whole page, it's no use to go through all these trobules to only post a single row).
I attach a click handler to a 'update' anchor at each row, that will trigger the collection and 'submit' of the fields on the same row. With an optional data-action attribute on the anchor tag the target url of the POST can be specified.
Example html
<table>
<tbody>
<tr>
<td><input type="hidden" name="id" value="row1"/><input name="textfield" type="text" value="input1" /></td>
<td><select name="selectfield">
<option selected value="select1-option1">select1-option1</option>
<option value="select1-option2">select1-option2</option>
<option value="select1-option3">select1-option3</option>
</select></td>
<td><a class="submit" href="#" data-action="/exampleurl">Update</a></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="row2"/><input name="textfield" type="text" value="input2" /></td>
<td><select name="selectfield">
<option selected value="select2-option1">select2-option1</option>
<option value="select2-option2">select2-option2</option>
<option value="select2-option3">select2-option3</option>
</select></td>
<td><a class="submit" href="#" data-action="/different-url">Update</a></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="row3"/><input name="textfield" type="text" value="input3" /></td>
<td><select name="selectfield">
<option selected value="select3-option1">select3-option1</option>
<option value="select3-option2">select3-option2</option>
<option value="select3-option3">select3-option3</option>
</select></td>
<td><a class="submit" href="#">Update</a></td>
</tr>
</tbody>
</table>
Example script
$(document).ready(function(){
$(".submit").on("click", function(event){
event.preventDefault();
var url = ($(this).data("action") === "undefined" ? "/" : $(this).data("action"));
var row = $(this).parents("tr").first();
var data = row.find("input, select, radio").serialize();
$.post(url, data, function(result){ console.log(result); });
});
});
A JSFIddle
You just have to put the <form ... > tag before the <table> tag and the </form> at the end.
Hopte it helps.
In fact I have the problem with a form on each row of a table, with javascript (actually jquery) :
like Lothre1 said, "some browsers in the process of rendering will close form tag right after the declaration leaving inputs outside of the element"
which makes my input fields OUTSIDE the form, therefore I can't access the children of my form through the DOM with JAVASCRIPT..
typically, the following JQUERY code won't work :
$('#id_form :input').each(function(){/*action*/});
// this is supposed to select all inputS
// within the form that has an id ='id_form'
BUT the above exemple doesn't work with the rendered HTML :
<table>
<form id="id_form"></form>
<tr id="tr_id">
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</table>
I'm still looking for a clean solution (though using the TR 'id' parameter to walk the DOM would fix this specific problem)
dirty solution would be (for jquery):
$('#tr_id :input').each(function(){/*action*/});
// this will select all the inputS
// fields within the TR with the id='tr_id'
the above exemple will work, but it's not really "clean", because it refers to the TR instead of the FORM, AND it requires AJAX ...
EDIT : complete process with jquery/ajax would be :
//init data string
// the dummy init value (1=1)is just here
// to avoid dealing with trailing &
// and should not be implemented
// (though it works)
var data_str = '1=1';
// for each input in the TR
$('#tr_id :input').each(function(){
//retrieve field name and value from the DOM
var field = $(this).attr('name');
var value = $(this).val();
//iterate the string to pass the datas
// so in the end it will render s/g like
// "1=1&field1_name=value1&field2_name=value2"...
data_str += '&' + field + '=' + value;
});
//Sendind fields datawith ajax
// to be treated
$.ajax({
type:"POST",
url: "target_for_the_form_treatment",
data:data_string,
success:function(msg){
/*actions on success of the request*/
});
});
this way, the "target_for_the_form_treatment" should receive POST data as if a form was sent to him (appart from the post[1] = 1, but to implement this solution i would recommand dealing with the trailing '&' of the data_str instead).
still I don't like this solution, but I'm forced to use TABLE structure because of the dataTables jquery plugin...
Im late to the party, but this worked great for me and the code should explain itself;
<script type="text/javascript">
function formAJAX(btn){
var $form = $(btn).closest('[action]');
var str = $form.find('[name]').serialize();
$.post($form.attr('action'), str, function(data){
//do stuff
});
}
<script>
HTML:
<tr action="scriptURL.php">
<td>
Field 1:<input type="text" name="field1"/>
</td>
<td>
Field 2:<input type="text" name="field2" />
</td>
<td><button type="button" onclick="formAJAX(this)">Update</button></td>
</tr>
If you try to add a form warping a tr element like this
<table>
<form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</form>
</table>
some browsers in the process of rendering will close form tag right after the declaration leaving inputs outside of the element
something like this
<table>
<form></form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</table>
This issue is still valid for warping multiple table cells
As stereoscott said above, nesting tables are a possible solution which is not recommended.
Avoid using tables.
<table >
<thead >
<tr>
<th>No</th><th>ID</th><th>Name</th><th>Ip</th><th>Save</th>
</tr>
</thead>
<tbody id="table_data">
<tr>
<td>
<form method="POST" autocomplete="off" id="myForm_207" action="save.php">
<input type="hidden" name="pvm" value="207">
<input type="hidden" name="customer_records_id" value="2">
<input type="hidden" name="name_207" id="name_207" value="BURÇİN MERYEM ONUK">
<input type="hidden" name="ip_207" id="ip_207" value="89.19.24.118">
</form>
1
</td>
<td>
207
</td>
<td>
<input type="text" id="nameg_207" value="BURÇİN MERYEM ONUK">
</td>
<td>
<input type="text" id="ipg_207" value="89.19.24.118">
</td>
<td>
<button type="button" name="Kaydet_207" class="searchButton" onclick="postData('myForm_207','207')">SAVE</button>
</td>
</tr>
<tr>
<td>
<form method="POST" autocomplete="off" id="myForm_209" action="save.php">
<input type="hidden" name="pvm" value="209">
<input type="hidden" name="customer_records_id" value="2">
<input type="hidden" name="name_209" id="name_209" value="BALA BAŞAK KAN">
<input type="hidden" name="ip_209" id="ip_209" value="217.17.159.22">
</form>
2
</td>
<td>
209
</td>
<td>
<input type="text" id="nameg_209" value="BALA BAŞAK KAN">
</td>
<td>
<input type="text" id="ipg_209" value="217.17.159.22">
</td>
<td>
<button type="button" name="Kaydet_209" class="searchButton" onclick="postData('myForm_209','209')">SAVE</button>
</td>
</tr>
</tbody>
</table>
<script>
function postData(formId,keyy){
//alert(document.getElementById(formId).length);
//alert(document.getElementById('name_'+keyy).value);
document.getElementById('name_'+keyy).value=document.getElementById('nameg_'+keyy).value;
document.getElementById('ip_'+keyy).value=document.getElementById('ipg_'+keyy).value;
//alert(document.getElementById('name_'+keyy).value);
document.getElementById(formId).submit();
}
</script>