GET request through a window click with paramters - javascript

I am new to HTML. I have got an URL in the following format:
dosomething?param1=abc&param2-xyz
This URL is guaranteed to be valid.
How I have got an HTML page with a button on that. What I want to do is to send a GET request to the URL by clicking the button.
I have tried this:
<form method="GET" action="dosomething?param1=abc&param2-xyz">
<button>DO Something</button>
</form>
The problem is that the parameters are missing on the server side.
What is the proper way to do this? I cannot make an Ajax call on this as it will be a file downloading action and people told me that it won't work with Ajax.
Javascript solution is OK for me.
Please help.

You dont need Javascript for this as you can simply form your request like
<form method="GET" action="dosomething">
<input type="hidden" name="param1" value="abc">
<input type="hidden" name="param2-xyz" value="">
<input type="submit" value="DO Something">
</form>
see http://www.w3schools.com/html/html_forms.asp
Of course you could also use Javascript, you might want to look into using JQuery with http://api.jquery.com/jQuery.get/
see also HTTP GET request in JavaScript?
Furthermore, out of interest, what did "people" tell you about "Ajax won't work"?

The GET paramaters are passed by the input tag. This is a proper way :
<form method="GET" action="dosomething.php">
<input type="text" name="customparam" />
<input type="hidden" name="param1" value="value1" />
<input type="hidden" name="param2" value="value2" />
<input type="submit" />
</form>
When you will click on the submit button, you will be on dosomething.php?customparam=whatiwrote&param1=value1&param2=value2
On your page "dosomething.php", you can access these params with that :
<?php
$customparam = $_GET['customparam'];
$param1= $_GET['param1'];
$param2= $_GET['param2'];
echo "The value of param1 is : ".$param1;
?>
If the params don't move, you can also put them in a link directly with :
<a href="dosomething.php?param1=value1&param2=value2" >My link </a>

Related

Javascript - how to automatically post a form

I have a form that I would like to submit automatically on page load however it is submitting a blank form.
This is the manual code, when I click submit either yes or no is posted without a problem.
<form method="post">
<label>Do You Authorize <?php echo $this->escapeHtml($this->clientId) ?>?</label><br />
<input type="submit" name="authorized" value="yes">
<input type="submit" name="authorized" value="no">
</form>
This is the automated code:
<body onload="document.getElementById('myForm').submit();">
<form method="post" id="myForm">
<label>Do You Authorize <?php echo $this->escapeHtml($this->clientId) ?>?</label><br />
<input type="submit" name="authorized" value="yes">
</form>
The automated code is submitting perfectly, however when I dump the $_POST variable, it is empty.
Any ideas why?
Try changing your <input type="submit"> to a <input type="hidden">. It may be that because no one is actually clicking the submit button, the value isn't getting passed.

javascript redirect isnt working

I have a form that takes a users input and redirects to a the window to a URL with their input appended to the end.
Here is my HTML
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" value="Search" onclick="searchWiki();" />
</form>
The javascript it runs
function searchWiki() {
alert("Form Works!");
var siteQuery = $('#query-string').val();
window.location.href = "http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery;
alert("SECOND MESSAGE");
}
The issue is that it does not redirect. It only appends the 'siteQuery' variable to the end of the current URL. I know its calling the javascript because I see both alerts. I'm not sure what I'm doing wrong here.
There reason is because you using type="submit", which submits and sends an GET header to the default action parameter (current page).
Change the type="submit" to type="button".
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="button" value="Search" onclick="searchWiki();" />
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
function searchWiki() {
alert("Form Works!");
var siteQuery = $('#query-string').val();
alert(siteQuery);
window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);
alert("SECOND MESSAGE");
}
</script>
I tried the code with type="submit" and it's alerting, but not redirecting, because the submit is prioritized before the window.location change, thats the reason it just appends a ?queryString=value to the current url.
If you change the type like showed in the code above, it's working perfectly.
The issue is due to the fact that you're actually submitting your form, and the redirection is lost as the form submission occurs first. There are two easy ways to fix this:
Change the type of the input from submit to button, OR
Stop the submission of the form by returning false from your function and changing the call of the function to onclick="return searchWiki();"
jsFiddle example (1)
jsFiddle example (2)
Can't you just use assign?
window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);
Check out: http://www.w3schools.com/js/js_window_location.asp
Use default action and method attributes instead
The HTML form element provides the mechanism for doing this out of the box.
<form id="wikiForm" action="http://wiki.voipinnovations.com/dosearchsite.action" method="GET">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" value="Search" />
</form>
But, if you must use javascript, make this change:
From:
window.location.href = "…";
To:
window.location.assign("…"); // or
window.location = "…"
This is because location.href is a read-only property and location.assign() is the proper method for setting the new location to be loaded. You may also directly assign a string to the location object:
Whenever a new value is assigned to the location object, a document
will be loaded using the URL as if location.assign() had been called
with the modified URL.
Source: MDN
Change input type=submit to type=button
http://plnkr.co/edit/w4U7Sbm3XSKN8j3zUFMe?p=preview
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="button" value="Search" onclick="searchWiki();" />
</form>

PHP - Pagination: $_POST or $_GET

