Creating a URI based on form values

I have a form and I would like to send the details that have been inputted into the form into the uri using post. I am just not sure how to go about this.

I will have:

Number: Call:

I would like to generate http://domian.co.nz/page.php?login=xxxx&password=xxxx&number=12345&call678910 etc

I will have the login and pw preset but how would I pass the data from the form into the action?

Here is a concept idea that I have come up with still not 100%:

  • Dropdown will not post data into uri
  • How would I post the call data?

Code is here as it did not like the stack system

Answers


To get your form fields into the URL when you submit you need to use 'GET' as your form method, not POST.

Although in your example you're passing the password. I don't think that's a good idea to show that in the URL.


Your URI is only correct for a GET request.

A post request doesn't put the parameters in the URI but in the body of the request.

The server expects the body of your POST request to be in multipart/form-data format as defined in http://www.w3.org/TR/html401/interact/forms.html#form-data-set

The simplest is to use a form and let HTML send elements in multipart.

Usually you'll let the user fill the two fields login and password in order to login :

<FORM METHOD=POST ACTION="yoururl.php">
    <input type=text name=login>
    <input type=password name=password>
    <input type=submit value="login">
</FORM>

The user simply has to click the "login" button to send the request in post.

But if you don't want the fields to appear in your page, you may use hidden inputs :

<FORM METHOD=POST ACTION="yoururl.php">
    <input type=hidden name=login>
    <input type=hidden name=password>
</FORM>

Supposing you're using javascript, you can do this :

var form = document.forms[0];
form.login = "mylogin";
form.password = "mypassword";
form.submit();

Don't confuse POST request and GET request.

Assuming we have:

inputOne = valueOne
inputTwo = valueTwo
inputThree = valueThree

In GET request all you should do is to pass these on desired URI:

protocol://domain/page?inputOne=valueOne&inputTwo=valueTwo&inputThree=valueThree

In GET, all parameters travel through URI better I'd say but in POST, parameters travel through HTTP request. something like this:

POST /mysite/page HTTP/1.1
Host: localhost:80
Connection: keep-alive
Content-Length: 416
Cache-Control: max-age=0
Origin: http://localhost:80
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Referer: http://localhost:8080/mysite/signup/form.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,hr;q=0.6
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

inputOne:valueOne
inputTwo:valueTwo
inputThree:valueThree

Now it depends on your situation:

If you're on client-side:

GET:

  • You may redirect user to appropriate URI with parameters
  • You may send an AJAX request with GET method to the desired URI
  • You may generate a dynamic form with GET method attribute and submit it via javascript

POST:

  • You may send an AJAX request with POST method to the desired URI
  • You may generate a dynamic form with POST method attribute and submit it via javascript

If you're on server-side:

GET:

  • You may redirect user to appropriate URI with parameters using HTTP headers

POST:

  • You may build a HTTP request manually
  • You may use cURL

Sidenote: there are other options but these are the most common ones.


Here is an example for an email form!

The form:

<form method="post" action="my.php">
<input name="vv[Name]" class="textfield" type="text" />
<input name="vv[Email]" class="textfield" type="text" />
<input name="Reset" value="Reset" class="input" type="reset" />
<input name="Submit" value="Submit" class="input" type="submit" />

my.php

<?
$to = mail@domain.com";
$subject = "Contact form ";
$from = $_POST['vv']['Email'];

$valid=1;
$message ='';
foreach ($_POST['vv'] as $k=>$v){
if (trim($v)=='')$valid=0;
$k = str_replace('_',' ',$k);
$message .="$k : $v<br>";
}
$message .="<hr />IP: {$_SERVER['REMOTE_ADDR']}";

function sndmail($from,$to,$subject,$message){
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
$headers .= "From:".$from ."\r\n";
mail($to, $subject, $message, $headers);
}

if ($valid=='1') {
sndmail($from,$to,$subject,$message);
header( 'Location: correct.html' ) ;
}
else header( 'Location: error.html' ) ;

?>

Hope this will help you

[EDIT] Now i read more carefull the question and saw that my answer is not quite right for your problem. Sorry about this!


In addition to Dystroy's answer, here is a dynamic way to POST data using dynamically created forms via javascript:

Pure javascript:

var dynForm = document.createElement('form');
dynForm.setAttribute('method','POST');
dynForm.setAttribute('action','');
dynForm.setAttribute('id','dynForm');
dynForm.innerHTML = '';
dynForm.innerHTML += '<input type="hidden" name="login" value="xxxx" />';
dynForm.innerHTML += '<input type="hidden" name="password" value="xxxx" />';
dynForm.innerHTML += '<input type="hidden" name="number" value="12345" />';
dynForm.innerHTML += '<input type="hidden" name="call" value="678910" />';
document.body.appendChild(dynForm);
document.getElementById('dynForm').submit();

jQuery:

$("body").append('<form id="dynForm" action="" method="POST">');
$("#dynForm").append('<input type="hidden" name="login" value="xxxx" />');
$("#dynForm").append('<input type="hidden" name="password" value="xxxx" />');
$("#dynForm").append('<input type="hidden" name="number" value="12345" />');
$("#dynForm").append('<input type="hidden" name="call" value="678910" />');
$("body").append('</form>');
$("#dynForm").submit();


And this is the technique of POSTing with AJAX:

Pure javascript:

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","Desired_URI",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send("login=xxxx&password=xxxx&number=12345&call=678910");

jQuery:

$.post({
  url: 'Desired_URI',
  data: {
    login:'xxxx',
    password:'xxxx',
    number:'12345',
    call:'78910'
  }
});

here you go (based on your Gist):

<?php
    $login = '1236567';
    $password = '10152930';
    $officeNumber = array('0212177899','027899899','09111');
?>
<html>
    <head>
    <script type="text/javascript">
        //I assume that the first entry of $officeNumber is the default number
        //I'm saving base URL for further uses
        var baseActionURI = "https://live.domain.co.nz/call.php?login=<?php echo $login; ?>&password=<?php echo $password; ?>";

        function changeAction()
        {
            var oForm = document.forms[0];
            oForm.setAttribute('action',baseActionURI + "&aparty=" + oForm.elements["officeNumbers"].value + "&bparty=" + oForm.elements["officeNumbers"].value)
        }
    </script>
    </head>
    <body>
        <form onsubmit="" method="POST" action="https://live.domain.co.nz/call.php?login=<?php echo $login; ?>&password=<?php echo $password; ?>&aparty=<?php echo $officeNumber[0]; ?>phone&bparty=<?php echo $officeNumber[0];?>">
            <label for="officeNumbers">Office Number:</label>
            <select onchange="javascript:changeAction()" name="officeNumbers" id="officeNumbers">
            <?php
                foreach($officeNumber as $number)
                {
                    echo '<option value="'.$number.'">'.$number.'</option>';
                }
                echo '</select>';
            ?>
            <label for="callTo">Call:</label>
            <input type="text" name="callTo" id="callTo" />
            <input type="submit" value="Call" />
        </form>
    </body>
</html>

Need Your Help

select more ranges in mysql

mysql sql range

How do I SELECT multiple ranges in MySQL taking in consideration the following scenario: let say I want to get back from my product table products where

why the return value from recvfrom method is 4294967295 which should be 0 or -1?

ios objective-c networking udp bsd

I am using sendto/recvfrom methods to send/receive UDP packets in my app. Now my receive method is as following: