Passing 2 or more parameters from a HTML form to a

Question

So, I have a HTML form and I need to send it's value as a parameter to a php function, but I also need a different value, that's not even inside the HTML.

For example:

<form action="methods.php" method="register"> 
   <input type="text" placeholder="EventID"> 
   <input type="submit" value="Register"> 
</form>

This form would get the event id and send it as a parameter to register the user into the event. But I need to send the user as a parameter also (function register($user, $eventid)) and I have no idea on how to do so.

I did find some similar things around here, but they were related to POST and GET and I'm not sure they work for me and I could not understand how to use in them in my case, so if anyone could help me out, pleaaaaaase, i'd be really thankful

Answer 1

you can use hidden field or you can use session or cookie for user

<form action="methods.php" method="post"> 
   <input type="hidden" name="txtuser" value="abc"> 
   <input type="text" placeholder="EventID"> 
   <input type="submit" value="Register"> 
</form>

if you use cookie or session then there is not need to pass it as parameter its a global variable so you can access its value at any page directly, you just need to store value to it and access it any where in your project.

Answer 2

Its very simple you just need to take care of few things.

1: every input field should have a name.

2: set form method either GET(to send values visible in the url) or POST(to send data without showing in the url)

3: on methods.php receive form data if send via GET then $_GET['input_field_name'] or via POST then $_POST['input_field_name']

Answer 3

Look for the explanation in comments below:

//<![CDATA[
// external.js
var post, doc, bod, htm, C, E, T; // for use on other loads
addEventListener('load', function(){ // load

// used in post function below to create String from Object
function phpEncode(obj){
  var r = [];
  if(obj instanceof Array){
    for(var i=0,l=obj.length; i<l; i++){
      r.push(phpEncode(obj[i]));
    }
    return '%5B'+r.join(',')+'%5D';
  }
  else if(typeof obj === 'object' && obj){
    for(var i in obj){
      if(obj.hasOwnProperty(i)){
        var v = obj[i], s;
        if(typeof v === 'object' && v){
          s = encodeURIComponent('"'+i.replace('"', '\\"')+'":')+phpEncode(v);
        }
        else{
          v = typeof v === 'string' ? '"'+v.replace('"', '\"')+'"' : v;
          s = encodeURIComponent('"'+i.replace('"', '\\"')+'":'+v);
        }
        r.push(s);
      }
    }
    return '%7B'+r.join(',')+'%7D';
  }
  else{
    r = typeof obj === 'string' ? '"'+obj.replace('"', '\\"')+'"' : obj;
    return ''+r;
  }
}
// used in post function below to evaluate (make into code) JSON String that comes back from PHP
function phpAccept(url){
  return eval('('+decodeURIComponent(url)+')');
}
// here is an example of a post AJAX function
post = function(send, where, success, context){
  var x = new XMLHttpRequest;
  var c = context || this;
  x.open('POST', where); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  x.onreadystatechange = function(){
    if(x.readyState === 4 && x.status === 200){
      if(success)success.call(c, phpAccept(x.responseText));
    }
  }
  if(typeof send === 'object' && send && !(send instanceof Array)){
    var r = [];
    for(var p in send){
      r.push(encodeURIComponent(p)+'='+phpEncode(send[p]));
    }
    x.send(r.join('&'));
  }
  else{
    throw new Error('send must be an Object');
  }
  return x;
}
// yes, you can do this - just remember that non-primitive values are the actual Object through assingment
doc = document; bod = doc.body; htm = doc.documentElement;
// simple way to create an Element by tag
C = function(tag){
  return doc.createElement(tag);
}
// simple way to document.getElementById()
E = function(id){
  return doc.getElementById(id);
}
T = function(tag){
  return doc.getElementsByTagName(tag);
}
var form = E('form'), sub = E('sub'), i1 = E('i1'), i2 = E('i2');
// prevent old school submission
form.addEventListener('submit', function(ev){
  ev.preventDefault(); // prevents submission
});
// just for testing remove below
var tS = E('test_out').style;
// remove above
// ajax submisson
sub.addEventListener('click', function(){
  /* note that if the Elements are not removed from or added
     to the DOM you don't need to get them again Element.value
     will probably be different so you'll want to get them
     on every click
  */
  post({phpProp1:i1.value, phpProp2:i2.value}, 'yourPHPajaxResponsePage.php', function(data){
    /* before data comes back yourPHPajaxResponsePage.php may look like this:
    <?php
    session_start(); // super common - read up on it - not needed here - but won't hurt
    if(isset($_POST['phpProp1'], $_POST['phpProp2'])){
      // usually you affect MySQL using PHP at this point
      // we'll just send them back in this lame example
      $res = array('jsProp1' => $_POST['phpProp1'], 'jsProp2' => $_POST['phpProp2']);
      // makes results come back as JSON
      echo json_encode($res);
    }
    ?>
    */
    if(data){ // may want more conditions
      E('out').innerHTML = data.jsProp1+'<br />'+data.jsProp2;
    }
  }, this);
  // just for testing - remove below
  tS.display = 'block';
  E('temp_res').innerHTML = i1.value+'<br />'+i2.value;
  // remove above
});
// testing only remove below
var ins = doc.querySelectorAll('input[type=text]');
for(var i=0,l=ins.length; i<l; i++){
  ins[i].addEventListener('focus', function(){
    tS.display = 'none';
  });
}
// remove above
form.addEventListener('keydown', function(ev){
   // if user hits enter
  if(ev.keyCode === 13)sub.click();
});

}); // end load
//]]>

/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:980px; margin:0 auto;
}
#form{
  width:266px; color:#fff; background:green; padding:10px; 
}
#form>div>label{
  display:block; float:left; width:57px;
}
#form>div>input{
  width:203px;
}
#form>div{
  margin-bottom:10px;
}
#form>#sub{
  display:block; margin:0 auto;
}
/* remove below - testing only */
#test_out{
  display:none;
}
#test_out>div:first-child{
  color:red;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <title>AJAX Example</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <form id='form'>
      <div><label for='i1'>Input 1</label><input id='i1' name='i1' type='text' value='' /></div>
      <div><label for='i2'>Input 2</label><input id='i2' name='i2' type='text' value='' /></div>
      <input id='sub' type='button' value='submit' />
    </form>
    <div id='out'></div>
    <!-- for testing remove below -->
    <div id='test_out'><div>Must have PHPServer code in JavaScript Comments to get real results</div><div id='temp_res'></div></div>
    <!-- remove above -->
  </div>
</body>
</html>

What do you think?