html search form, how do i reduce the URL - html

I am creating a search for using the GET method at the moment, the problem is even if values are not selected and left at there default value they are sent and visible in the url.
I want to only have values selected in the url rather than every current value of the form, including default of 0.
the url ends up long and nasty:
search.php?search_shop_name=mcdonalds&search_shop_address=&search_total_rating=0&search_shop_comfort=0&search_shop_service=2&search_shop_ambience=0&search_shop_friendliness=0&search_shop_spacious=0&search_shop_experience=0&submit=#legend_total_results
I basically want to tidy up the url, am not actually sure if removing unwanted data is a good process or not, any possible advice on this situation? not sure if am being OCD with the visuals
Thanks

I would do the following. Using JavaScript or jQuery, create a submit function, in that function do a validate search with all fields if they = null then don't include them.
For e.g
var search;
function search(){
if(input[name=search].val() != null)
{
search = "q="+input[name=search].val();
}
if(input[name=search_shop_experience].val() != null)
{
search += "search_shop_experience="+input[name=ssearch_shop_experience].val();
}
}
I think you do .= or its += .

Related

To implement tags in textarea

This is a bit vague question, so I am making a chat application where on typing # the users of the group pops up, the user has to select from these people., just like WhatsApp.
Now the problem is the user can also do a backspace and delete the 1 character from name. Unlike WhatsApp is the # is used to tag someone in the group and even a single backspace is made the whole text got deleted.
I am using Angular in the front end
I hope you get the picture of what I am trying to convey, any leads in right direction would be appreciated.
You need to bind (keydown) on the input element and also FormControl directive to follow the changes via a FormGroup.
<input (keydown)="handleKeyDown($event)" [formControl]="formGroup.controls['input']" />
Then you can implement function where you watch the backspace and its context in the input field.
...
formGroup = this._formBuilder.group({
input: ''
});
handleKeyDown(event){
if(event.keyCode == 46){
console.log('Delete Key Pressed');
if(event.target.selectionStart == event.target.selectionEnd && event.target.selectionStart == this.formGroup.get('input').value.length-1){
//delete until #
let lastIndex:number = this.formGroup.get('input').value.lastIndexOf('#');
if(lastIndex != -1){
this.formGroup.get('input').setValue(this.formGroup.get('input').value.substr(0, lastIndex));
}
}
}
}
Or something like this... I did not test the code.

enter term into hidden form field with html and css possible?

