Solved

submitting and calling a function onChange

Posted on 2011-03-25
5
550 Views
Last Modified: 2012-05-11
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
Comment
Question by:JolineZ
5 Comments
 
LVL 5

Expert Comment

by:tsmgeek
Comment Utility
<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
 
LVL 2

Accepted Solution

by:
ajones2600fl earned 250 total points
Comment Utility
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
 
LVL 9

Assisted Solution

by:erdincgc
erdincgc earned 250 total points
Comment Utility
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
 

Author Closing Comment

by:JolineZ
Comment Utility
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
 
LVL 9

Expert Comment

by:erdincgc
Comment Utility
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now