I'm developing a search system(multiple filters) that uses pagination with php.
At first i was using the method POST with the main form. But, using POST i was unable to keep the pagination. Reason: when the user search by name, for example, as he clicks in the next pages the query get lost and return to the first page.
To fix this i use GET method instead.
But using GET, the url gets the parameters. And the users don't want that.
Example:
http://mysearch.com/search.php?name=joe&id=1
I just want to be
http://mysearch.com/search.php
I tried this workaround:
if(typeof window.history.pushState == 'function') {
window.history.pushState({}, "Hide", "http://mysearch.com/search.php");
}
But when i hit the "Previous Page/Back" in the browser, the URL with the parameters come back either.
Is there a solution for this? Use GET or POST with pagination and the parameters does not shows in the URL?
You can paginate with $_POST just as easily as with $_GET and without SESSION variables/cookies, you just need to pass the pagination variables as hidden values in your HTML form.
eg - for two buttons, one of which takes you to previous page, and one to next:
//prev button
<form action="paginate.php" method="post">
<input type="hidden" name="prev" value="0"/>
<input type="submit" value="Go to previous page"/>
</form>
//next button
<form action="paginate.php" method="post">
<input type="hidden" name="next" value="2"/>
<input type="submit" value="Go to next page"/>
</form>
//search form
<form action="paginate.php" method="post">
<input type="hidden" name="prev" value="0"/>
<input type="hidden" name="next" value="2"/>
<input type="text" name="search" value="User input goes here"/>
<input type="submit" value="Search the database"/>
</form>
The disadvantage is that POST will give 'page expired' errors when using the browser back button (but not the HTML buttons), which is not great. For that reason I'd prefer $_GET, and also because you can bookmark $_GET queries, but not $_POST.

Dynamic links with JavaScript

this is my problem.I have a JSP. I want to create a hyperlink dynamically with Javascript. I want to add the text from an input in HTML and use it to pass it as a parameter in my URL:
<form name="test">
<P>Enter search: <input type="text" name="searchName"><BR><BR>
<input type="Button" Value="" onclick="location.href='search.jsp?typeOfSearch=" + JavaScriptFunction( that returns the String from searchName ) ' " >
</P>
</FORM>
I cant seem to add a JS function to the "onclick" string. I ve tried with HREF from an anchor but I cant make it work. And I ve also tried just putting a JS function like this:
<a href="MyJSfunction( that returns the entire URL ) " > hyperlink</a>
and also it does not work. I ve tried like a million diferent things and I still cant pass dynamic parameters from one JSP to another.
Any help would be very good! ...
No JavaScript required. Just set your form method and action, use a submit button, and rename your input field:
<form name="test" method="GET" action="search.jsp">
<p>
Enter search: <input type="text" name="typeOfSearch" /><br/><br/>
<input type="Submit" Value="Go" />
</p>
</form>
Edit: But, if you are just curious how to do it with JavaScript, form elements all have a form property. Form elements are accessible from the form by name. So, you can use this.form.searchName.value to get the value of the searchName field in the same form as your button:
<input type="Button" Value=""
onclick="location.href='search.jsp?typeOfSearch=' + this.form.searchName.value;" />
Edit: The trouble you are having with your current code may be because you have the quotes wrong. Change the double quote at the end of typeOfSearch=" to a single quote: typeOfSearch='. Remove the single quote following your function call:
<input type="Button" value=""
onclick="location.href='search.jsp?typeOfSearch=' + JavaScriptFunction()" />
If you aren't too concerned about security, a simple HTML form should work.
<form action="Your URL Here">
<input type="text" value="" name="search" />
<input type="submit" value="search" />
</form>
http://jsfiddle.net/harveyramer/VfuT4/

How can I fill the action parameter of a form with values from the form's input?

I know I can pass query parameters from a form and expect them in the query string:
<form method="GET">
<input type="text" name="param" value="value" />
<input type="submit" value="submit" />
</form>
This results in
http://blah-blah-blah/blah?param=value
However, in my webapp, I'm using path parameters. To access a single book, #459, in the library, you'd visit
/books/459
and to check one out, POST to
/books/459/checkout
where 459 is a path parameter. When I try
<form action="/books/{book_id}">...</form>
it takes me to
/books/%7Bbook_id%7D
rather than
/books/459
Do I need javascript or something to build the URI?
Thanks to RobG
I have used the same thing in calling WhatsApp from mobile application
It works beautifully
<form action="https://wa.me/"
onsubmit="this.action = this.action + this.mobile.value; this.submit();">
<input type="tel" name="mobile" size="10" value="91xxxxxxxxxx"/>
<input type="text" name="text" value="Thanks Vijayan!" />
<input type="submit" value="WhatsApp" />
</form>
You may need something like:
<form onsubmit="this.action = this.action + this.book_id.value;" ...>
However, making the action dependent on scripting is poor design. It is much more robust for your server to deal with the URI ...?book_id=value, which does not require any client script at all.
If you are generating your HTML with PHP, the code below should work (untested).
$book_id = 459;
<form action="/books/{$book_id}">...</form>
Alternatively, you could dynamically modify the html using JavaScript. It is better not to do it this way because some users may disable JavaScript. (untested)
$('form').attr('action','/books/' + book_id);

Categories

Resources