How can I submit form using ajax - Photoshop

user3412321
January 30, 2015
189 views
0 votes
2 Answers

I want to show the output of polldemo1.php on poll.php page. But it is not happening. It is showing the poll.php page’s form again as output.
Please correct it.Also if anyone can explain me php with ajax, it would be really nice

poll.php

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<body>
<h3>SIG Polls</h3>
<form method="POST" id="myform" class="myform"  >
C/C++
<input type="checkbox" name="vote[]" value="0"  />
<br />
Java
<input type="checkbox" name="vote[]" value="1" />
<br />
Matlab
<input type="checkbox" name="vote[]" value="2" />
<br />
C#/.NET
<input type="checkbox" name="vote[]" value="3" />
<br />
PHOTOSHOP
<input type="checkbox" name="vote[]" value="4" />
<br />
CCNA
<input type="checkbox" name="vote[]" value="5" />
<br />
BASIC ELECTRONICS
<input type="checkbox" name="vote[]" value="6" />
<br />
<input type="submit" name="submit" value="vote" onclick="return submitForm()" />
</form>
<div id="myResponse"></div>
<script type="text/javascript">
function submitForm() {
var form = document.myform;

var dataString = $(form).serialize();


$.ajax({
    type:'POST',
    url:'polldemo1.php',
    data: dataString,
    success: function(data){
        $('#myResponse').text(data);
     }
});
return false;
}
</script>
</body>
</html>


polldemo1.php

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<?php
echo "hello";
//error_reporting(0);
if(isset($_POST['submit']))
{
 /*if (isset($_COOKIE["ieeepoll"]))
 {
  echo "<script>alert('You have already voted'); location.href='poll.php';</script>";
 } */
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$c        = $array[0];
$java     = $array[1];
$matlab   = $array[2];
$net      = $array[3];
$ph       = $array[4];
$ccna     = $array[5];
$be       = $array[6];
foreach($_POST["vote"] as $vote)
{
if ($vote == 0)
  {
  $c = $c + 1;
  }
if ($vote == 1)
  {
  $java = $java + 1;
  }
  if ($vote == 2)
  {
  $matlab = $matlab + 1;
  }

if ($vote == 3)
  {
  $net = $net + 1;
  }

if ($vote == 4)
  {
  $ph = $ph + 1;
  }

if ($vote == 5)
  {
  $ccna = $ccna + 1;
  }

if ($vote == 6)
  {
  $be = $be + 1;
  }

}
//insert votes to txt file
$insert = $c."||".$java."||".$matlab."||".$net."||".$ph."||".$ccna."||".$be;
file_put_contents($filename,$insert);
echo $be;
}
?>

Answers

try this it should help you.it will display the content of the file on poll.php on submit of form.

poll.php

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<body>
<h3>SIG Polls</h3>
<form method="POST" id="myform" class="myform"  >
C/C++
<input type="checkbox" name="vote[]" value="0"  />
<br />
Java
<input type="checkbox" name="vote[]" value="1" />
<br />
Matlab
<input type="checkbox" name="vote[]" value="2" />
<br />
C#/.NET
<input type="checkbox" name="vote[]" value="3" />
<br />
PHOTOSHOP
<input type="checkbox" name="vote[]" value="4" />
<br />
CCNA
<input type="checkbox" name="vote[]" value="5" />
<br />
BASIC ELECTRONICS
<input type="checkbox" name="vote[]" value="6" />
<br />
<input type="submit" name="submit" value="vote" onclick="return submitForm()" />
</form>
<div id="myResponse"></div>
<script type="text/javascript">
function submitForm() {
var dataString = $("#myform").serialize();


$.ajax({
    type:'POST',
    url:'index.php',
    data: dataString,
    success: function(data){
        $('#myResponse').text(data);
     }
});
return false;
}
</script>
</body>

    </html>

polldemo1.php

<?php
echo "hello";
//error_reporting(0);
if(isset($_POST))// do not check for submit here it won't go with post
{
 /*if (isset($_COOKIE["ieeepoll"]))
 {
  echo "<script>alert('You have already voted'); location.href='poll.php';</script>";
 } */
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$c        = $array[0];
$java     = $array[1];
$matlab   = $array[2];
$net      = $array[3];
$ph       = $array[4];
$ccna     = $array[5];
$be       = $array[6];
foreach($_POST["vote"] as $vote)
{
if ($vote == 0)
  {
  $c = $c + 1;
  }
if ($vote == 1)
  {
  $java = $java + 1;
  }
  if ($vote == 2)
  {
  $matlab = $matlab + 1;
  }

if ($vote == 3)
  {
  $net = $net + 1;
  }

if ($vote == 4)
  {
  $ph = $ph + 1;
  }

if ($vote == 5)
  {
  $ccna = $ccna + 1;
  }

if ($vote == 6)
  {
  $be = $be + 1;
  }

}
//insert votes to txt file
$insert = $c."||".$java."||".$matlab."||".$net."||".$ph."||".$ccna."||".$be;
file_put_contents($filename,$insert);
echo $insert;
}
?>

Add onsubmit event in for html form attribute as following

<form method="POST" id="myform" class="myform" onsubmit="return false" >

You can manage above thing by jQuery also, just need to modify your javascript code something like this.

$("#myform").on('submit', function (event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'polldemo1.php',
        data: $("#myform").serialize(),
        success: function (data, status) {
            //do whatever you want to do
        },
        error: function (err) {
            //do wahtever you want to do
        }
    });
});
//OR
$("#myform").on('submit', function (event) {
    event.preventDefault();
    submitForm();
});

Also you don’t need to keep any html attribute in you php script. Remove all html tags from that script.

Please signup or login to give your own answer.

Click here to cancel reply.

How can I submit form using ajax – Photoshop

Answers