Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

submitting and calling a function onChange

Posted on 2011-03-25
5
553 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
ID: 35221625
<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
ID: 35221689
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:Erdinç Güngör Çorbacı
Erdinç Güngör Çorbacı earned 250 total points
ID: 35222195
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
ID: 35223206
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:Erdinç Güngör Çorbacı
ID: 35223381
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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 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