Dynamically add select boxes based on selection

[komplexbs]

Ok, I found one (of many) problems, the onchange attribute should have been on the select tag not the option tags, but the ajax call is still not being made. I checked the error console and came up with no errors. I created a test site where you can see it:

http://www.kxdesign.com/test/register.php

Under additional information (profile) you should see a select dropdown called Test Field. And if you select either of the options, another profile field should show up beneath it but it doesn't.

Edit: I now see what the problem is. Preid is not defined. How would I go about this? I have defined preid in my php code as zfield. But with the current code it would always put the next field after the primary field and my profile field id's are random.

I'll explain it better how it works right now. First, the user adds some profile fields and each option has another profile field ID assigned to them (it can be any field). Then in a different option he selects which is the primary field, the one that gets displayed first. For this field I have a different template, but all subsequent fields are rendered through the subfield template (they are only a bit different). Do you think it would be better to user the same template?
There are several problems with this approach which I can't solve:

1. Like I said before, I don't know how to correctly create new profile fields after one another.
2. If the user would change his selection in the first field, the subsequent fields would have to be removed, but I don't know how to pass the information to the function. (maybe add a div id++?)
3. I want the user later to edit the fields on a different page, but I don't know how to correctly select the fields he has saved before in the form.

Maybe someone can suggest a different approach for me to achieve this? This seems to have too many flaws and complications.

[Rowsdower!]

Originally Posted by komplexbs

...

Edit: I now see what the problem is. Preid is not defined. How would I go about this? I have defined preid in my php code as zfield. But with the current code it would always put the next field after the primary field and my profile field id's are random.

Seems to me the easiest way would be to pass the ID as part of the function call in the onclick event handler:

<select id="zfield_1" class="primary" onchange="ajaxReq(2, this.value,this.id);" tabindex="1" name="Test Field">

and then make an adjustment in your function like so:

function ajaxReq(col, wval, preid) {
 // removeLists(col);     

  if(wval!='- - -' && wval!='') {
    var request =  new XMLHttpRequest();		      
    var php_file = 'ajax.php'; 
    var  getfields = 'yes';
    var  data_send = 'col='+col+'&wval='+encodeURIComponent(wval);

  request.open("POST", php_file, true)
    request.onreadystatechange = function() {
      if (request.readyState==4) {
        document.getElementById(preid+col).innerHTML = request.responseText;
      }
    }
    document.getElementById(preid+col).innerHTML = '<img src="./images/misc/progress.gif alt="Loading..." />';
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(data_send);
  }
}

But I will admit that I haven't taken much time to look at anything else in your code and I haven't tested this change. If the ID of the element calling the function is the preid you mean to pass then this admittedly SLOPPY patch should work.

This is just a lazy shot in the dark for me.

[komplexbs]

That's quite clever actually

It helped a bit though. I added the variables of the mainfield, where col is the id of the current field and preid is the prefix (zfield_). Now I get an error that zfield_ is not defined ?

[Rowsdower!]

I don't see the update reflected in your page. Have you made the change live?

[komplexbs]

I updated it now.

I had an idea for the remove fields function? Let's say it would save all the current fields in an array in javascript and then remove all fields that were added after the one that is currently being changed, would that work? How can I do this?

[Rowsdower!]

If you're going to put in the literal string "zfield_" then you will need to use quotes (single quotes in this particular case) around it like so:

<select id="zfield_1" class="primary" onchange="ajaxReq(1, this.value, 'zfield_');" tabindex="1" name="Test Field">
<option...

And then you still have to update your javascript function in your external .js file to use this newly added parameter or else it will still choke with "preid is not defined."

As for the other questions...let's take this one step at a time.

[komplexbs]

I actually used a php variable inside that function :-/

Sorry, I forgot to add the parameter, but the same error still occurs.

[Rowsdower!]

Originally Posted by komplexbs

I actually used a php variable inside that function :-/

Sorry, I forgot to add the parameter, but the same error still occurs.

I think in the rush to get this fixed you may not be paying full attention to what I am saying. Whether php-generated or not, your HTML source code needs to include single quotes around the value 'zfield_' in order to resolve the javascript error in the page. Once the javascript error is resolved we can work on getting the functionality to do what you actually want it to do.

So if, for example, your php script generates the line like so:

PHP Code:

print "<select class=\"primary\" name=\"Test Field\" id=\"zfield_1\" tabindex=\"1\" onchange=\"ajaxReq(1, this.value, ".$peid.");\">\n"; 


you would need to amend it to be like this instead:

PHP Code:

print "<select class=\"primary\" name=\"Test Field\" id=\"zfield_1\" tabindex=\"1\" onchange=\"ajaxReq(1, this.value, '".$peid."');\">\n"; 


Or, if you generate the line like this:

PHP Code:

<select class="primary" name="Test Field" id="zfield_1" tabindex="1" onchange="ajaxReq(1, this.value, <?php print $peid; ?>);">

then you would need to make it like this instead:

PHP Code:

<select class="primary" name="Test Field" id="zfield_1" tabindex="1" onchange="ajaxReq(1, this.value, '<?php print $peid; ?>');">

