Geek Answers Handbook

I just want to show a green checkmark when the user clicks the Submit button on an html form

first post. PHP noob. I am surprised how difficult it was ...

I have an html form (index.html) with a submit button that is sent to the php file (sendemail.php).

The php file is installed to collect form data and send it by e-mail to the address I specified.

I want to show a success icon next to the submit button when sending this email. (Honestly, there is no failure condition, so I would be happy just showing the success icon when the user clicks the submit button, so they don’t want to click send).

I tried several approaches after reading this and many other forums. I have been doing this for two days and can take help.

Below are some snippets below. I am just trying to detect that an email has been sent to a php file, and then sends a flag ($ val) using echo json_encode back to the HTML page. I am trying to capture it using javascript using the onload trigger, and then trying to use javascript to control the DIV volatility when the page is refreshed after the submit action has completed.

It handles php, but it doesn't seem to reach the title bar to reload the html page. He simply refreshed the screen and showed the word "inline" and nothing more.

I'm at a dead end. Please help! Thanks

sendmail.php

 // Check, if message sent to your email 
// mark success or fail then refresh page

if($send_contact){


$val="inline";   
echo json_encode($val); 

} 
else {
echo "Error"; 

}

if($send_contact){
header('location:index.html');

}
else {
echo "Error"; 
}
?>

javascript in html

<script type="text/javascript">
      function success(){
      var val = <?php echo json_encode($val); ?>;
       document.getElementById('success').setAttribute('display', val);

         }
       window.onload = success;
    </script>

HTML DIV I'm trying to control

 <div style="text-align: left; font-weight: bold; color:#000000; display:val;"

                class="success" id="success" name="success"><img src="success.png"

                  height="25px">Event added! It may take 20 minutes to appear on
                the calendar. </div>

UPDATE:

, manRo , , ... , , PHP 200.

, ajax, - , , .

:

script :

   <script type="text/javascript" src="util-functions.js"></script>
<script type="text/javascript" src="clear-default-text.js"></script>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

onload , , "", :

<body onload="setdisplay()">

:

<script>
 function setdisplay();
  document.getElementById("success").style.display = "none";
</script>

:

 <form id="main" name="main" action="">

:

<td style="text-align: right; "> <br>
        </td>
        <td><input id="title" name="title" value="Event title" class="cleardefault rounded"

            required="true" type="text"> </td>

, = button

<input style="background-color: #99d6ff; text-align:center;

font-weight: bold; "value =" "id =" addevent "name=" addevent "onclick =" processmain(); "

           class="button" type="button">

DIV :

 <div style="text-align: left; font-weight: bold; color:#000000; display:none;"

            class="success" id="success" name="success"><img src="success.png"

              height="25px"></div>

.... manRo script, "ajax":

     <script>
      }
      function processmain()
{



  // event.preventDefault();



      var title = $("input#title").val();
  var location = $("input#location").val();
  var startdate = $("input#startdate").val();
  var starttime = $("input#starttime").val();
  var enddate = $("input#enddate").val();
  var endtime = $("input#endtime").val();
  var other = $("input#other").val(); 


    $.ajax({



        url: "sendemail.php",
        type:'POST',
        data:
        {
          title: "title",
          location: "location",
          startdate: "startdate",
          starttime: "starttime",
          enddate: "enddate",
          endtime: "endtime",
          other: "other"
        },
        success: function(event)
        {
           $.get('sendmail.php', function(data) {
         document.getElementById("success").style.display = "inline";
           })               
        }    
    });}

    </script>

: php ( type = ).

, . , php, . , , .

, , , , . !

+4
1

, , HTML ajax php script, 200 http.

, .

, html :

<html>
  <head>
  <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
  </head>
  <body>
    <form action="sendmail.php">
      <input type="email" name="email"/>
      <input type="submit"/>
    </form>
    <script>
      $(document.forms[0]).submit(function(event) {
        event.preventDefault();
        $.get('sendmail.php', function(data) {
          alert('all good');
        });
      });
    </script>
  </body>
</html>

sendmail.php , , :

<?php
//code here...
if ($email_sent) {
    http_response_code(200);
} else {
    http_response_code(400);
}
+3

More articles:


All Articles