Ajax Html Forms with PHP, Jquery and MYSQL,

Question

I understand this question may be entirely juvenile however I have been trying to debug it for an entire afternoon, not using an IDE other than sublime. would be really glad to receive any help and format this question nicely for future begineers when it works.

currently

my html.

<?php
  //connect to the server & database
  $connect = mysqli_connect('localhost','root','root','ikea');

  if(!$connect)
  {
    echo "failed to connect ".mysqli_connect_error();
  }
  // query the database
  $query = 'SELECT * from department 
            where iconpath Like "image%"
            order by name asc';
  $result = mysqli_query($connect,$query);

  // retrieve the resultset
  while( $row[] = $result->fetch_object());
?>
    <form id="question2" method="POST">
        <div class="form-group input-group">
          <select style="width:8.7cm;" id="member_choice" class="form-control">
            <option value="">-- Select One --</option>
            <?php foreach($row as $option) : ?>
              <option value="<?php echo $option->name; ?>"><?php echo $option->name; ?></option>
            <?php endforeach; ?>
          </select><br/><br/>
           <button id="q2-submit" name="q2-submit" style="margin-left:5cm;" type="submit" class="btn btn-default btn-add"> Get Departments! </button>
        </div>
        </form>

my jquery

$('#question2').on('submit', function() 
{
   alert("submit!");

    // AJAX STUFF HERE
    $.post('q3.php', function(data)
    {
        console.log("here1");
        $(".return").html(data);
    });
});

and currently experimenting with my php trying to get it to return "content"

<?php
   echo "content";
?>

What are you trying to do? get the PHP script to return "content" upon #q2-submit click event? — echolocation
– echolocation, Commented Mar 21, 2014 at 16:27
OT: the label is useless. It needs the for attribute to point at the id of the form element it is supposed to be associated with. — Ryan B
– Ryan B, Commented Mar 21, 2014 at 16:31
so what's the problem? is js not working? "content" is not returned? what? — Praveen Puglia
– Praveen Puglia, Commented Mar 21, 2014 at 16:32
you shouldn't use click event, you should use submit event for form — ryanwinchester
– ryanwinchester, Commented Mar 21, 2014 at 17:22

ryanwinchester · Accepted Answer · 2014-03-21 18:50:05Z

2

Your question keeps changing. Honestly, I recommend you go through a tutorial on how to submit a form using AJAX with jQuery, like this one.

You should use submit handler instead of a click handler. Also your selector is wrong.

HTML

added name attribute to the <select> tag.

<form id="question2" method="POST" action="q2.php">
  <div class="form-group input-group">
    <label>Select Member Card Number</label>
    <select name="member_choice" style="width:8.7cm;" id="member_choice" class="form-control">
      <option value="">-- Select One --</option>
      <?php foreach($row as $option) : ?>
        <option value="<?php echo $option->name; ?>"><?php echo $option->name; ?></option>
      <?php endforeach; ?>
    </select><br/><br/>
     <button style="margin-left:5cm;" type="submit" class="btn btn-default btn-add"> Get Departments! </button>
  </div>
</form>

<div id="content"></div>

JQUERY

$('#question2').on('submit', function(event) 
{
    // stop form from submitting normally
    event.preventDefault();

    var $form = $(this);
    var url = $form.attr('action');

    $.post(url, $form.serialize(), function(data)
    {
        console.log("here1");
        $('#content').html(data.content);
    });

});

PHP (q2.php)

<?php

    $content = $_POST['member_choice'];

    echo json_encode($content);

?>

edited Mar 21, 2014 at 18:50

answered Mar 21, 2014 at 16:36

ryanwinchester

12.2k5 gold badges31 silver badges45 bronze badges

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

3 Comments

laycat Over a year ago

trying this out now (:

laycat Over a year ago

it still doesn't return "content" in content div do you mind taking a look have updated the new edits

ryanwinchester Over a year ago

@laycat I forgot () on .serialize()

Wilmer · Accepted Answer · 2014-03-21 16:36:07Z

-1

Your click handler doesn't prevent the form from submitting (the page gets refreshed) so you never see the ajax response. Use a submit handler instead:

$('#question2').on('submit',function(e) 
{
    var name = $('#department_choice :selected').val();
        console.log("here");
        $(".return").html("asdad");

    $.post('q2.php', function(data)
    {
        console.log("here1");
        $(".return").html(data);
    });

    return false;//prevent form submit

});

answered Mar 21, 2014 at 16:36

Wilmer

2,5091 gold badge14 silver badges8 bronze badges

Collectives™ on Stack Overflow

Ajax Html Forms with PHP, Jquery and MYSQL,

2 Answers 2

HTML

JQUERY

PHP (q2.php)

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

HTML

JQUERY

PHP (q2.php)

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related