HTML Forms: Go to the url from the input field - php

I have a form:
<form method="post" action="/whatIwroteintotheInputfield">
<input type="text" onchange="this.form.submit();"></input>
</form>
The form is being posted after inserting a value. Now I don't just want to refresh the site, but redirecting to /whatIwroteintotheInputfield.
How can I achieve that?
Thanks for reading!

<form method="post" action="yourTextURL">
<input type="text" id="changeText" value="http://"></input>
</form>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#changeText").on('change', function() {
var url = $('#changeText').val();
window.location = url;
});
</script>
For more info, check on change() & Change URL
And, one question from my side. Why you need <form></form> then. It can be done without <form> too. So, if possible (if no need), then remove <form></form>.

Related

Ajax.serialize() request NOT WORKING

I am trying to send my form values to php page in order to perform SQL requests to my server according to my form values. This is original php with form and ajax script:
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<form enctype="multipart/form-data" method="post">
<input type="datetime-local" name="start" id="start">
<input type="datetime-local" name="finish" id="finish">
<input type="checkbox" name="consta" id="consta" value="tru"> Remove const
<input type="submit" name="apply" id="apply">
</form>
<script>
$('#apply').click(function(){
var data= $('form').serialize();
$.post('gensetapply.php', data);
});
</script>
And in gensetapply.php I am trying to get variables through $_POST:
<?php
$con=$_POST['consta'];
$str=$_POST['start'];
$fin=$_POST['finish'];
echo $con.", ".$str.", ".$fin;
?>
So, I am sure my ajax request is not working.
I am new to this things and have wrote code above looking to similar examples, so please feel welcome to point out my mistakes. There might be a typo cause I am handtyping it again here, not copy-paste from source.
EDIT:
It was working, I just couldn't see it when i refresh the page, but through devtools in Chrome (Network>Response) I. Hope it'd help some other fools like me ;)
1st : Your using post method to post the data to server so you need to prevent the default submit
<script>
$('#apply').submit(function(e){
e.preventDefault();
var data= $('form').serialize();
$.post('gensetapply.php', data);
});
</script>
2nd : or Simple change the type="submit" to type="button".
Here 'Apply 'button type is submit. Therefore your form submits immediately. As you are handling form submission through ajax so the solution is you need to stop submitting form. You can fix it returning false in click event like following
<script>
$('#apply').click(function(){
var data= $('form').serialize();
$.post('gensetapply.php', data);
return false;
});
</script>

How do I send input to url using form without Php? (form action)

