Need some help with ajax request

Discussion in 'JavaScript' started by squishi, Aug 15, 2009.

0
  1. #1
    I cannot figure this out.
    I want to send an ajax request when the user changes the values of a form field.

    Here is the php file. It contains some more stuff, that is why I check for the request at the top.
    	if ($query == 1){

		header('Content-Type: text/html; charset=utf-8');
		header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0');

		$key = 'ABCDEF';
		$DynAmount_Hash = md5($key + $_POST['amount'];);
		echo $DynAmount_Hash;

		die();
	}
    PHP:
    And here is the html:
    
<html>
<head>

<script type="text/javascript"><!--
var request = false;
	function setRequest(value) {
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest(); // Mozilla, Safari, Opera
		} else if (window.ActiveXObject) {
			try {
				request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
			} catch (e) {
				try {
					request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
				} catch (e) {}
			}
		}

		if (!request) {
			alert("Kann keine XMLHTTP-Instanz erzeugen");
			return false;
		} else {
			var url = "http://mydomain.com/thescriptfromabove.php?query=1";
			request.open('post', url, true);
			// Requestheader senden
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			request.send('amount='+value);
			request.onreadystatechange = interpretRequest;
		}
	}

	function interpretRequest() {
		switch (request.readyState) {
			case 4:
				if (request.status != 200) {
					alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
				} else {
					var content = request.responseText;					document.getElementById('DynAmount_Hash').value = content;
				}
				break;
			default:
				break;
		}
	}
//-->
</script>

<!-- no cache headers -->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<!-- end no cache headers -->
</head>
<body>

<!-- main -->
<form method="post" action="someurl">

      <p>Amount:
      <input name="DynAmount_Value" id="Amount" type="text" value="15" maxlength="4" size="3" onchange="setRequest(this.value);return false;" />
      DynAmount-Hash: <input name="DynAmount_Hash" 
value="$startouthashvalue"></p>

<input type="submit" value="Click to support">
</form>

</body>
</html>
    HTML:
     
    squishi, Aug 15, 2009 IP
  2. indigochild

    indigochild Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'd recommend you to use jQuery library for all Ajax works. It's MUCH more simple to use than raw XMLHttpRequest stuff.
     
    indigochild, Aug 15, 2009 IP
  3. kblessinggr

    kblessinggr Peon

    Messages:
    539
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yea with Jquery your javascript code is essentially. (keep in mind though for security reasons AJAX cannot access data from a domain that it is not running on)

    
...
$.post("http://mydomain.com/thescriptfromabove.php", { query: 1, amount: value }, 
  function(data){
    $(#DynAmount_Hash).val(data);
  });
...
    Code (markup):
    That above would be the entire AJAX posting the values to the url, and then setting the value of the DynAmount_Hash input to the response.
     
    kblessinggr, Aug 15, 2009 IP
  4. squishi

    squishi Peon

    Messages:
    58
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Okay. I am not a programmer, I just pieced this together from various sources.
    The script is on the same domain.

    I will try to use jquery...
     
    squishi, Aug 16, 2009 IP
  5. squishi

    squishi Peon

    Messages:
    58
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I tried this, but it didn't work:
    
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script>
$("input#Amount").bind("blur", function(){
  $.post("http://mydomain.com/thescript.php", { query: 1, amount: value }, 
    function(data){
      $("input#DynAmount_Hash").val(data);
      alert(data);
  });
});
</script>
    HTML:
    ...
          <input name="DynAmount_Value" id="Amount" type="text" value="15" maxlength="4" size="3" />
DynAmount-Hash: <input name="DynAmount_Hash" 
value="">
    HTML:
     
    Last edited: Aug 16, 2009
    squishi, Aug 16, 2009 IP
  6. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #6
    another one bites the dust... :D
     
    dimitar christoff, Aug 16, 2009 IP
  7. kblessinggr

    kblessinggr Peon

    Messages:
    539
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #7
    # is for id not name, your field id is "Amount", so $("input#DynAmount_Hash").val(data); wouldn't work because in your html there is no field with an id of DynAmount_Hash, also I think you need to define the type="" in the second js block

    Without changing the html you might be able to do this instead $("input[name='DynAmount_Hash']")

    Question though... why are you trying to hash the input before submission?
     
    kblessinggr, Aug 16, 2009 IP
  8. squishi

    squishi Peon

    Messages:
    58
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks. I added the id, but the value is still not changed on blur. :(

    I need to hash the value before submitting it to the credit card processor.
     
    squishi, Aug 16, 2009 IP
  9. kblessinggr

    kblessinggr Peon

    Messages:
    539
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #9
    This is the point where I tell you to actually hire someone. If I didn't know enough about PHP or Javascript, I wouldn't be screwing around with something that handle's someone's financial information. Also inputs of this nature shouldn't be handled purely client side, but rather having a form on an SSL host being submitted serverside and the processing/preparation would be done serverside.
     
    kblessinggr, Aug 16, 2009 IP