CODEWITHSUNDEEP
javascriptphphtml
faisal abdulai
faisal abdulai

Reputation: 3819

Present Success Message Upon Form Submission

I have a PHP file with an HTML form, and I want add a success message. The success message will be displayed upon form submission, either by use of PHP or JavaScript. The code is presented below.

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="layout.css">

  <script language="javascript" type="text/javascript">
  function getConfirm() {
  var retVal = confirm("Do you want to continue ?");
  if (retVal == true) {
    document.write("User wants to continue!");
    return true;
  } else {
    document.write("User does not want to continue!");
    location.reload();
    return false;
  }
}
  </script>

<title>Title of the document</title>
</head>
<div>
<body>

<section id="sidebar">

</section>

<section id="content">

<div id="form-div">
<form class="form" action="insert.php" method="post" name="access_form" onSubmit="return getConfirm();">

<ul>

<li>
<h2>Please Fill The Form</h2>

</li>



<li>
     <label for="firstname">First Name</label> 
        <input name="firstname" id="keyword" type="text" placeholder="type first name (required)" required />             

</li>

<li>
     <label for="lastname">Last Name</label>
     <input name="lastname" id="lastname" type="text" placeholder="type second name (required)" required />
</li>

<li>
   <label for="department">Department</label>
   <textarea name="department" id="department" placeholder="type your department or office name (required)" required ></textarea>
</li>

<li>
     <label for="unit">Section/Unit</label>
     <input name="unit" id="unit" type="text" placeholder="type section/unit name (required)" required />
</li>



<li>
<label for="request" id="officallabel">Type of Request</label>
<input name="request" id="request" list="request1" />
        <datalist id="request1" >
            <?php foreach ($requests as $request): ?>
                <option value="<?php echo $request; ?>" />
            <?php endforeach; ?>
        </datalist>
</li>

<li> 
    <label for="purposebuttons" id="officallabel">Purpose</label> 
   <div  class="radio">
    <input type = "radio"
           name = "purposebuttons"
           id = "official"
           value = "Official" />
    <label id="official" for="official">Official</label>

    <input type = "radio"
           name = "purposebuttons"
           id = "unofficial"
           checked = "checked" 
           value = "Unofficial" />
    <label id="unofficial" for="unofficial">Unofficial</label>
  </div>
</li>

<li> 
    <label for="personbuttons" id="officallabel">Person</label> 
   <div  class="radio">
    <input type = "radio"
           name = "personbuttons"
           id = "staff"
           checked = "checked"
           value = "Staff" />
    <label id="staff" for="staff">Staff</label>

    <input type = "radio"
           name = "personbuttons"
           id = "consultant" 
           value = "Consultant" />
    <label id="consultant" for="consultant">Consultant</label>
  </div>
</li>



<li>
   <label for="description">Description</label>
   <textarea name="description" id="description" placeholder="type description (required)" required ></textarea>
</li>

<li>
   <label for="date-time">Access Date And Time</label>
   <input name="date-time" type="datetime-local" id="date-time"/>
</li>

<p id="form-buttons">
          <input type = "reset" class="reset"/>
          <input type ="submit" class="submit" />
        </p>   


</ul>
</form>
</div>
</section>

</body>
</div>
</html>

Upvotes: 0

Views: 69

Answers (3)

P. Jensen
P. Jensen

Reputation: 34

A form submit would redirect to current page or to the action. So a PHP approach from me it is.

Name your submit button. e.g <input type="submit" name="form-pj-submit" />

Then when clicked it sets $_POST['form-pj-submit']

And in PHP insert.php you can have something like @blazerunner44 mentioned.

if (isset($_POST['form-pj-submit'])) {
  // Do whatever
  echo 'SUCCESS!';
}

Upvotes: 1

aliyan
aliyan

Reputation: 69

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="layout.css">

  <script language="javascript" type="text/javascript">
  function getConfirm() {
  var retVal = confirm("Do you want to continue ?");
  if (retVal == true) {
element = document.getElementById("msg");
element.innerText="User wants to continue!"; 

    return true;
  } else {
element = document.getElementById("msg");
element.innerText="User does not want to continue!"; 
    location.reload();
    return false;
  }
}
  </script>

<title>Title of the document</title>
</head>
<div>
<body>

<section id="sidebar">

</section>

<section id="content">
<div id="msg"></div>
<div id="form-div">
<form class="form" action="insert.php" method="post" name="access_form" onSubmit="return getConfirm();">

<ul>

<li>
<h2>Please Fill The Form</h2>

</li>



<li>
     <label for="firstname">First Name</label> 
        <input name="firstname" id="keyword" type="text" placeholder="type first name (required)" required />             

</li>

<li>
     <label for="lastname">Last Name</label>
     <input name="lastname" id="lastname" type="text" placeholder="type second name (required)" required />
</li>

<li>
   <label for="department">Department</label>
   <textarea name="department" id="department" placeholder="type your department or office name (required)" required ></textarea>
</li>

<li>
     <label for="unit">Section/Unit</label>
     <input name="unit" id="unit" type="text" placeholder="type section/unit name (required)" required />
</li>



<li>
<label for="request" id="officallabel">Type of Request</label>
<input name="request" id="request" list="request1" />
        <datalist id="request1" >
            <?php foreach ($requests as $request): ?>
                <option value="<?php echo $request; ?>" />
            <?php endforeach; ?>
        </datalist>
</li>

<li> 
    <label for="purposebuttons" id="officallabel">Purpose</label> 
   <div  class="radio">
    <input type = "radio"
           name = "purposebuttons"
           id = "official"
           value = "Official" />
    <label id="official" for="official">Official</label>

    <input type = "radio"
           name = "purposebuttons"
           id = "unofficial"
           checked = "checked" 
           value = "Unofficial" />
    <label id="unofficial" for="unofficial">Unofficial</label>
  </div>
</li>

<li> 
    <label for="personbuttons" id="officallabel">Person</label> 
   <div  class="radio">
    <input type = "radio"
           name = "personbuttons"
           id = "staff"
           checked = "checked"
           value = "Staff" />
    <label id="staff" for="staff">Staff</label>

    <input type = "radio"
           name = "personbuttons"
           id = "consultant" 
           value = "Consultant" />
    <label id="consultant" for="consultant">Consultant</label>
  </div>
</li>



<li>
   <label for="description">Description</label>
   <textarea name="description" id="description" placeholder="type description (required)" required ></textarea>
</li>

<li>
   <label for="date-time">Access Date And Time</label>
   <input name="date-time" type="datetime-local" id="date-time"/>
</li>

<p id="form-buttons">
          <input type = "reset" class="reset"/>
          <input type ="submit" class="submit" />
        </p>   


</ul>
</form>
</div>
</section>

</body>
</div>
</html>

Upvotes: 0

blazerunner44
blazerunner44

Reputation: 657

It looks like you are POSTing the form data to insert.php. If that is the same page as the form, you could include something like this where you want your success message to show:

<?php
if(isset($_POST)){
   echo "Success! Thanks.";
}?>

If insert.php is another file (that does the processing or something) you could redirect them back to formfile.php?success=true and show the success message with:

<?php
if(isset($_GET['success']) AND $_GET['success'] == 'true'){
   echo "Success! Thanks.";
}
?>

Upvotes: 0

Related Questions