Call a PHP function after onClick HTML event

Question

Purpose: Call a PHP function to read data from a file and rewrite it. I used PHP only for this purpose - FileIO - and I'm new to PHP.

Solution? I tried through many forums and knew that we cannot achieve it normal way: onClick event > call function. How can we do it, are there other ways, particularly in my case? My HTML code and PHP code is on the same page: Admin.php. This is HTML part:

<form>
    <fieldset>
        <legend>Add New Contact</legend>
        <input type="text" name="fullname" placeholder="First name and last name" required /> <br />
        <input type="email" name="email" placeholder="[email protected]" required /> <br />
        <input type="text" name="phone" placeholder="Personal phone number: mobile, home phone etc." required /> <br />
        <input type="submit" name="submit" class="button" value="Add Contact" onClick="" />
        <input type="button" name="cancel" class="button" value="Reset" />
    </fieldset>
</form>

This is PHP part:

function saveContact()
{
    $datafile = fopen ("data/data.json", "a+");
    if(!$datafile){
        echo "<script>alert('Data not existed!')</script>";
    } 
    else{
        ...
        $contact_list = $contact_list . addNewContact();
        ...
        file_put_contents("data/data.json", $contact_list);
    }

    fclose($datafile);
}

function addNewContact()
{
   $new = '{';
   $new = $new . '"fullname":"' . $_GET['fullname'] . '",';
   $new = $new . '"email":"' . $_GET['email'] . '",';
   $new = $new . '"phone":"' . $_GET['phone'] . '",';
   $new = $new . '}';
   return $new;
}

Have a look at these code, I want to call saveContact when people click on Add Contact button. We can reload page if need so. FYI, I use JQuery, HTML5 in page as well. Thanks,

u will have to use ajax. you cant execute a server side function called by a client side event handler — Ryan
– Ryan, Commented Apr 12, 2012 at 2:36
Where is your javascript ??? you can not call PHP form HTML events such as onClick ... you need AJAX to do the trick for you — Baba
– Baba, Commented Apr 12, 2012 at 2:37
Yah agree, but I also want to find another solution beside AJAX one. Look down and you can find there's some worth trying :) @RPM — Shinigamae
– Shinigamae, Commented Apr 12, 2012 at 3:27
Hmm I currently got nothing on my javascript but loading a table. Thanks @Baba — Shinigamae
– Shinigamae, Commented Apr 12, 2012 at 3:28

prodigitalson · Accepted Answer · 2012-11-24 00:43:00Z

9

There are two ways. the first is to completely refresh the page using typical form submission

//your_page.php

<?php 

$saveSuccess = null;
$saveMessage = null;

if($_SERVER['REQUEST_METHOD'] == 'POST') {
  // if form has been posted process data

  // you dont need the addContact function you jsut need to put it in a new array
  // and it doesnt make sense in this context so jsut do it here
  // then used json_decode and json_decode to read/save your json in
  // saveContact()
  $data = array(
    'fullname' = $_POST['fullname'],
    'email' => $_POST['email'],
    'phone' => $_POST['phone']
  );

  // always return true if you save the contact data ok or false if it fails
  if(($saveSuccess = saveContact($data)) {
     $saveMessage = 'Your submission has been saved!';     
  } else {
     $saveMessage = 'There was a problem saving your submission.';
  } 
}
?>

<!-- your other html -->

<?php if($saveSuccess !== null): ?>
   <p class="flash_message"><?php echo $saveMessage ?></p>
<?php endif; ?>

<form action="your_page.php" method="post">
    <fieldset>
        <legend>Add New Contact</legend>
        <input type="text" name="fullname" placeholder="First name and last name" required /> <br />
        <input type="email" name="email" placeholder="[email protected]" required /> <br />
        <input type="text" name="phone" placeholder="Personal phone number: mobile, home phone etc." required /> <br />
        <input type="submit" name="submit" class="button" value="Add Contact" onClick="" />
        <input type="button" name="cancel" class="button" value="Reset" />
    </fieldset>
</form>

<!-- the rest of your HTML -->

The second way would be to use AJAX. to do that youll want to completely seprate the form processing into a separate file:

// process.php

$response = array();

if($_SERVER['REQUEST_METHOD'] == 'POST') {
  // if form has been posted process data

  // you dont need the addContact function you jsut need to put it in a new array
  // and it doesnt make sense in this context so jsut do it here
  // then used json_decode and json_decode to read/save your json in
  // saveContact()
  $data = array(
    'fullname' => $_POST['fullname'],
    'email' => $_POST['email'],
    'phone' => $_POST['phone']
  );

  // always return true if you save the contact data ok or false if it fails
  $response['status'] = saveContact($data) ? 'success' : 'error';
  $response['message'] = $response['status']
      ? 'Your submission has been saved!'
      : 'There was a problem saving your submission.';

  header('Content-type: application/json');
  echo json_encode($response);
  exit;
}
?>

And then in your html/js

<form id="add_contact" action="process.php" method="post">
        <fieldset>
            <legend>Add New Contact</legend>
            <input type="text" name="fullname" placeholder="First name and last name" required /> <br />
            <input type="email" name="email" placeholder="[email protected]" required /> <br />
            <input type="text" name="phone" placeholder="Personal phone number: mobile, home phone etc." required /> <br />
            <input id="add_contact_submit" type="submit" name="submit" class="button" value="Add Contact" onClick="" />
            <input type="button" name="cancel" class="button" value="Reset" />
        </fieldset>
    </form>
    <script type="text/javascript">
     $(function(){
         $('#add_contact_submit').click(function(e){
            e.preventDefault();  
            $form = $(this).closest('form');

            // if you need to then wrap this ajax call in conditional logic

            $.ajax({
              url: $form.attr('action'),
              type: $form.attr('method'),
              dataType: 'json',
              success: function(responseJson) {
                 $form.before("<p>"+responseJson.message+"</p>");
              },
              error: function() {
                 $form.before("<p>There was an error processing your request.</p>");
              }
            });
         });         
     });
    </script>

edited Nov 24, 2012 at 0:43

answered Apr 12, 2012 at 2:55

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

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

7 Comments

inhan Over a year ago

...and the other is to use an AJAX call.

Lawrence Cherone Over a year ago

you have XSS in your form with action="<?php echo $_SERVER['PHP_SELF']?>"

prodigitalson Over a year ago

@Lawrence: Well it wasnt supposed to be production code but i changed it for you :-)