In any case, no matter how you generate the <select> tag and its attributes you *need* to get single quotes around that parameter in the HTML output.

[komplexbs]

Originally Posted by Rowsdower!

I think in the rush to get this fixed you may not be paying full attention to what I am saying. Whether php-generated or not, your HTML source code needs to include single quotes around the value 'zfield_' in order to resolve the javascript error in the page. Once the javascript error is resolved we can work on getting the functionality to do what you actually want it to do.

So if, for example, your php script generates the line like so:

PHP Code:

print "<select class=\"primary\" name=\"Test Field\" id=\"zfield_1\" tabindex=\"1\" onchange=\"ajaxReq(1, this.value, ".$peid.");\">\n"; 


you would need to amend it to be like this instead:

PHP Code:

print "<select class=\"primary\" name=\"Test Field\" id=\"zfield_1\" tabindex=\"1\" onchange=\"ajaxReq(1, this.value, '".$peid."');\">\n"; 


Or, if you generate the line like this:

PHP Code:

<select class="primary" name="Test Field" id="zfield_1" tabindex="1" onchange="ajaxReq(1, this.value, <?php print $peid; ?>);">

then you would need to make it like this instead:

PHP Code:

<select class="primary" name="Test Field" id="zfield_1" tabindex="1" onchange="ajaxReq(1, this.value, '<?php print $peid; ?>');">

In any case, no matter how you generate the <select> tag and its attributes you *need* to get single quotes around that parameter in the HTML output.

Thank you, I misunderstood the ajax call is now being made!!! However, it's not returning what it should . Upon selection, the options change to those of the dropdown at the bottom where you can change the site's style :-/. The ajax.php file contains more ajax functions but all are wrapped in condition tags based on $_REQUEST or $_POST, perhaps I need a more specific condition for my ajax call?

[Rowsdower!]

OK, we have a pulse. Now you can see that the AJAX response is not what you expected it to be, so we look at what we're actually sending to the ajax.php file...

var  data_send = 'col='+col+'&wval='+encodeURIComponent(wval);

Suppose we just changed the select box to use Option 1. What does that give us for the $_POST string that we are generating?

'col='+col

col is passed as a parameter of the function call from the onchange event handler and it is known to be "1" for us.

'&wval='+encodeURIComponent(wval)

wval is also passed as a parameter of the function call, and is equal to the value of the option that has been made selected. So if we are selecting "Option 1" from the dropdown, then the value we pass to the function is "1".

So overall, our $_POST request (which you indicate uses a $_REQUEST in the PHP to get values for, meaning we can test with simple $_GET strings) is a simple "col=1&wval=1"

Testing that via $_GET, we end up tagging this URL:

http://www.kxdesign.com/test/ajax.php?col=1&wval=1

And...we get a blank page. So when the AJAX response wipes out your select box contents this is why. You haven't given any contents to replace them with. Nevermind the fact (for now) that the response is being populated in the wrong spot. Lets first find out why we are getting a blank page for a result.

Can you post your ajax.php script so I can see what you're actually testing for? Also, do you have error reporting enabled? If not, you should enable it right now so we can be sure of whether or not your PHP script is choking on an error of its own.

EDIT: Actually, I'm seeing a status 500 internal server error message for ajax.php - it looks like the script is not even getting a chance to run. You may have issues with .htaccess or something. You need to resolve your 500 status problem before we can continue...

[komplexbs]

Originally Posted by Rowsdower!

OK, we have a pulse. Now you can see that the AJAX response is not what you expected it to be, so we look at what we're actually sending to the ajax.php file...

var  data_send = 'col='+col+'&wval='+encodeURIComponent(wval);

Suppose we just changed the select box to use Option 1. What does that give us for the $_POST string that we are generating?

'col='+col

col is passed as a parameter of the function call from the onchange event handler and it is known to be "1" for us.

'&wval='+encodeURIComponent(wval)

wval is also passed as a parameter of the function call, and is equal to the value of the option that has been made selected. So if we are selecting "Option 1" from the dropdown, then the value we pass to the function is "1".

So overall, our $_POST request (which you indicate uses a $_REQUEST in the PHP to get values for, meaning we can test with simple $_GET strings) is a simple "col=1&wval=1"

Testing that via $_GET, we end up tagging this URL:

http://www.kxdesign.com/test/ajax.php?col=1&wval=1

And...we get a blank page. So when the AJAX response wipes out your select box contents this is why. You haven't given any contents to replace them with. Nevermind the fact (for now) that the response is being populated in the wrong spot. Lets first find out why we are getting a blank page for a result.

Can you post your ajax.php script so I can see what you're actually testing for? Also, do you have error reporting enabled? If not, you should enable it right now so we can be sure of whether or not your PHP script is choking on an error of its own.

error reporting is set to error_reporting(E_ALL & ~E_NOTICE);

The part of code in ajax.php (it is a large file, mostly consists of vBulletin functions) is this:

