Javascript code for handling Form behaviour.

Question

Hello,

Here's how the situation looks :

I have a couple simple forms

<form action='settings.php' method='post'>
<input type='hidden' name='setting' value='value1'>
<input type='submit' value='Value1'>
</form>

Other small forms close to it have value2, value3, ... for the specific setting1, etc.

Now, I have all these forms placed on the settings.php subpage, but I'd also like to have copies of one or two of them on the index.php subpage (for ease of access, as they are in certain situations rather frequently used). Thing is I do not want those forms based on the index.php to redirect me in any way to settings.php, just post the hidden value to alter settings and that's all.

How can I do this with JS ?

Cheers

Answer 1

Yes, you could use an ajax call to send a request to the settings.php file. You'd probably want that PHP code to return something that the JavaScript can use to know if the request was successful or not (for example, using JSON instead of HTML).

Answer 2

Here is an ajax getData function.

function getData(dataSource, targetDiv){

  var XMLHttpRequestObject = false;

  if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    XMLHttpRequestObject = new
      ActiveXObject("Microsoft.XMLHTTP");
  }

    if(XMLHttpRequestObject) {
      var obj = document.getElementById(targetDiv);
      XMLHttpRequestObject.open("GET", "settings.php?form="+dataSource+"&t="+new Date().getTime());

      XMLHttpRequestObject.onreadystatechange = function()
      {
        if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
            obj.innerHTML = XMLHttpRequestObject.responseText;
        }
      }

      XMLHttpRequestObject.send(null);
    }
}

use this function to send the form to your setting.php file which should return confirmation message to index.php(inside targetDiv).

Parameters of the function

1) dataSource - is the variable value that you send to settings.php

2) targetDiv - is the div on index php that with display the response from settings.php

Hope it makes sense.