Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There are two ways. the first is to completely refresh the page using typical form submission</p> <pre><code>//your_page.php &lt;?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' =&gt; $_POST['email'], 'phone' =&gt; $_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.'; } } ?&gt; &lt;!-- your other html --&gt; &lt;?php if($saveSuccess !== null): ?&gt; &lt;p class="flash_message"&gt;&lt;?php echo $saveMessage ?&gt;&lt;/p&gt; &lt;?php endif; ?&gt; &lt;form action="your_page.php" method="post"&gt; &lt;fieldset&gt; &lt;legend&gt;Add New Contact&lt;/legend&gt; &lt;input type="text" name="fullname" placeholder="First name and last name" required /&gt; &lt;br /&gt; &lt;input type="email" name="email" placeholder="etc@company.com" required /&gt; &lt;br /&gt; &lt;input type="text" name="phone" placeholder="Personal phone number: mobile, home phone etc." required /&gt; &lt;br /&gt; &lt;input type="submit" name="submit" class="button" value="Add Contact" onClick="" /&gt; &lt;input type="button" name="cancel" class="button" value="Reset" /&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;!-- the rest of your HTML --&gt; </code></pre> <p>The second way would be to use AJAX. to do that youll want to completely seprate the form processing into a separate file:</p> <p>// process.php</p> <pre><code>$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' =&gt; $_POST['fullname'], 'email' =&gt; $_POST['email'], 'phone' =&gt; $_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; } ?&gt; </code></pre> <p>And then in your html/js</p> <pre><code>&lt;form id="add_contact" action="process.php" method="post"&gt; &lt;fieldset&gt; &lt;legend&gt;Add New Contact&lt;/legend&gt; &lt;input type="text" name="fullname" placeholder="First name and last name" required /&gt; &lt;br /&gt; &lt;input type="email" name="email" placeholder="etc@company.com" required /&gt; &lt;br /&gt; &lt;input type="text" name="phone" placeholder="Personal phone number: mobile, home phone etc." required /&gt; &lt;br /&gt; &lt;input id="add_contact_submit" type="submit" name="submit" class="button" value="Add Contact" onClick="" /&gt; &lt;input type="button" name="cancel" class="button" value="Reset" /&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;script type="text/javascript"&gt; $(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("&lt;p&gt;"+responseJson.message+"&lt;/p&gt;"); }, error: function() { $form.before("&lt;p&gt;There was an error processing your request.&lt;/p&gt;"); } }); }); }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload