Submitting radio buttons using PHP and AJAX

Question

I am having trouble in submitting radio input values using PHP and AJAX. I've constructed the code below, but I can't seem to get it to work. Any ideas? The values of the radio fields need to pass only when the button is pressed

    <script>
    function showUser(str) {
      if (str == "myvalue") {
        document.getElementById("txtHint").innerHTML = "";
      /// location of new code -start
      document.querySelector('input[name="users"]:checked').value;
      /// location of new code -end
        return;
      } else {
        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 (this.readyState == 4 && this.status == 200) {
            document.getElementById("txtHint").innerHTML = this.responseText;
          }
        };
        xmlhttp.open("GET", "ajax-php.php?q=" + str, true);
        xmlhttp.send();

      }
    }

    </script>

    <form>
      <input type="radio" name="users" value="1">
      <input type="radio" name="users" value="2">
      <!-------unable to pass value----------->
      <input type="button" value="myvalue" onclick="showUser(this.value)">

      <!-------unable to pass value----------->
    </form>

    <div id="txtHint">echo results here</div>

ajax-php.php

<?php
$q = intval($_GET['q']);

echo $q;
?>

Thank you.

You have onclick="showUser(this.value)" on your <input type="button">, but it doesn't have a value. You need to get the radio value -> onclick=showUser(document.getElementByName("users").value)" — Sean
– Sean, Commented Aug 28, 2017 at 3:55
Thanks would you be able to put it in an example please? I've tried putting the onclick function on the button, but its still not working — Mason
– Mason, Commented Aug 28, 2017 at 4:25
@Mason, Paste your ajax-php.php code too. I didn't see any data (radio value) that you are trying to send. You should use post method to post radio value.If you want to use get method then somehow you should append the value in your url. — Ataur Rahman Munna
– Ataur Rahman Munna, Commented Aug 28, 2017 at 5:33

flauntster · Accepted Answer · 2017-08-28 03:53:03Z

1

Your 'this.value' parameter being passed to your showUser function is scoped to the element with the onclick function. So it is trying to send the value of the button element which has no value.

answered Aug 28, 2017 at 3:53

flauntster

2,01614 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mason Over a year ago

Thanks @flauntster :), so how to do pass the values of the radio fields using the button. if the button has value, then it would ignore the values of the radio fields

Mahbubul Islam · Accepted Answer · 2017-08-28 06:31:52Z

0

What you are doing is fine.

<input type="button" onclick="showUser(this.value)">

The function showUser is called by the button type input field. And the field has no value.

If you want to send any value then use value attribute. For example:

<input type="button" value="mayValue" onclick="showUser(this.value)">

To access the radio button value you can use this code.

document.querySelector('input[name="users"]:checked').value;

To send the radio button value follow the code bellow

//xmlhttp.open("GET", "ajax-php.php?q=" + str, true);
xmlhttp.open("GET", "ajax-php.php?q=" + document.querySelector('input[name="users"]:checked').value, true);

edited Aug 28, 2017 at 6:31

answered Aug 28, 2017 at 3:56

Mahbubul Islam

1,0181 gold badge12 silver badges24 bronze badges

11 Comments

Mason Over a year ago

thanks @Mahbubul Islam I've tired your solution, it almost worked, but the values of the radio fields are not passing, they're passing as 0 only. any ideas? thanks

Mahbubul Islam Over a year ago

You are not trying to get the radio button value.

Mason Over a year ago

Oh right! so would I where would i put the document.queryselector? do I place it inside the button? or make a separate function for it. THANKS

Mahbubul Islam Over a year ago

Put the code where you want to get the value. That can be anywhere in your showUser function or other function.

Mason Over a year ago

Hmm, what you've done makes perfect sense. but its still not working. Here is what I did jsfiddle.net/z47z15zg THanks

|

Collectives™ on Stack Overflow

Submitting radio buttons using PHP and AJAX

2 Answers 2

1 Comment

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related