www.webdeveloper.com
Results 1 to 8 of 8

Thread: Posting a form

  1. #1
    Join Date
    Apr 2009
    Location
    India
    Posts
    15

    Angry Posting a form

    A HTML form object can be posted using following metods
    1. Using submit button.
    2. Pressing "Enter" key on a text box
    3. Using javascript syntax - form.submit();

    Once a form is submitted, is it possible to find which of the above three methods is used to submit the form?

  2. #2
    Join Date
    Apr 2009
    Posts
    6
    Try assigning different object values for each method and collect values on the next page something like... $_REQUEST[''];

  3. #3
    Join Date
    Apr 2009
    Location
    India
    Posts
    15

    Cool

    Ya this works.
    But i am searching for form object property which reflects the post mode.

  4. #4
    Join Date
    Oct 2008
    Posts
    87
    What is the specific need? What are you trying to accomplish?

    Create a simple function that submits the form as in [myForm].submit; and get that working for each of the three methods. You'll need to replace the standard Submit button with your own. One you've got the form submitting, then add a hidden form field and modify the code accept a parameter and then update the value in the field with the value of the parameter as in...

    onClick="submitForm('SubmitButton');"
    onClick="submitForm('IconClicked');"

    The Enter key will be different as you'll have code in the onKeyPress event to check if it the Enter key was pressed and then submit. I'm actually trying to do this myself, but I'm having problems with the code.

    Also, its been quite sometime since I've worked with JavaScript hence the absence of specific examples.

  5. #5
    Join Date
    Oct 2008
    Posts
    87
    Oh and if the form is submitted via Javascript you'll need to replace the various form.submit(); statements in the other functions with a call to your custom function so instead of

    form.submit(); it'll be submitForm("JavaScript");

    keeping form.Submit(); in the custom function that I mentioned above. Basically, you're encapsulating the submit function in the function - turning over the responsiblity for submitting the form to that specific function making it a gatekeeper of sorts.

  6. #6
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    i tried something based on rob cherny's hijax example, i don't know if it's any good for you, since we don't know what you want to achieve...

    it's a little long to read, but that's because ajax. i highlighted the interesting parts:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>empty</title>
        <script type="text/javascript">
        var hijaxObj=
          {
            keycode:0,
            makeXHRObj:function()
            {
              var XHRObj=false;
              if (window.XMLHttpRequest)
              {
                XHRObj=new XMLHttpRequest();
                if (XHRObj.overrideMimeType) {XHRObj.overrideMimeType("text/xml");}
              } else if (window.ActiveXObject)
                {
                  try {XHRObj=new ActiveXObject("Msxml2.XMLHTTP");}
                  catch(e)
                  {
                    try {XHRObj=new ActiveXObject("Microsoft.XMLHTTP");}
                    catch(f) {alert("Your browser does not support Ajax!");}
                  }
                }
              return XHRObj;
            },
            xhrPost:function(x,q)
            {
              x.open("POST","hijax_mod.php5",true);
              x.setRequestHeader("Content-Type",'application/x-www-form-urlencoded');
              x.onreadystatechange=function()
              {
                if (x.readyState===4 && x.status===200)
                {
                  window.document.getElementById("output").innerHTML=x.responseText;
                }
              };
              x.send(q);
            },
            startHijax:function()
            {
              var country, form=window.document.getElementsByTagName("form")[0],
                query, username, xhrObj=hijaxObj.makeXHRObj();
              if (xhrObj)
              {
                form.onsubmit=function()
                {
                  country=window.document.getElementById("country").value;
                  username=window.document.getElementById("username").value;
                  query="ajax=true&username="+encodeURI(username)+"&country="+encodeURI(country);
                  if (this.keycode === 13) query+="&enter=true"; //if the last pressed key was enter
                  hijaxObj.xhrPost(xhrObj,query);
                  return false;
                };
              }
              form.onkeypress=function(event) //cannot be on the whole document, because of event bubbling
              {
                e = event || window.event;
                this.keycode = e.which || e.keyCode;
              }
            }
          };
          window.onload=hijaxObj.startHijax;
        </script>
      </head>
      <body>
        <h1>Form:</h1>
        <div id="output">
          <form action="hijax_mod.php5" method="post"> 
            <p> 
              <label for="username">Your Name:</label> 
              <input type="text" id="username" name="username"> 
            </p> 
            <p> 
              <label for="country">Country:</label> 
              <input type="text" id="country" name="country"> 
            </p> 
            <p><input type="submit"></p> 
          </form>
        </div>
      </body>
    </html>
    hijax_mod.php5:
    Code:
    <?php
      $results=$_POST['username']." is from ".$_POST['country'];
      if (!isset($_POST['ajax']))
      {
        ?>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
          <head>
            <title>Accessible Ajax Form Test.</title>
          </head>
          <body>
            <?php
      }
    ?>
    <p>Here is my post -- 
      <?php
        if (isset($_POST['enter']))
        {
          $results=$results." - form submitted with enter";
        } else if (isset($_POST['ajax']))
          {
            $results=$results." - form submitted with ajax";
          } else
            {
              $results=$results." - form submitted without javascript";
            }
        echo $results;
      ?>
    </p>
    <?php
      if (!isset($_POST['ajax']))
      {
        ?>
        </body>
        </html>
        <?php
      }
    ?>
    this should output:
    "submitted without javascript", when js is off
    "submitted with ajax", when js is on and it was submitted by clicking on the button
    "submitted with enter", when js is on and it was submitted by hitting the enter key

    any comments welcome...
    Last edited by haulin; 04-20-2009 at 09:42 AM.

  7. #7
    Join Date
    Oct 2008
    Posts
    87
    But why go through all of that when the effort to a single hidden form field and the code to update the value isn't too invovled - not to mention that it allows for an easy way to add other methods (such as user inserted a quarter in the PC)?

  8. #8
    Join Date
    Apr 2009
    Location
    India
    Posts
    15
    Thanks for all your efforts.
    Its easy to finish off the work with a single hidden element.
    But i look for the form object property to support this. Actually i don't have any such requirement. I just tried to explore knowledge
    Thanks for all your valuable time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles