Make form redirect users after posting - javascript

I need to change a form so that instead of reloading the page after submitting it, it redirects the user to another page.
This is the form I'm talking about:
<form class="questionform" name="questionform-0" id="questionform-0">
<textarea class="question-box" cols="12" rows="5" id="question-box-' . $questionformid . '" name="title" type="text" maxlength="200" size="28"></textarea>
<input type="text" class="ubicacion" value="" name="question">
<input type="button" name="ask" value="Publicar" onclick="askquestion('questionform-0'); window.location.reload(true);">
I want to remove window.location.reload and change it for something that redirects users to the page their comment will appear.
The problem is that it's not simply a static. So I have no idea how to do it. The URL I want to send users to is:
www.chusmix.com/s?=(content of the second field)
How do I do it? Anyway thanks for any info or whatever that points me on the right direction. Thanks

There is no need to use javascript for this purpose. You only need to set the action attribute of the form tag. It tells where the form information will be sent. So in your case it will be:
<form action="http://www.chusmix.com/s">
Also if you want to send the variables through the URL like: http://www.chusmix.com/s?variable=someValue
You need to set the method attribute as get so it will look like this:
<form action="http://www.chusmix.com/s" method="get">
If you don't want the data sent to be visible set the method to post, note that there are different advantages for each method so i recommend you read more about this if this form is an vital part of your webpage.
The variable names that appear in the url http://domain.com?**variable**= will depend on the inputs name <input type="text" name="**variable**" />
For more information on how forms work you can go to:
http://www.w3schools.com/TAGS/tag_form.asp
http://www.tizag.com/phpT/forms.php

