[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 560
  • Last Modified:

submitting and calling a function onChange

Hi!

I'm doing some volunteer work for an organization and the stuff they want might be putting me a little out of my depth.  I am sure there are better ways to do this, but what I am trying to do is:

select an option from a drop down list, create a number of new form entries based on that select option, then limit some of the options in the new form elements based on a number from a database - the number in the database is based on the first select.

Currently - I am trying to do it like this:

use onChange to call a javscript function, then use document.submit() to submit the form, so that I can get the POST variable and use it to get my field from the database.

The problem is - the way I am currently doing this works - but only for a second - then the page resets and all the dynamic form elements disappear.  Is there any way to stop that from happening?

I'd appreciate any advice -  I've been searching for an answer and I am getting a sneaking suspicion that that the real way to do this might be to use AJAX, but I am really hoping to avoid it, since I have never used it in the past.


<form method ="POST" name = "chooseCourse" action = "">
<select name = "course" onChange = "addOptions();">
<!-- addOptions adds the radio box options to each course selection, function in file jsOptions.js -->
  <option value=""> </option>
  <option value="GRR">Girl's Rock n Roll Retreat - $395</option>
  <option value="WJS">Women's Jam Shop - $295</option>
  <option value="WGC">Women's Guitar - $150</option>
  <option value="GGC">Girl's Guitar - $150</option>
</select>
</form>
//new form
<form method = "POST" name = "test" action = "Step2.php">
//divs for dynamic form elements
<div id = "rbox"></div>
<div id = "rbox2" style="display:inline"></div>
<div style="display:inline" id = "qh"></div>
<br />
<div id = "rbox3" style="display:inline"></div>
<div id = "rh" style="display:inline"></div>
<br />

javascript function:

function addOptions()
{
	var user_input = document.chooseCourse.course.value;
	document.chooseCourse.submit(); 

if (counter > 0)
{
window.location.replace('http://www.sherocksherock.com/Step1b.php')
}

		if (user_input == "GRR")
		{
			addGRROptions();
		}
		
		if (user_input == "WGC")
		{
			addWJSOptions();
		}
		
//several more options
		
		counter++;
}

function addWGCOptions()
{
//example of one of the functions I am using to create the javascript elements.
document.getElementById("rbox").innerHTML=("Please choose your level of experience:");
	var qlh = document.getElementById("qh");
	var sButton = document.getElementById("sbt");
	
	var levels = document.createElement('select');
	levels.setAttribute("name", "level");
		levels.options[0] = new Option("Beginner", "Beginner");
	  	levels.options[1] = new Option("Intermediate - 21+ only", "Intermediate");
	
	var submitting = document.createElement('input');
		submitting.setAttribute("name", "Submit");
		submitting.setAttribute("type", "submit");
		submitting.setAttribute("value", "Submit");
		
		
		qlh.appendChild(levels);
		sButton.appendChild(submitting);
}

Open in new window

0
JolineZ
Asked:
JolineZ
2 Solutions
 
tsmgeekCommented:
<form method ="POST" name = "chooseCourse" action = "">
<select name="course" id="course" onChange="addOptions(this.options[this.selectedIndex].value);">
  <option value=""> </option>
  <option value="GRR">Girl's Rock n Roll Retreat - $395</option>
  <option value="WJS">Women's Jam Shop - $295</option>
  <option value="WGC">Women's Guitar - $150</option>
  <option value="GGC">Girl's Guitar - $150</option>
</select>
</form>


//new form
<form method = "POST" name = "test" action = "Step2.php">
//divs for dynamic form elements
<div id = "rbox"></div>
<div id = "rbox2" style="display:inline"></div>
<div style="display:inline" id = "qh"></div>
<br />
<div id = "rbox3" style="display:inline"></div>
<div id = "rh" style="display:inline"></div>
<br />

javascript function:

var course_counter=0;

function addOptions(user_course)
{
    if(user_course != "" && course_counter < 1){
        switch(user_course){
                case "GRR":
                    course_counter++;
                    addGRROptions();
                    break;
                case "WGC":
                    course_counter++;
                    addWGCOptions();
                    break;
                default:
                    alert('err');
        }
    }elseif(user_course == "" && course_counter >= 1){
        window.location.replace('http://www.sherocksherock.com/Step1b.php')
    }
}

function addWGCOptions()
{
//example of one of the functions I am using to create the javascript elements.
document.getElementById("rbox").innerHTML=("Please choose your level of experience:");
        var qlh = document.getElementById("qh");
        var sButton = document.getElementById("sbt");
        
        var levels = document.createElement('select');
        levels.setAttribute("name", "level");
                levels.options[0] = new Option("Beginner", "Beginner");
                levels.options[1] = new Option("Intermediate - 21+ only", "Intermediate");
        
        var submitting = document.createElement('input');
                submitting.setAttribute("name", "Submit");
                submitting.setAttribute("type", "submit");
                submitting.setAttribute("value", "Submit");
                
                
                qlh.appendChild(levels);
                sButton.appendChild(submitting);
}

Open in new window


etc...but
you could do this all in js but also in php which would be easier
i would add the courses to a array list with simple JS, then post them to the server, get php to render the next page in the signup process
0
 
ajones2600flCommented:
This is what I would do, I would change the New Form you have to a <div> instead of a second form. Control whether that <div> is shown by your javascript in the onChange event. There is no need for two forms on this page. When you are ready to retrieve the data from the database, I would create a second javascript function that would make an AJAX call to a php page. The php page would retreive the data from the database and return it back to the javascript. Do whatever you need to do with the data that gets returned.

If you need a little example on how to do this, let me know. I can whip one up for you pretty quick.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
Unless you use AJAX or Frame's (i prefer first one) your first form will post the form on submit and page will be refreshed.

Normally refreshin might not be problem by using only one form which's action is determined by PHP (if first form is submitted change action to second form's action).

But what you want is indeed a CHAINED SELECTION which i had shown some samples in posts below;

http://www.experts-exchange.com/Database/MySQL/Q_26725767.html 
(look at last post with attachments especially)

or

http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

or you may try the old fashioned way

http://www.yxscripts.com/cs/chainedselects.html

But i'm sure after downloading example which is in my response and changing it step by step you will leard the right usage.

BTW: You'd better give up using onChange .... W3C accepted syntax is onchange (all lowercase)
0
 
JolineZAuthor Commented:
Hi - I just split the points between you guys, because I think you are right - to do it well, the best way is to use AJAX.  I may come back with more questions about AJAX in the near future - but thank you both for your help - I feel confident that moving forward in this direction is going to be fruitful and worth the time.

Thanks also for the code prompts, erdincgc - I will definitely make use of them.
0
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
Thanks , your welcome. if you need to work with AJAX and don^t have enough time to learn all about . Better just start using AJAX though JQUERY. You will only need 30 mins to learn usage at most.

You may start diggin from the example i gave above (It's the simplest and clean usage sample)
or start from here ;

http://api.jquery.com/jQuery.ajax/

Don't be afraid of undertaking summary of the page in the link above is just this ;

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

PS: English is not my native language and your pronunciation and word choices are much more better than any native English.  i'm telling this so ,i'll be glad to anwer your new -so well- asked questions gladly.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now