How do I use javascript to send selected value of drop down list to mysql database and no get object HTML selectelement error?

Question

5.00/5 (1 vote)

See more:

please i need help the the right javascript code to send a selected value of the options in a drop down list to a php database..the values are sent to the database but shows object HTML SelectElement instead of the actual value of the drop down options.
Here is the code am using..

HTML

HTML

<html>
    <select id="rhymes" name="rhymes"  onChange="getSelectedValue();">
    <option value='-None-'>-Select One-</option>
    <option value='food'>food</option>
    <option value='dude'>dude</option>
    <option value='good'>good</option>
    <option value='mood'>mood</option>
    </select>
</html>

JS

JavaScript

function getSelectedValue () {
    var interest = document.getElementById('rhymes').selectedIndex;
    var options = document.getElementById('rhymes').options;
    alert("text="+document.getElementById('rhyme').options[interest].text);

    http.open('get', 'quote.php?i='+interest+);
    document.getElementById('report2').innerHTML = "<div style='margin:20px 0px 0px 60px;'>          <span style='color:#999;'>Loading</span></div>";
    http.onreadystatechange = insertQReply;
    http.send(null);

    function insertQReply() {

        if(http.readyState == 4){
            var response = http.responseText;
            document.getElementById('report2').innerHTML = ''+response;
        }
    }
}

Posted 7-Jul-14 4:15am

Gavcee

Updated 27-May-16 13:18pm

Patrice T

v3

Add a Solution

Comments

Patrice T 27-May-16 19:21pm

Sorry, didn't see the date

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2014-07-07T05:34:00

Solution 1

Not able to tell from what you've submitted, but there are two main routes to what you wish to do:

HTML <<form>> where you set your php procedure for database access as the target of action=

AJAX - a javaScript call to a php file that does your job, and possibly updates your screen, as well.

To get your started, should these be 'alien' concepts, I would point you to:
Forms[^]
AJAX[^]

Posted 7-Jul-14 5:34am

W∴ Balboos, GHB

Comments

Gavcee 8-Jul-14 6:37am

Thank for your suggestion but i think i might be asking the wrong questions.the tin is i have a form that contains a drop down list and some other fields. a user is supposed fill the form and submit then the values are sent to a database. Now all the other values are sent to the database except those of the drop down list. Apparently the javascript i unable to send the selected values of the drop down to the php server.
the code i pasted above was what i used for the drop down list...here is the JS for the whole form

function signup() {

var webaddr= encodeURI(document.getElementById('webaddr').value);
var requirements= encodeURI(document.getElementById('requirements').value);
var funame= encodeURI(document.getElementById('funame').value);
var lname= encodeURI(document.getElementById('lname').value);
var quotemail= encodeURI(document.getElementById('quotemail').value);
var cname= encodeURI(document.getElementById('cname').value);
var tel= encodeURI(document.getElementById('tel').value);

// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'signup.php?i='+interest+'&w='+webaddr+'&r='+requirements+'&f='+funame+'&l='+lname+'&q='+quotemail+'&c='+cname+'&t='+tel+'&nocache = '+nocache);
document.getElementById('report2').innerHTML = "
Loading
";
http.onreadystatechange = insertQReply;
http.send(null);
}
function insertQReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('report2').innerHTML = ''+response;
}
}
}
this works well..but if i include the code for the drop down list like this,

function signup() {

function getSelectedValue() {
var SelectedValue = document.getElementById('interest').selectedIndex;
var Options = document.getElementById('interest').options;
alert(document.getElementById('interest').options{index}.value);

var webaddr= encodeURI(document.getElementById('webaddr').value);
var requirements= encodeURI(document.getElementById('requirements').value);
var funame= encodeURI(document.getElementById('funame').value);
var lname= encodeURI(document.getElementById('lname').value);
var quotemail= encodeURI(document.getElementById('quotemail').value);
var cname= encodeURI(document.getElementById('cname').value);
var tel= encodeURI(document.getElementById('tel').value);

nocache = Math.random();
http.open('get', 'signup.php?i='+interest+'&w='+webaddr+'&r='+requirements+'&f='+funame+'&l='+lname+'&q='+quotemail+'&c='+cname+'&t='+tel+'&nocache = '+nocache);
document.getElementById('report2').innerHTML = "
Loading
";
http.onreadystatechange = insertQReply;
http.send(null);
}
function insertQReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('report2').innerHTML = ''+response;
}
}
}
..then just displays the value on the page instead of sending it to database..

i really hope his whole thing i not too much trouble for you..am still trying to master javascript.

Patrice T 27-May-16 19:17pm

Use Improve question to update your question.
So that everyone can pay attention to this information.

Sorry, didn't see the date

Chimdikweks · Answer 2 · 2014-07-08T13:16:00

Solution 3

Ok, No need for the extra function in the javascript, all you need to do is to add the "id" to each of the option values of the dropdown, so that the javascript gets the id for each of the options selected by the user.

Hope this is not confusing.
I know it will work.

Posted 8-Jul-14 13:16pm

Chimdikweks