current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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";
?>
share|improve this question
2  
What are you trying to do? get the PHP script to return "content" upon #q2-submit click event? –  echolocation Mar 21 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 Mar 21 at 16:31
    
so what's the problem? is js not working? "content" is not returned? what? –  pjp Mar 21 at 16:32
    
yes the js is not working. @echolocation yes I am. –  laycat Mar 21 at 17:13
    
you shouldn't use click event, you should use submit event for form –  decker Mar 21 at 17:22
show 6 more comments

2 Answers

up vote 2 down vote accepted

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);

?>
share|improve this answer
    
trying this out now (: –  laycat Mar 21 at 17:15
    
added CodePen demo –  decker Mar 21 at 17:29
    
it still doesn't return "content" in content div do you mind taking a look have updated the new edits –  laycat Mar 21 at 17:47
1  
@laycat I forgot () on .serialize() –  decker Mar 21 at 19:00
add comment
up vote -1 down vote

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

});
share|improve this answer
    
why was this downvoted? –  laycat Mar 21 at 17:25
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.