I have a word game as a web-page made in html, css and js.
User input his name in input form.
User presses "ready" button after playing.
Program sends the information about the session to the server.
Server saves this information in a file.
The information saves correctly, but after user presses "ready" button web page updates.
Is it possible to send the information to the server without updating the web-page?
<form method="GET" action="../cgi-bin/game.py">
<input type="submit" value = "Ready!" id="readyBut">
<input type="hidden" name="op" value="save"></input>
</form>
Yes it is possible with AJAX. Check out jQuery's $.ajax() method.
Specifically, if you want to send a GET request, you can also use the get() method.
Here's how it should look on the client side:
<form>
<input type="submit" value = "Ready!" id="readyBut">
<input type="hidden" name="op" value="save"></input>
</form>
<script>
$("readyButton").click(function(){
$.get("../cgi-bin/game.py",function(data,status){ // use whatever url is relevant
console.log(data); // data is whatever your python script returns.
});
});
</script>
Although if you want to send data to the script, I'd highly recommend using the $.post() method.
Related
One can figure out from a webpage the parameters used for a POST request, e.g.
How to view the address of the POST request made when an HTML button is clicked?
Is this possible for POST method to enter the url with parameters in the address bar or maybe from the debugger console?
For get request, one inserts a ? between address and parameters, e.g.
https://www.w3schools.com/action_page.php?fname=Albert&lname=Einstein.
(The analog post form calls the same script.)
Here is my javascript solution.
E.g. the form on http://vizier.u-strasbg.fr/viz-bin/VizieR
requires post.
The following command can be run in the debugger console. It manipulates one input field.
form=document.getElementsByName("form0")[0]; form.isource.value="Gaia";
form.target="_blank"; form.submit()
The url is already inherited from form.action.
Sure it is possible for POST method to pass parameters in the address.
Set up a form to POST with an action /foo?bar=bat and the server will get POST form parameters and the query string parameters.
It would be trivial to create the action dynamically so that the query string in the action contains the form parameters. For example - here the when the form is submitted the POST data is appended to the query string before the form is posted via ajax. So you get the post parameters both in the URL and in the body data.
html
<!DOCTYPE html>
<html>
<body>
<form action="/something">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
js
$("form").submit(function(e) {
e.preventDefault();
let f = $(e.currentTarget);
$.ajax({
type: "POST",
url: `${f.attr("action")}?${f.serialize()}`,
data: f.serialize(),
success: function() {
//success message maybe...
}
});
});
That said this is probably not a good idea at all.
It's not possible.
The POST params can be passed only via the request body.
You can use some kind of API client tool such as Postman, Paw or just use plain curl.
In many sites, I have seen after clicking on "Sign Up" or "Register" button we are either re-directed to other page where the insertion of our data in database takes place. Like in Facebook, when you click "Sign Up" it goes to the facebook.com/r.php page. I want to create a registration form which when submitted, will be not re-directed but will validate and insert data in database in the same page.
For example, Facebook uses a form such as:
<form id="xyZ" name="abc" method="post" action="r.php">
It redirects us from index.php to r.php.
But I want to use:
<form id="xyZ" name="abc" method="post" action="index.php">
i.e Without redirecting.
Which one is safe?
Redirecting does not effect the security of the website at all in the slightest. I recommend taking a look here about possible authentication solutions you can use for your site.
Whether you authenticate and log them in/register them using index.php or r.php, it doesn't matter in the slightest. Forum systems such as phpbb used to at one time to everything in the index.php file, and depending on the ?page $_GET variable, it would display different things (Like a login form, or a registration form). How you handle it, is entirely up to you, but neither method is more insecure than the others.
Both are safe!
Redirect method, kind of link using which user redirects to another page where they can register
Ajax Method, here you can make calls using Javascript / jQuery which returns you html source, which you can just plug in appropriate place.
Your Page where you need your registration form to be displayed, when user click on sign up link
<div id="ajax-response"></div>
<a id="signup" href="signup.php">SignUp</a>
<script type="text/javascript">
jQuery("#signup").on('click', function(e){
e.preventDefault();
var _context = this;
jQuery.ajax({
url: jQuery(_context).attr('href'),
success: function(response){
jQuery("#ajax-response").html(response);
}
})
})
</script>
and signup.php, will contain the registration form
<form>
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit" />
</form>
This is the simple HTML page with a text box and a search button
<!DOCTYPE html>
<html>
<body>
<input type="text" name="queryString"><br>
<button type="button" name="searchButton">Search</button>
</body>
</html>
Initially, the above HTML page is served by a bottle server (I am going to omit the code), and then I wish to process the search queryString using:
#route('/', method = 'GET')
def processSearch():
queryString = request.forms.get("queryString")
print 'queryString is:', keyword
return 'processSearch() executed'
My question is: without a Javascript onclick listener function (which would make an AJAX call), is it possible to click on the search button and fire a GET request which starts executing processSearch()?
Note: I am aware POST is ideal for form data submission, but I am still interested to know if this will work.
Put it in a form, and change the button to a submit input:
<form action="yourscript.py" method="get">
<input type="text" name="queryString"><br>
<input type="submit" name="searchButton" value="Search">
</form>
For example, the website https://talky.io/ has a form on its homepage. When you enter text into the form and hit the button, you're taken to a page that's https://talky.io/[your text]. How do you do this? What's the best way to do it?
Thank you!
You can use onSubmit and change the action attribute of the form via javascript, then return true. The code could look like this:
HTML from linked page:
<form id="createRoom">
<input id="sessionInput" placeholder="Name the conversation" autofocus="autofocus">
<button type="submit">Let’s go!</button>
</form>
Js code:
document.getElementById("crateRoom").onsubmit = function(){
var url = encodeURIComponent(document.getElementById("sessionInput").value);
document.getElementById("crateRoom").action = "/" + url;
return true;
}
It is server-side script job. You can look at some MVC framework and the url parameters
You can use GET method of form;for example:
<form action="index.php" method="get">
Page: <input type="text" name="page">
<input type="submit" value="Submit">
</form>
that after submit will go to index.php?page=yourEnteredPage.
You can use PHP symfony or codeignitor, if you use .net then create a new MVC project.
But if you only need to change urls like
www.mysite.com/mypage.php?something=value
to
www.mysite.com/value
You can do a mod rewrite in apache or if you're using .net then use RegisterRoutes in your global.asax.cs
Using a form you can submit data to a location/url that was given in the action attribute of the for, for example
<form method="POST" action="http://example.com">
<input name="first_name" type="text" value="" />
<!-- Form elements -->
<input type="submit" name="mySubmitButton" value="Submit">
</form>
This form will submit the form data to the given action url when submit will be pressed and on the derver data could be retrieve using
$first_name = $_POST['first_name';];
and so on. The method POST is used to submit the form in the post array so you can retrieve data using $_POST['formfieldname'] and if you use method="GET" then you can get submitted data from $_GET variable, like, $fname=$_GET['first_name']. GET has limitation of amount when submitting data (safe to use up to 2000 characters IE's limit) and is visible to address bar of the browser and not being used for login (password) and POST can send more data than GET and also not visible to address bar.
You may read this.
Fairly possible with URL Rewriting
http://en.wikipedia.org/wiki/Rewrite_engine
I am trying to submit a form using get method but I dont want the form to refresh or rather when it reloads I want to maintain the data. There seems to be lot of questions on similar lines but none that I tried helped. I am posting my code here:
<script type="text/javascript">
function formSubmit()
{
document.getElementById('form1').submit();
return false;
}
</script>
<form id = "form1" method = "GET">
<br> Query: <input name="query" id="query" type="text" size="50" value="">
<input type="button" name="search" value="Get News" onclick = "formSubmit()">
</form>
I am using python on the server side.
Thanks
The statement:
I am trying to submit a form using get method but I dont want the form to
refresh or rather when it reloads I want to maintain the data.
Implies to me that your end goal requires AJAX or at least some passing of data to the server and back. You will not be able to retain scope within Javascript over a page refresh without the use of something like cookies or passing data to/from the server. Having said that these are more akin to secondary storage mechanisms while you want to retain scope (or primary storage). To do this I would recommend AJAX.