Safari issue with updating value of form text box

[jonathanbee]

Hello, this code works it IE and FF, but for Safari it does nothing. Please can someone tell me what I am doing wrong here;

 

alert (ajaxRequest.responseText); // indicates expected value in all browsers

document.checkout.shippingAddress.value = ajaxRequest.responseText;}

 

Thanks,

Jonathan

[jonathanbee]

anyone?  Surely someone must know why the alert would work, but the following line does nothing.. also,  the safari debug js console shows no errors.. really stumped here.

 

 

[mainewoods]

what type of field is 'shippingAddress'? Also is just text being returned from ajax or html as well?

[jonathanbee]

Hi mainewoods, shippingAddress is a text box. the ajax is returning just text.

 

While Safari is going and getting the correct data from my db, it's just not inserting it into that field I want, perhaps this has to do with how I am setting this function up?

 

<script language="javascript" type="text/javascript">

<!--

// AJAX Browser Support Code

function ajaxFunction(button){

 

var ajaxRequest;

ajaxRequest = false;

 

if(window.XMLHttpRequest && !(window.ActiveXObject)) {

    try {

ajaxRequest = new XMLHttpRequest();

        } catch(e) {

//ajaxRequest = false;

        }

    // branch for IE/Windows ActiveX version

    } else if(window.ActiveXObject) {

      try {

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

      } catch(e) {

        try {

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

        } catch(e) {

          //ajaxRequest = false;

        }

}

    }

 

 

ajaxRequest.onreadystatechange = function(){

if(ajaxRequest.readyState == 4){

 

if (button == "a"){

document.checkout.shippingAddress.value = ajaxRequest.responseText;}

else if (button == "b") {

document.checkout.billingAddress.value = ajaxRequest.responseText;}

 

}

}

// Take shippingPostcode OR billingPostcode and send it to the PHP file

 

    if (button == "a"){

var pc = document.getElementById('shippingPostcode').value;}

else if (button == "b") {

var pc = document.getElementById('billingPostcode').value;}

 

var queryString = "?pc=" + pc;

ajaxRequest.open("GET", "/includes/pc_query.php" + queryString, true);

 

ajaxRequest.send("");

}

 

//-->

</script>

 

[mainewoods]

if you verified with an alert that the correct value is being returned in safari:

 

1) some say that on some browsers:

ajaxRequest.open("GET", "/includes/pc_query.php" + queryString, true);

has to be before:

ajaxRequest.onreadystatechange =

 

2) is 'shippingAddress' below a 'name=' attribute not a 'id=' attribute in the textbox?

if (button == "a"){
         document.checkout.shippingAddress.value = ajaxRequest.responseText;}

[jonathanbee]

Hi again mainewoods,

 

Yes, the alert shows the correct data in Safari. I tried your suggestion about moving the code position, but the problem persisted.

 

The original form input looks like this:

 

<input type="text" name="shippingAddress" id="shippingAddress" size="20"></input>

 

As a test, if I change it to this:

 

<input type="text" name="shippingAddress2" id="shippingAddress2" size="20"><div id="shippingAddress"></div></input>

 

and then use this code in the script:

 

document.getElementById("shippingAddress").innerHTML = ajaxRequest.responseText;}

 

I get the correct data appearing on the page... but I just cant get it to insert into the text box...

 

 

 

 

 

 

[mainewoods]

the input tag isn't coded like that.  It has no closing tag.  Depending on whether you are using an html or xhtml doctype you should use:

<input type="text" name="shippingAddress" id="shippingAddress" size="20">

or

<input type="text" name="shippingAddress" id="shippingAddress" size="20" />

 

--Also, two different items should never have the same id in one web page.

[jonathanbee]

Hi mainewoods,

 

Thanks, I removed all of those closing tags. I'm using an HTML doctype.

 

I only tried this as a test;

 

<input type="text" name="shippingAddress2" id="shippingAddress2" size="20"><div id="shippingAddress"></div></input>

 

I did change the ID's so as not to duplicate them on the page... still not working though.

 

 

[rajivgonsalves]

your code

 

document.getElementById("shippingAddress").innerHTML = ajaxRequest.responseText;}

 

should be

 

document.getElementById("shippingAddress").value = ajaxRequest.responseText;}

[jonathanbee]

Hi rajivgonsalves,

 

I have already tried using innerHTML, like so:

 

var xxx = ajaxRequest.responseText;

document.getElementById("xyz").innerHTML ="<input type='text' name='shippingAddress' id='shippingAddress' value='"+xxx+"' size='20'>";

 

the form code:

 

<div id="xyx"><input type="text" name="shippingAddress" id="shippingAddress" size="20"></div>

 

but it still doesn't populate the value field in Safari, note that this code works in IE and FF fine. I'm starting to think the textbox value cannot be updated in Safari..

 

 

 

 

 

[rajivgonsalves]

can you try

 

objShipping = document.getElementById("shippingAddress");
objShipping.value = ajaxRequest.responseText;

[jonathanbee]

Hi again rajivgonsalves,

 

There is no change,  IE and FF work, but Safari does nothing.

 

 

[rajivgonsalves]

try this I do not have a safari browser so cannot test it

 

objShipping = document.getElementById("shippingAddress");
objShipping.value = ajaxRequest.responseText + '';

[jonathanbee]

Hi again rajivgonsalves,

 

Sorry, to drag this on and on.. but there is no change,  IE and FF work, but Safari does nothing. btw: I am testing this on both Mac and PC Safari 3.

[rajivgonsalves]

can you just set it to a static value then we'll know the problem

 

objShipping = document.getElementById("shippingAddress");
objShipping.value = 'test';

[jonathanbee]

That code works in all browsers, the static value gets inserted.

[rajivgonsalves]

try this code

 

objShipping = document.getElementById("shippingAddress");
var strResponseText = ajaxRequest.responseText + "";
objShipping.value = strResponseText;

[jonathanbee]

Thanks rajivgonsalves, but Safari does nothing still, works in IE and FF.

[rajivgonsalves]

well its frustrating getting things to work in safari, I had quite a few problems in safari a year ago with Ajax still looking for a solution will keep you posted.

[jonathanbee]

well, I changed the textbox to a textarea and it works in Safari.  I'd prefer not to use a textarea though...

[slashme]

Had the same issue: I added a select box with options thru DOM. Like this (JavaScript):

 

  select = document.createElement("SELECT");

  select.name = "this-is-the-select-name";

  select.id = "theID";

  select.options[0] = new Option("Option 0", 0);

  select.options[1] = new Option("Option 1", 1);

  select.options[2] = new Option("Option 2", 2);

  select.options[3] = new Option("Option 3", 3);

  document.getElementById('someparent').appendChild(select);

 

I added a button to the form like this:

  <input type='button' onclick='alert(document.getElementById("theID").value)' value='Click me'/>

 

I select option 2, click the button, browser returns '2'. Working fine! < In both Safari and FF!!!

 

Next, I submit the form, with option 2 still selected. In PHP, I print_r($_POST). Return value in FF:

 

Array ( [this-is-the-select-name] => 2 )

 

Return value in Safari:

 

Array ( [this-is-the-select-name] => 0 )

 

What the ****?

 

SOLUTION

 

Changing the JS code to this fixed it, although I'm not happy with it:

 

  document.getElementById('someparent').innerHTML = "<select name='this-is-the-select-name'><option value='0'>Option 0</option><option value='1'>Option 1</option> (etc.) </select>";

 

Can anyone tell me what's up with Safari?