I want to send this query (EA452401760IN) to https://track.aftership.com/india-post/.
After a successful submission by Form the URL will be
https://track.aftership.com/india-post/EA452401760IN
Form
<form method="POST" action="https://track.aftership.com/india-post/" target="_blank"> <input type="text" value="EA452401760IN"></input><button type="submit"> submitc</button></form>
Do I need a PHP file for this?
If yes, how do I write a php file for this problem.
Pure Javascript approach with Jquery
<input type="text" id="trackingNumber" value="EA452401760IN"></input>
<button onclick="go()">Track</button>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$( "button" ).on( "click", function( event ) {
window.location.href = "https://track.aftership.com/india-post/" + $('#trackingNumber').val();
});
</script>
JSBIN: https://jsbin.com/fuqovocoza/edit?html,console,output
<?php if(($_SERVER["REQUEST_METHOD"] == "POST")){
//Check that the form has been posted if it has been then redirect to the correct page
header ('Location: https://track.aftership.com/india-post/' . $_POST['query']);
}
else
{
if the form has not been submitted display the form
<form method="POST" action="https://track.aftership.com/india-post/" target="_blank"> <input type="text" name="query" value="EA452401760IN"></input><button type="submit"> submitc</button></form>
Note that I have changed the name of the input field to query.

Force data to a form using post

I know that there is no way to use a query string to pass information into a form that uses the post method, but are there any other options? I am trying to use a link (or button) on one website to link to a page on another. In the process, the URL/button needs to send information to the target. The target website uses post, so I can't just use a query string to input my data. Is there some sort of button attribute that will let me send data to the fields in the target website? Thank you in advance.
EDIT: I should have also mentioned that I cannot use the form tag. For some reason, the environment I am using does not allow for some tags to be used.
This should solve your problem (tested it locally and confirmed form data was present) ... got starting point here https://stackoverflow.com/a/13678453/1946558
<button class="btn" id="go">Go </button>
<script type="text/javascript">
$(document).ready(function () {
$('#go').click(function () {
var form = document.createElement("form");
var input = document.createElement("input");
// where you want to post the data
form.action = "test";
form.method = "post";
// add your fields here
input.name = "id";
input.value = 'some data';
// then append
form.appendChild(input);
document.body.appendChild(form);
form.submit();
});
});
</script>
With a button:
<form action="http://example.com/target.php" method="post">
<input type="hidden" name="foo" value="bar" />
<input type="submit" />
</form>
With a link:
<form id="my_form" action="http://example.com/target.php" method="post">
<input type="hidden" name="foo" value="bar" />
</form>
Submit

form action to display a hidden div and then go to the .php page in the form action?

This is a bit difficult to explain but I will try my best.
I have a <form> that has an action. in the form action I have a .php file that executes a few PHP functions once the form is submit. this works fine.
I also have a div with a display:none; in the page with the form.
now, what I want to do is to display the DIV that is hidden for a few seconds once the form is submitted and then go to the form action which is the .php page so it can execute the PHP functions.
I did try the following code however, it will display the hidden div and will not execute the PHP page nor dose it go to the .php page in the form action!
I thought about using AJAX but AJAX executes the PHP code/page behind the scene so it won't direct the users to the .php page in the form action. I need the users to go to the .php page so using AJAX is out of question.
Here is the code for form:
<form action="execute.php" method="post" name="orderform" class="register">
<input name="firstname" type="text" class="long" id="firstname" />
<input name="lastname" type="text" id="lastname" />
</form>
and here is the code to display the hidden div:
<script type="text/javascript">
$("#submit").click(function(){
$( "#div" ).show('slow');
});
</script>
could someone please help me out with this?
Thanks in advance
Use the complete callback that is part of the show function
<form action="execute.php" method="post" name="orderform" class="register" id="myform">
<input name="firstname" type="text" class="long" id="firstname" />
<input name="lastname" type="text" id="lastname" />
</form>
<script type="text/javascript">
$("#submit").click(function(){
$( "#div" ).show('slow', function(){$("#myform").submit()});
});
</script>
$("#submit").click(function(){
$( "#div" ).show('slow');
setTimeout(function(){$('form[name=orderform]').submit();},5000);
e.preventDefault();
});
You could call an ajax function and when it "finishes the work" you redirect the user like:
<script type="text/javascript">
$("#submit").click(function(){
$( "#div" ).show('slow');
$.ajax("page.php", {
data: $('form[name=orderform]').serialize()
}).done(function(returnedData){
location.href = 'theUrlYouWant.php?stuff=' + returnedData;
});
});
</script>
Hope it helps

Why is $_POST empty when I can see the POST variables in firebug?

I am posting a form in an expressionengine (1.6.8) template. I'm doing it using jquery but have tried an HTML form too - same result. The PHP superglobal $_POST is empty after posting the form, even though I have PHP enabled on my templates (on input for the template containing the form and output on the processing template) and can see the POST variables in firebug.
Can anyone suggest what might cause this?
<html>
<head>
<script type="text/javascript" src="/_scripts/jquery-1.6.1.min.js"></script>
</head>
<body>
<form action="/select-locale/processing" method="POST">
<input type="text" name="test"/>
<input type="submit" name="submit" value="submit">
</form>
<a id="test" href="">link</a>
<script type="text/javascript">
$(function(){
$('#test').bind('click', function(e){
e.preventDefault();
var path = "/select-locale/processing"
var form = $('<form/>');
form.attr("method", "post");
form.attr("action", path);
var field = $('<input></input>');
field.attr("type", "hidden");
field.attr("name", 'locale');
field.attr("value", 'NZ');
form.append(field);
$('body').append(form);
form.submit();
});
});
</script>
</body>
</html>
server-side code (inherited, not my own) :
<?php
var_dump($_POST);
var_dump($_GET);exit;
if ( ! isset($_POST['locale']))
{
$locale = FALSE;
$returnPage = "/";
}
else
{
$locale = $_POST['locale'];
$returnPage = $_POST['returnPage'];
}
if (isset($_GET['locale'])) {
$locale = $_GET['locale'];
$returnPage = "/";
?>
{exp:cookie_plus:set name="cklocale" value="<?php echo $locale;?>" seconds="2678400"}
{exp:session_variables:set name="userLocale" value="<?php echo $locale;?>"} <?php
}
?>
{exp:cookie_plus:set name="cklocale" value="<?php echo $locale;?>" seconds="2678400"}
{exp:session_variables:set name="userLocale" value="<?php echo $locale;?>"}
{exp:session_variables:get name="testSession"}
{if '{exp:session_variables:get name="testSession"}'=='yes' }
{redirect="<?php echo $returnPage;?>"}
{if:else}
{redirect="/nocookies/"}
{/if}
check the network tab if the parameters you want are really sent out
check the url if it's correct
if you use any sort of routing mechanism or url rewrite, you might wanna review it also
check your validation and XSS rules (if any) as it may reject the whole array once hints of XSS is found.
happened to me a while ago (CI) and i was sending it to the wrong url
You might want to re-check the action attribute, are u sure you're sending the data to the right url? I doubt that anything could be filtered.
it seems like form is getting submitted twice because of either action attribute of form tag or oath value in jquery function
It may be useful
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body name="test">
<form action="/select-locale/processing" method="POST">
<input type="text" name="test"/>
<input type="submit" name="submit" value="submit">
</form>
<a id="test" href="">link</a>
</body>
</html>
<script type="text/javascript">
$(function(){
$('#test').bind('click', function(){
var form ='<form action="/select-locale/processing" name="newform" method="POST"><input type="hidden1" name="locale" value="NZ"></form>';
$('body').append(form);
alert('added');
document.newform.submit();
});
});
</script>`

Categories