CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
rafalefighter
rafalefighter

Reputation: 734

Send different values usign HTML button attached to same ID

I'm making small PHP application for retrieve some categorized records. Since I need to retrieve php records dynamically without reloading the page I use JQuery to send XMLHTTP value to PHP script. In this application I have six HTML button for six categories. and one select box for select a number. When user click one of this button it should send both button value and select box value to another PHP script. since I'm using jquery to capture the button values I have to set all the button id's to same. all buttons have on-click event to fire java-script function. My problem is since those six button have six different values how can I send those values through XMLHTTP method ?

this is my HTML code 

<select id="number">
    <option value="30">30</option>
    <option value="60">60</option>
    <option value="90">90</option>
</select>
<button type="button" value="test1" id="btnval" onclick="loadXMLDoc()">test1</button>
<button type="button" value="test2" id="btnval" onclick="loadXMLDoc()">test2</button>
<button type="button" value="test3" id="btnval" onclick="loadXMLDoc()">test3</button>
<button type="button" value="test4" id="btnval" onclick="loadXMLDoc()">test4</button>
<button type="button" value="test5" id="btnval" onclick="loadXMLDoc()">test5</button>
<button type="button" value="test6" id="btnval" onclick="loadXMLDoc()">test6</button>
<button type="button" onclick="loadXMLDoc()">Search</button>

since all of these six buttons have same ID Jquery can't identified the values correctly

this is my jquery code

    function loadXMLDoc() {

        var xmlhttp;
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("loadingDiv").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "test2.php?submit=" + btnval.value + "&datebetween=" + number.value, true);
        xmlhttp.send();
    }

How can I send both select box value and six different button values to php script ?

this is a sample of my front end interface front end sample image

Upvotes: 1

Views: 482

Answers (3)

user4635145
user4635145

Reputation:

Using different ids will work as long as you have onclick="loadXMLDoc(this.value)" on each button. this.value carries value of whichever button invoked the function.

Also, if you are trying to use jQuery, then, that's not jQuery, that's javascript you are using.

Upvotes: 1

rafalefighter
rafalefighter

Reputation: 734

I have manage to solve this using get clicked button value through java-script

this is my working java-script code 

function loadXMLDoc(btnval) {

            var xmlhttp;
            if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("loadingDiv").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "test2.php?submit=" + btnval.value + "&datebetween=" + number.value, true);
            xmlhttp.send();


    }

and I send parameter with html button onlcik 

<button type="button" value="test1"  id="btnval" onclick="loadXMLDoc(this)">test1</button>

thanks for the support !!

Upvotes: 0

archimede
archimede

Reputation: 736

I don't understand why you want to send "six different button values to php script": I suppose your php code only needs to know which of the six buttons was pressed.

If this is the case, can't you simply add a parameter to your function

function loadXMLDoc(buttonPressed)

and then modify each button with a different parameter value

<button type="button" value="test1" onclick="loadXMLDoc(1)">test1</button>
<button type="button" value="test2" onclick="loadXMLDoc(2)">test2</button>

etc.?

Upvotes: 2

Related Questions