You can ad an action:
<form action="redirection_url.php" method="POST" class="questionform" name="questionform-0" id="questionform-0">
I think you can use both absolute and relative url. Also note that I've added
method="POST" - which defines how the data from the form will be sent, as you already send some data with GET method (that's the stuff after ? in your url) - so this should work pretty well.

If you cannot use the action attribute in the <form> tag, you may redirect the user using window.location (you will probably want to do this inside the askquestion method, not in the onclick attribute).
window.location = "http://www.chusmix.com/s?=" + inputValue;

Related

How to not display URI variable on redirect?

I have the following form which is used to redirect the user to search a particular date.
<form action="/datesearch/" method="get" id="goto_date_form" style="display:none;">
<input name="dt" type="text" />
<input type="hidden" name="csrfmiddlewaretoken" value="[my csrf token value]">
</form>
When this form is called with $('#goto_date_form').submit();, it does redirect the page, but it displays both the value of dt and the value of csrfmiddlewaretoken as URI variables.
i.e. when searching for 2016-07-06 it redirects to
`http://localhost:8000/datesearch/?dt=2016-07-06&csrfmiddlewaretoken=[my csrf token value]`
How can I get it to stop displaying the csrf token?
Simply change method="get" to method="post" (and also back end too)
When you use GET in a form, all the data in the form is placed in the URI. If you change your form to use POST instead, the data will be put in the request body - not visible in the URI (but still visible to the user if the user decides to view the Request details).
NOTE if you change from GET to POST, you might have to make some changes in your server side code as well, depending on the method you are using to fetch the data.
Use method="post" in form tag to prevent data passing in url

Input button value is used to append a URL

I'm looking for a boilerplate smart way to take the input value, append it to a fixed url like /search/inputboxvalue and send the user there. Is there anyway smart robust way to do it? I could use an onlick handler and a form but I wondered if there is a more elegant way to do it, pref just using javascript.
My code:
<input name="search" id="search" value="" type="text" width="650px"></input>
Try this:
var my_value = document.getElementById('search').value;
window.location.href = window.location.href + my_value
Use following statment to get value from text box and append to current url.After append it will redirect user to that url.
input_box_value = jQuery('#search').attr('value');
window.location.href = window.location.href + input_box_value
Above 2 statement can be insert on particular event.like click
This is not really correct way to form requests. This symbol "/" should tell us, that we go to subdirectory, or its analog. So, to form this type of url, you will need to use javascript.
But, there is more easy way to create this type of request. Native:
<form id="search" method="get" action="search">
<input type="text" name="q" value="" />
<button type="submit">Search</button>
</form>
This small HTML snippet will allow you to visit an url: site.com/search?q=inputboxvalue without any JS. You may even hide submit button and just use Enter to search.

PHP redirect with header

I'm not expert in PHP, and I'm trying to create public chatroom for my simple website.
I'm using SQL database to store messages.The file named chat_index.php getting all messages from database and show it to users. Also it has a simple form to send message with PHP GET method. The following is code for my form.
<form method="get" action="sendmessage.php">
<input name="msg" placeholder="Message" data-theme="a" type="text">
<button type="submit" class="ui-btn ui-corner-all">Send</button>
</form>
With above code I'm sending data to sendmessage.php file. In this file adding message to database and user redirect to chat_index.php with this code.
header("Location: chat_index.php");
exit();
After redirect page loading correctly on browser window. But URL end like this
...../sendmessage.php?msg=test_message
So if I reload the page message sending again and url getting correct like this
...../chat_index.php
How can I resolve this problem?
UPDATED
I tried with POST method. but not solved. browser showing content in chat_index.php and url ending with ../sendmessage.php
Why you are recieveing the url variables is because you are using GET. use POST instead and the variables will be gone.
example:
<form method="POST" action="sendmessage.php">
If you don't want to send data to the query string use POST instead of GET.
<form method="POST" action="sendmessage.php">
This should clearly be a POST form. Any form saving or changing anything on the server should be. Otherwise (using get) people could add messages by just following a link, which is not intended. The redirect after save is OK and good practice. Note that such redirects only work before any output is produced.
Cannot say much more by what you have posted. You should also check if your saving and redirect code is triggered correctly when message is posted.
This is what is happening, the form is being submitted from chat_index.php, so the action ends up being chat_index.php/sendmessage.php.
To solve this change the method to post as directed and change your action to /sendmessage.php
your form should look look like this
<form method="POST" action="/sendmessage.php">
....
</form
hope this help
If this is to be a simple forum site, then it would be much less complicated to not redirect at all. Just set your action attribute to "", and when someone submits the form, it will post the data back to the page. So do something like this:
<form method="post" action="">
<input name="msg" placeholder="Message" data-theme="a" type="text">
<input name="function" type="hidden" value="post_message">
<button type="submit" class="ui-btn ui-corner-all">Send</button>
</form>
Then put the php code that was in sendmessage.php into chat_index.php above the starting DOCTYPE and html tags, and delete sendmessage.php. Or alternatively, use include('sendmessage.php') in the same spot. Then when the page loads, check if $_POST['function'] == 'post_message', and if this condition is true, then execute the stuff you had in sendmessage.php. That will be much more compact, and the user will be redirected once instead of twice. Also, I don't know your file structure, but you might want to rename chat_index.php to just index.php to make it intuitive and so that people can't see inside your directory.

Prevent page reload on form submit

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.

How send a form with Javascript when input name is "submit"?

Question: How can you send a form with Javascript if one form input has the name submit?
Background: I am redirecting the user to another page with a hidden HTML form. I cannot change name on the (hidden) inputs, since the other page is on another server and the inputs need to be exactly as they are. My HTML form looks like this:
<form id="redirectForm" method="post" action="http://www.example.com/">
<input name="search" type="hidden" value="search for this" />
<input name="submit" type="hidden" value="search now" />
</form>
I use the following javascript line to send the form automatically today:
document.getElementById('redirectForm').submit();
However, since the name of one input is "submit" (it cannot be something else, or the other server won't handle the request), document.getElementById('redirectForm').submit refers to the input as it overrides the form function submit().
The error message in Firefox is: Error: document.getElementById("requestform").submit is not a function. Similar error message in Safari.
Worth noting: It's often a lot easier to just change the input name to something other than "submit". Please use the solution below only if that's really not possible.
You need to get the submit function from a different form:
document.createElement('form').submit.call(document.getElementById('redirectForm'));
If you have already another <form> tag, you can use it instead of creating another one.
Use submit() method from HTMLFormElement.prototype:
HTMLFormElement.prototype.submit.call(document.getElementById('redirectForm'));

Categories