Shinigamae Over a year ago

Great, neat and detail solutions. Regards, @prodigitalson. I'll try them both to see which is better in my case.

Shinigamae Over a year ago

@prodigitalson the 2nd solution has an error, file process.php, line 11, it should be '=>' instead of '=', FYI. I have another question. In 2nd case, the event is triggered right after clicking Submit button. How about I want to write a onClick event - I want to check for offline and online status, we only post data in case online mode - the offline part isn't problem, but I don't know how to call process.php in onClick event? Can we achieve this? More information, I want to 'post' data through a call of Javascript function. If you want to see my demo for more details, please pm me your email.

|

123 · Accepted Answer · 2012-04-12 03:03:17Z

<div id="sample"></div>   
 <form>
        <fieldset>
            <legend>Add New Contact</legend>
            <input type="text" name="fullname" placeholder="First name and last name" required /> <br />
            <input type="email" name="email" placeholder="[email protected]" required /> <br />
            <input type="text" name="phone" placeholder="Personal phone number: mobile, home phone etc." required /> <br />
            <input type="submit" name="submit" id= "submitButton" class="button" value="Add Contact" onClick="" />
            <input type="button" name="cancel" class="button" value="Reset" />
        </fieldset>
    </form>

<script>

    $(document).ready(function(){
         $("#submitButton").click(function(){
            $("#sample").load(filenameofyourfunction?the the variable you need);
         });
    });

</script>

Francisco Presencia · Accepted Answer · 2012-04-12 03:09:06Z

3

You don't need javascript for doing so. Just delete the onClick and write the php Admin.php file like this:

<!-- HTML STARTS-->
<?php
//If all the required fields are filled
if (!empty($GET_['fullname'])&&!empty($GET_['email'])&&!empty($GET_['name']))
{
function addNewContact()
    {
    $new = '{';
    $new .= '"fullname":"' . $_GET['fullname'] . '",';
    $new .= '"email":"' . $_GET['email'] . '",';
    $new .= '"phone":"' . $_GET['phone'] . '",';
    $new .= '}';
    return $new;
    }

function saveContact()
    {
    $datafile = fopen ("data/data.json", "a+");
    if(!$datafile){
        echo "<script>alert('Data not existed!')</script>";
        } 
    else{
        $contact_list = $contact_list . addNewContact();
        file_put_contents("data/data.json", $contact_list);
        }
    fclose($datafile);
    }

// Call the function saveContact()
saveContact();
echo "Thank you for joining us";
}
else //If the form is not submited or not all the required fields are filled

{ ?>

<form>
    <fieldset>
        <legend>Add New Contact</legend>
        <input type="text" name="fullname" placeholder="First name and last name" required /> <br />
        <input type="email" name="email" placeholder="[email protected]" required /> <br />
        <input type="text" name="phone" placeholder="Personal phone number: mobile, home phone etc." required /> <br />
        <input type="submit" name="submit" class="button" value="Add Contact"/>
        <input type="button" name="cancel" class="button" value="Reset" />
    </fieldset>
</form>
<?php }
?>
<!-- HTML ENDS -->

Thought I don't like the PHP bit. Do you REALLY want to create a file for contacts? It'd be MUCH better to use a mysql database. Also, adding some breaks to that file would be nice too...

Other thought, IE doesn't support placeholder.

edited Apr 12, 2012 at 3:09

answered Apr 12, 2012 at 3:02

Francisco Presencia

8,8857 gold badges50 silver badges96 bronze badges

3 Comments

Shinigamae Over a year ago

Me either. If I forced to use a server-side language in my webiste, I'll try ASP.NET. But this is an small demonstration, so I choose PHP for its simple environment (XAMPP, Dreamweavaer, done). I have no idea a bout MySQL though. Thanks for your idea, @Frank Presencia Fandos , I often forget to add breaks to code. Currently test/demo on Chrome/Firefox only, for better HTML5 support :)

Francisco Presencia Over a year ago

I really recommend you to learn the basics about mysql. It's the most used around there and to learn the basics is really easy. When you implement it, the mysql for your site could be as easy as this, the 2nd example.

Shinigamae Over a year ago

Thanks again, @Frank Presencia Fandos, I am going to learn it.

Fluffeh · Accepted Answer · 2012-09-28 10:00:10Z

1

 cell1.innerHTML="<?php echo $customerDESC; ?>";
 cell2.innerHTML="<?php echo $comm; ?>";
 cell3.innerHTML="<?php echo $expressFEE; ?>";
 cell4.innerHTML="<?php echo $totao_unit_price; ?>";

it is working like a charm, the javascript is inside a php while loop

edited Sep 28, 2012 at 10:00

Fluffeh

33.6k16 gold badges69 silver badges80 bronze badges

answered Aug 6, 2012 at 16:39

Shahab Maboud

452 silver badges11 bronze badges

1 Comment

Shinigamae Over a year ago

Are $customerDESC, @comm etc. functions we want to call, and cells is the sender elements like buttons?

Collectives™ on Stack Overflow

Call a PHP function after onClick HTML event

4 Answers 4

7 Comments

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related