HTML PHP show form submit results on same page

Question

I am trying to make a set of webpages that will display a unique graph based on a simple form that only has a selector box and a submit button. Basically what I want to happen is when the user changes the month in the selector and presses submit, a new chart set will render on the same page.

Here is the HTML initial page:

<HTML>
<HEAD>
    <SCRIPT src="http://code.jquery.com/jquery-1.10.1.min.js"></SCRIPT>
</HEAD>
<BODY>
    <CENTER>
        <FORM ID="form1" METHOD="post" ACTION="">
            <SELECT NAME="monthSelector">
                <OPTION VALUE="0">Select Month...</OPTION>
                <OPTION VALUE="1">January</OPTION>
                <OPTION VALUE="2">February</OPTION>
                <OPTION VALUE="3">March</OPTION>
                <OPTION VALUE="4">April</OPTION>
                <OPTION VALUE="5">May</OPTION>
                <OPTION VALUE="6">June</OPTION>
                <OPTION VALUE="7">July</OPTION>
                <OPTION VALUE="8">August</OPTION>
                <OPTION VALUE="9">September</OPTION>
                <OPTION VALUE="10">October</OPTION>
                <OPTION VALUE="11">November</OPTION>
                <OPTION VALUE="12">December</OPTION>
            </SELECT>
            <INPUT TYPE="submit" VALUE="Show Charts">
        </FORM>

        <DIV ID="response"></div>

        <SCRIPT>
            function submit()
            {
                $(function()
                {
                    var month = 3;
                    var formdata = "month=" + month;
                    $.ajax({
                        type: 'POST',
                        url: 'showCharts.php',
                        data: formdata,
                        success: function(data) {
                            $("#response").html(data);
                        }
                    });
                });
            }
        </SCRIPT>
    </CENTER>
</BODY>
</HTML>

and here is showCharts.php:

<?php
    include("../FusionCharts/FusionCharts.php");
    include("../DBConnect.php");

    $month = $_POST['month'];
    echo $month;
    //insert complex queries and fusioncharts code that already works!
?>

Someone please help me, I've been staring at this for hours and can't make any progress.

You're using NAME="monthSelector" and $_POST['month'] try changing it to NAME="month" that ought to fix it. — Funk Forty Niner
– Funk Forty Niner, Commented Jun 30, 2014 at 18:17
@Fred-ii- that's because he statically sets month=3 in the ajax.. what I don't get is what would make the submit function run when the form is submitted.. — mishu
– mishu, Commented Jun 30, 2014 at 18:18
I always get mixed up with Ajax stuff. But when I see a (named) POST variable that doesn't match, it makes me raise a brow. @mishu — Funk Forty Niner
– Funk Forty Niner, Commented Jun 30, 2014 at 18:19

DavidT · Accepted Answer · 2014-06-30 19:35:38Z

1

You can also use the .load method of jQuery:

function submit()
        {
             var month = 3;
             var formdata = month;
             $('#response').load('showCharts.php?month='+formdata);
        }

Also, you will need to set:

$month = $_REQUEST['month'];

edited Jun 30, 2014 at 19:35

answered Jun 30, 2014 at 18:22

DavidT

4616 silver badges17 bronze badges

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

1 Comment

PeterKA Over a year ago

The URL expands to showCharts.php?month=month=3

DavidT · Accepted Answer · 2014-06-30 19:40:34Z

1

Another way to do it would be:

$('select').change(function() {
          var formdata = { month: document.getElementsByName('monthSelector')[0].value };
          $('#response').load( 'showCharts.php', formdata);
      });

answered Jun 30, 2014 at 19:40

DavidT

4616 silver badges17 bronze badges

Comments

maduranma · Accepted Answer · 2014-06-30 18:27:51Z

0

Try replacing

<FORM ID="form1" METHOD="post" ACTION="">

for

<FORM ID="form1" METHOD="post" ONSUBMIT="submit(); return false;">

It should work.

In the part of jQuery, put this:

function submit()
{
    var month = $('select[name="monthSelector"]').val();
    $.ajax({
        type: 'POST',
        url: 'showCharts.php',
        data:{'month':month},
        success: function(data)
        {
            $("#response").html(data);
        }
    });
}

One more thing: try to improve the HTML code, it will give a better image to your webpage.

answered Jun 30, 2014 at 18:27

maduranma

2051 silver badge8 bronze badges

Comments

SyntaxTerror · Accepted Answer · 2014-06-30 18:28:41Z

0

Are you sure the submit function is even called? Do you bind the form's submit event at all?

I would do something like $("#form1").submit(submit);

Also, you should return false at the end of submit() to block the default form action (which is refresh the current page I believe)

answered Jun 30, 2014 at 18:28

SyntaxTerror

3561 silver badge10 bronze badges

1 Comment

SyntaxTerror Over a year ago

I see it, but it is, like you said, within the function. What calls the function in the first place?

sreisman · Accepted Answer · 2014-06-30 18:30:32Z

0

Try to update the variable formdata to make it a json object rather than a string.

<SCRIPT>
            function submit()
            {
                $(function()
                {
                    var month = 3;
                    var formdata = {'month': month}; //change made here
                    $.ajax({
                        type: 'POST',
                        url: 'showCharts.php',
                        data: formdata,
                        success: function(data) {
                            $("#response").html(data);
                        }
                    });
                });
            }
        </SCRIPT>

answered Jun 30, 2014 at 18:30

sreisman

6684 gold badges10 silver badges25 bronze badges

1 Comment

PeterKA Over a year ago

$.ajax() will convert the object back to a query string anyway before making the request.

PeterKA · Accepted Answer · 2014-06-30 18:52:33Z

0

Your jQuery code should be as follows:

$(function() {
      var month = 3;
      var formdata = { month: month };
      $('#response').load( 'showCharts.php', formdata );

      $('#form1').submit(function( e ) {
          e.preventDefault();
          var formData = { month: this.monthSelector.value };
          $('#response').load( 'showCharts.php', formData);
      });
});

When using the ajax .load() method, here is what you should be aware of:

Request Method

The POST method is used if data is provided as an object; otherwise, GET is assumed.

Therefore, with the above jQuery code, your PHP script need not be changed.

edited Jun 30, 2014 at 18:52

answered Jun 30, 2014 at 18:30

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

HTML PHP show form submit results on same page

6 Answers 6

1 Comment

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related