if (isset($_POST['col']) && isset($_POST['wval']))
{
$vbulletin->input->clean_array_gpc('p', array(
        'col'   => TYPE_STR,
        'wval'   => TYPE_STR
	));
    $preid = 'zfield_';
    $col = trim(strip_tags($_POST['col']));
    $wval = "'" . trim(strip_tags($_POST['wval'])) . "'";
    
$optionid = $vbulletin->db->query_first("SELECT assignfield
    FROM " . TABLE_PREFIX . "ziki_franco_option
    WHERE optionid = '". $wval ."'");

if ($optionid['assignfield'] != '0' AND $optionid['assignfield'] != 'input')
    {
$subfield = $vbulletin->db->query_first("SELECT *
    FROM " . TABLE_PREFIX . "ziki_franco_field
    WHERE id = '". $optionid['assignfield'] ."'");
$suboptions = $vbulletin->db->query_read("SELECT *
    FROM " . TABLE_PREFIX . "ziki_franco_option
    WHERE fieldid = '". $optionid['assignfield'] ."'");
while ($suboption = $vbulletin->db->fetch_array($suboptions))
{
$subfieldbits .= '<option value="' . $suboption['optionid'] . '">' . $suboption['value'] . '</option>';
}

$templater = vB_Template::create('ziki_franco_subfield');
				$templater->register('subfield', $subfield);
				$templater->register('subfieldbits', $subfieldbits);
                $templater->render();
}
elseif ($optionid['assignfield'] == 'input')
{
	$categories = fetch_socialgroup_category_options();
		$categoryoptions = '';

		foreach ($categories as $categoryid => $category)
		{
			$optiontitle = $category['title'];
			$optionvalue = $categoryid;
			$optionselected = ($categoryid == $group['socialgroupcategoryid'] ? ' selected="selected"' : '');

			$categoryoptions .= render_option_template($optiontitle, $optionvalue, $optionselected, $optionclass);
		}
		unset($categories);
//not working yet
$templater = vB_Template::create('ziki_franco_inputfield');
                                $templater->register('categoryoptions', $categoryoptions);
                                $templater->register('group', $group);
                $templater->render();
}

Maybe I should use $_GET instead of $_POST?

Edit: I was thinking, that I will rebuild this, to use a system or parent and subfields to make this easier. So that all select boxes will already be created but only the first one will have options, the subsequent won't, then upon the change of the parent field, they would populate the options. I think this is an easier approach than making them appear based on the option (like this http://www.dhtmlgoodies.com/scripts/...-select.html)? It's more logical

[Rowsdower!]

Originally Posted by komplexbs

error reporting is set to error_reporting(E_ALL & ~E_NOTICE);

The part of code in ajax.php (it is a large file, mostly consists of vBulletin functions) is this:
...
Maybe I should use $_GET instead of $_POST?

Ok, that's good that you have error reporting up for this step. And $_GET vs. $_POST is really not relevant in terms of making this script functional. If you want to adjust that later on you can, but it certainly isn't necessary.

Also, you may have missed it but I updated my last post to say that your ajax.php file is generating a 500 Internal Server Error response code and thus the script is not running for us.

Response status 500 errors (in my experience) usually are a result of invalid .htaccess changes. Have you been adjusting anything in your .htaccess files? Or are you not seeing the 500 error on your end? Because I sure as heck am seeing it here when I check my http headers...

There won't be anything more I can do to help until the ajax.php page is running again and returning output other than error headers.

I won't be available to post back here for about an hour anyway, so this is good timing for you to get that sorted out while I'm gone...

[komplexbs]

Originally Posted by Rowsdower!

Ok, that's good that you have error reporting up for this step. And $_GET vs. $_POST is really not relevant in terms of making this script functional. If you want to adjust that later on you can, but it certainly isn't necessary.

Also, you may have missed it but I updated my last post to say that your ajax.php file is generating a 500 Internal Server Error response code and thus the script is not running for us.

Response status 500 errors (in my experience) usually are a result of invalid .htaccess changes. Have you been adjusting anything in your .htaccess files? Or are you not seeing the 500 error on your end? Because I sure as heck am seeing it here when I check my http headers...

There won't be anything more I can do to help until the ajax.php page is running again and returning output other than error headers.

I won't be available to post back here for about an hour anyway, so this is good timing for you to get that sorted out while I'm gone...

Ok, I fixed the error, thanks! See my post above, I edited it.

[komplexbs]

I'm going to try to remake the whole system and post the results in a few days Thanks to everyone for the help!

[komplexbs]

Thank you for the help guys, played around with it, learned some ajax and this is what worked for me in the end

function handleResponse(fieldid, stopper) {
    var ajax =  new XMLHttpRequest();
   
   if (stopper == 'x')
 {
    return;
 }
 
 if (ajax) {
 
    if (document.getElementById('zfield_'+fieldid)) {
        var fieldsetid = document.getElementById('zfield_'+fieldid).value;
 
        ajax.open('get', 'ajax.php?fieldsetid=' + encodeURIComponent(fieldsetid), true);
        ajax.send();
 
        ajax.onreadystatechange = function() {

          if (ajax.readyState == 4) {

      var nextfield = fieldid;
      nextfield++;
      var results = document.getElementById('zfield_'+nextfield);
      results.innerHTML = ajax.responseText;
 
                                    }
        }
    }
 
  }
}