Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

submitting and calling a function onChange

Posted on 2011-03-25
5
Medium Priority
?
559 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
[X]
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
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 1000 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 1000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…
Suggested Courses

636 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