I have created a form in HTML/CSS on my website.
Now, my idea is to give out links that would contain some string (basically like an affiliate link) and would like that string to be entered in a hidden form field to be submitted, or somehow else, have that string in the submitted data.
is there an easy way to do this?
There are two ways of approaching this, both of which use a GET variable in the link you distribute.
First off, let's assume that--for example's purpose--your special string is abc123. You would then distribute a link that follows the form http://example.com/my/form/?affiliate=abc123.
Assuming that, here are two solutions, one in PHP and another in Javascript.
PHP Solution
This one is fairly easy, as long as you're just setting a hidden field.
<input type='hidden' name='affiliate' value='<?= htmlspecialchars($_GET['affiliate'], ENT_QUOTES, 'UTF-8'); ?>' />
Update: Added htmlspecialchars() call to escape any input, to prevent security issues with users setting the GET variable manually.
Javascript Solution
HTML
<input type='hidden' id='affiliate-input' name='affiliate' />
Javascript
This solution relies on jQuery. If you want a pure JS solution, let me know.
var $_GET = {};
// When the page loads, set the input value
$(document).ready(function(){
setupGetVariables();
var affiliateId = $_GET["affiliate"];
$("#affiliate-input").val(affiliateId);
});
function setupGetVariables()
{
if(document.location.toString().indexOf('?') !== -1) {
var query = document.location
.toString()
// get the query string
.replace(/^.*?\?/, '')
// and remove any existing hash string (thanks, #vrijdenker)
.replace(/#.*$/, '')
.split('&');
for(var i=0, l=query.length; i<l; i++) {
var aux = decodeURIComponent(query[i]).split('=');
$_GET[aux[0]] = aux[1];
}
}
}
The setupGetVariables() method was helped by this answer.

Wikimedia function to get all my Templates

I need to get all the pages I have created like Templates in my wikimedia webpage. I have to do this with javascript.
Is this possible?
You can do this with a UserContribs API query, like this:
https://en.wikipedia.org/w/api.php?format=jsonfm&action=query&list=usercontribs&ucuser=Ilmari_Karonen&ucnamespace=10&ucshow=new&continue=
Basically, the parameters you need are:
format=json to get results in JSON format, which is probably what you want for JavaScript. (I've used jsonfm in the example link above to get pretty-printed human readable output.)
action=query to indicate that this is, indeed, a query rather than, say, an edit or a login attempt.
list=usercontribs to indicate that you want a list of a user's contributions (i.e. the stuff you see on the Special:Contributions page).
ucuser=your_username to select which user's contributions you want to see. (The example link above shows mine.)
ucnamespace=10 to select only contributions to templates. (10 is the namespace number for the built-in Template namespace).
ucshow=new to select only contributions that involve creating a new page. (Note that this also includes page moves; I don't see any simple way to filter those out.)
Of course, there are other parameters you may also want to include.
I've also included an empty continue= parameter to indicate that I want to use the new query continuation syntax, and to suppress the warning about it. Obviously, if you actually want to use query continuation, you'll need to implement the client-side part yourself (or use an MW API client that implements it for you). Here's one simplistic way to do that:
function getNewTemplatesForUser( username ) {
var queryURL = 'https://en.wikipedia.org/w/api.php?format=json&action=query&list=usercontribs&ucnamespace=10&ucshow=new';
queryURL += '&ucuser=' + encodeURIComponent( username );
var callback = function( json ) {
// TODO: actually process the results here
if ( json.continue ) {
var continueURL = queryURL;
for ( var attr in json.continue ) {
continueURL += '&' + attr + '=' + encodeURIComponent( json.continue[attr] );
}
doAjaxRequest( continueURL, callback );
}
};
doAjaxRequest( queryURL + '&continue=', callback );
}

Google Captcha code plugin's parameters not available when in form enctype

I have used Google captcha code and it works well. The form has no enctype too. I wanted to upload images within the same form element. Then an enctype="multipart/form-data" was added to the form's attribute. I faced the following problems and I use JSP servlets:
1.
String challenge = request.getParameter("recaptcha_challenge_field");
String uresponse = request.getParameter("recaptcha_response_field");
here challenge and uresponse gave null values and therefore
ReCaptchaResponse reCaptchaResponse = reCaptcha.checkAnswer(remote, challenge, uresponse);
gave null pointer exceptions.
Edit : I found it later that when enctype="multipart/form-datain form tag is used, parameters and its value cannot be retrieved as request.getParameter('') in Servlet.
2. Then I tried to get values for above parameters (challenge and uresponse) through the FileItem as following
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List items = null;
items = upload.parseRequest(request);
Iterator itr = items.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
if (item.isFormField()) {
String name = item.getFieldName();
System.out.println("name: " + name);
String value = item.getString();
System.out.println("value: " + value); // closing scopes ....
These outputs gave no print results for 'recaptcha_challenge_field' and 'recaptcha_response_field'. But other parameters and values of HTML input elements are available. What I observed is, when the form enctype is removed, servlets can have those parameters ('recaptcha_challenge_field' and 'recaptcha_response_field') and its values. When only form enctype is added, parameters not available in servlets.(request.getParameter('recaptha challenge parameter or recaptha-response-field parameter')).
Edit I checked whether the browser sends those parameters(recaptha-challenge ane recaptha-response-field.) with their values and found that browser sends all parameters well. The problem might be in servlet and getting parameters and values inside the FileItem
I want to upload images with this Google captcha code (for human verifications). My current implementation does not work. Does anyone let me know how to implement this?
The reason is in the html itself. When a input type-file is empty(user hasn't not select a file from the local pc),it is difficult or (cannot be done) to retrieve parameter names and their values (in servelt) of those all below html elements' names in my scenario as mentioned in my problem.

Sending values through links

Here is the situation: I have 2 pages.
What I want is to have a number of text links(<a href="">) on page 1 all directing to page 2, but I want each link to send a different value.
On page 2 I want to show that value like this:
Hello you clicked {value}
Another point to take into account is that I can't use any php in this situation, just html.
Can you use any scripting? Something like Javascript. If you can, then pass the values along in the query string (just add a "?ValueName=Value") to the end of your links. Then on the target page retrieve the query string value. The following site shows how to parse it out: Parsing the Query String.
Here's the Javascript code you would need:
var qs = new Querystring();
var v1 = qs.get("ValueName")
From there you should be able to work with the passed value.
Javascript can get it. Say, you're trying to get the querystring value from this url: http://foo.com/default.html?foo=bar
var tabvalue = getQueryVariable("foo");
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++)
{
var pair = vars[i].split("=");
if (pair[0] == variable)
{
return pair[1];
}
}
}
** Not 100% certain if my JS code here is correct, as I didn't test it.
You might be able to accomplish this using HTML Anchors.
http://www.w3schools.com/HTML/html_links.asp
Append your data to the HREF tag of your links ad use javascript on second page to parse the URL and display wathever you want
http://java-programming.suite101.com/article.cfm/how_to_get_url_parts_in_javascript
It's not clean, but it should work.
Use document.location.search and split()
http://www.example.com/example.html?argument=value
var queryString = document.location.search();
var parts = queryString.split('=');
document.write(parts[0]); // The argument name
document.write(parts[1]); // The value
Hope it helps
Well this is pretty basic with javascript, but if you want more of this and more advanced stuff you should really look into php for instance. Using php it's easy to get variables from one page to another, here's an example:
the url:
localhost/index.php?myvar=Hello World
You can then access myvar in index.php using this bit of code:
$myvar =$_GET['myvar'];
Ok thanks for all your replies, i'll take a look if i can find a way to use the scripts.
It's really annoying since i have to work around a CMS, because in the CMS, all pages are created with a Wysiwyg editor which tend to filter out unrecognized tags/scripts.
Edit: Ok it seems that the damn wysiwyg editor only recognizes html tags... (as expected)
Using php
<?
$passthis = "See you on the other side";
echo '<form action="whereyouwantittogo.php" target="_blank" method="post">'.
'<input type="text" name="passthis1" value="'.
$passthis .' " /> '.
'<button type="Submit" value="Submit" >Submit</button>'.
'</form>';
?>
The script for the page you would like to pass the info to:
<?
$thispassed = $_POST['passthis1'];
echo '<textarea>'. $thispassed .'</textarea>';
echo $thispassed;
?>
Use this two codes on seperate pages with the latter at whereyouwantittogo.php and you should be in business.