Newbe Question

[flyersun]

Ever since I started web development I have avoided learning Javascript, probably not the best idea cos now I need to use some.

 

Basically what I want to do is pass two vars from a html form to a php script using Ajax I found out how to pass one no problem but I can't get my head around how I would pass another. It's probably really simple!

 

Here is the html code I'm using and the Ajax file.

 

<script src="clienthint.js"></script>

 

<form action="userinput.php" method="post">

 

<p><label for="txt1">Username:</label><input type="text"  id="txt1" name='username' onkeyup="showHint(this.value)"><span id="txtHint"></span></p>

 

 

 

 

var xmlHttp

 

function showHint(str)

{

if (str.length==0)

  {

  document.getElementById("txtHint").innerHTML="";

  return;

  }

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

  {

  alert ("Your browser does not support AJAX!");

  return;

  }

var url="gethint.php";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}

 

function stateChanged()

{

if (xmlHttp.readyState==4)

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

}

}

 

function GetXmlHttpObject()

{

var xmlHttp=null;

try

  {

  // Firefox, Opera 8.0+, Safari

  xmlHttp=new XMLHttpRequest();

  }

catch (e)

  {

  // Internet Explorer

  try

    {

    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

    }

  catch (e)

    {

    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

  }

return xmlHttp;

}

[flyersun]

How come loads of people are looking at my question but no ones replying?

 

Does what I have written not make since?

 

Is it so easy that you are all just laughing at me? =P

[dungareez]

Correct me if I am wrong, but I think what you mean to do is update more then one element via a single Ajax response rather than one variable.  If this is the case check out this post....

 

http://www.phpfreaks.com/forums/index.php/topic,195274.0.html

 

If this is what you mean I hope it helps, if not specify what you want to do and I will try and help, but I warn you I am far from a javascript expert.  More like newb .

 

Good luck

[flyersun]

Thanks that was useful but not exactly what I'm looking for.

 

I will try explaining again.. basically I wanna pass two bits if information(two variables). So the information in the input field would be one and these and there will be a second bit of information say the name of the field or something.

 

From a html form to a php script using Ajax.

 

Does that make sense?

 

Sorry I'm really bad at explaining stuff.

 

[dungareez]

Sorry, I should have go that from your original post.  OK, well I use protoype to serializee my forms when I want to pass multiple fields, but you could create a JS function that will create a url with all the get data you need to pass.  I know very little of JS myself, but basically I think you just need to concatenate the values you are passing using the someurl.com/backend.php?somevar=somevalue&anotherVarialble=anothervalue

 

then use the $_GET['somevar'] and $_GET['somevar]

 

to concatenate your url you could create a  JS function that will

 

 

  url = "yourURL.com/backend.php?"+document.getElementById("formFIeld1").value;

 

  url = url + "&"+document.getElementById("formFIeld2").value;

 

and then pass url to your ajax request.  Of course you could make a more generic flexible version that would loop through an entire form.  Or you could use some existing code library as I do.  Admittedly though prototype is rather large for something like this, you could try googling form serialization or something as well.

 

Hope this helps,

[flyersun]

I'm sorry first I wanna say thank you for your help but I'm still no closing to working the problem out.. I don't really know the first thing about Javascript or not to write it.. You said you had done this before.

 

Could you maybe show me an example of how it is done? I wouldn't ask but I'm on a deadline.

[dungareez]

what if you simply pass two values to your function

 

function showHint(str , str2)

 

 

then when you create the url in your function it would simply be

 

    var url="gethint.php";

    url=url+"?q="+str;

    url=url+"&secondValue="+str2;  //this is the new line

    url=url+"&sid="+Math.random();

 

actually if you look at your code you are already passing two values, "q" and "sid", now there are three, "q", "sid", and "secondValue".

Now on the server side the "gethint.php" will need to to access those variables passed in the url by the $_GET array. 

 

IE

<?php

$someVariable = $_GET['q'];

$someOtherVariable = $_GET['secondValue'];

$sid= $_GET['sid'];

 

//do something with your variables

 

//echo out your return response

 

?>

 

NOW back in the javascript world....

 

when you call your function you could do something like

 

 

<form action="userinput.php" method="post">

 

<p><label for="txt1">Username:</label><input type="text"  id="txt1" name='username' onkeyup="showHint(this.value, document.getElementById("someInputField").value)"><span id="txtHint"></span></p>

 

That should work.  If you are passing the value from a DIV or SPAN you would need to change document.getElementById("someInputField").value to document.getElementById("someDiv").innerinnerHTML

 

Hopefully this helps.