CODEWITHSUNDEEP
javascriptphpjqueryalert
Darrius
Darrius

Reputation: 177

Page is reloaded inside alert window

This was suppose to get the id of the checked radio using jQuery and $_POST['points'] and echo it in add.php

add.php:

  <div class="col-md-10">
    <form role="form" method="POST">
      <div class="radio">
        <label><input type="radio" name="optradio" id="1"> Leadership </label>
        <label><input type="radio" name="optradio" id="2"> Management </label>
        <label><input type="radio" name="optradio" id="3"> Distribution </label>
      </div>

      <div>
      <?php
        if (isset($_POST['points'])) 
        {
          echo $_POST['points']." is the value";
        }
        else
          echo 'none';
      ?>
      </div>
    </form>
  </div>

Javascript:

$("input[type=radio]").on("click",function()
{
    var value=($('input[type=radio]  [name=optradio]:checked').attr('id'));

    $.post("./add.php", {points: value}, function(data)
    {
      alert(data);
    });
});

However, everytime I click on a radio button, it displays an alert popup window and reloads the whole add.php code INSIDE the alert popup window instead of echo it via $_POST['points'] in add.php. The page echos 'none' and the value at $_POST['points'] is correct in the alert popup window.

*NOTE: The JS files are already loaded

I figured out that it echos none because the radio buttons are not yet checked/clicked. But the page does not load after I click a radio button but the page is reloaded inside the alert window.

Is there something I'm missing or I should've done other than alert? OR Is there another way of getting the id of the checked radio?

EDIT<<<<<< Probably most of you suggested to use .text instead of echo to display the data. What I really want to do is save the value of $_POST['points']. The value is saved but the page is reloaded inside alert window.

  <div class="col-md-10">
    <form role="form" method="POST">
      <div class="radio">
      <?php
        foreach(returnFromTable($GLOBALS['table_key_area']) as $keyarea)
        {
          echo '<label><input type="radio" name="optradio" id="'.$keyarea['id'].'">'.$keyarea['description'].'&nbsp</label>';
        }
      ?>
      </div>

      <div>
      <?php
        if (isset($_POST['points'])) 
        {
          $x = $_POST['points'];
        }
        else
          echo 'none';
      ?>
      </div>
    </form>
  </div>

Upvotes: 1

Views: 80

Answers (4)

M4R1KU
M4R1KU

Reputation: 718

Since you are using a $.post call which is equivalent to the $.ajax (type: post) call, the server will return the same response as it would if you just type add.php in the url.

You don't have to make an ajax call you can just write the id with javascript/jQuery.

$("#some-text-container").text(value);

Insert this instead of the post call.

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

You don't need ajax for this:

<div class="col-md-10">
    <form role="form" method="POST">
      <div class="radio">
        <label><input type="radio" name="optradio" id="1"> Leadership </label>
        <label><input type="radio" name="optradio" id="2"> Management </label>
        <label><input type="radio" name="optradio" id="3"> Distribution </label>
      </div>

      <div class="result">
      none
      </div>
    </form>
  </div>

js: 

$("input[type=radio]").on("click",function()
{   var value = 'none';
        value = $('input[type=radio]  [name=optradio]:checked').attr('id');
    $('.result').text(value+'is the value')
});

Upvotes: 1

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

Please try this: 

<?php
  if (isset($_POST['points'])) 
  {
      echo $_POST['points']." is the value";
  }
  else
          ?>
<div class="col-md-10">
    <form role="form" method="POST">
      <div class="radio">
        <label><input type="radio" name="optradio" id="1"> Leadership </label>
        <label><input type="radio" name="optradio" id="2"> Management </label>
        <label><input type="radio" name="optradio" id="3"> Distribution </label>
      </div>

      <div>
      </div>
    </form>
  </div>
<?php } ?>

Upvotes: 0

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5049

You need to change 2 things in your script:

1) Use $('input[name=optradio]:checked').attr('id') for getting Id

2) Use 'points' instead of points in post request

$("input[type=radio]").on("click",function()
  {   
      var value=($('input[name=optradio]:checked').attr('id'));

      $.post("viewport.php", {'points': value}, function(data)
      {
        alert(data);
      });
  });

Upvotes: 1

Related Questions