Help needed with thank you message


Joined
Jun 14, 2018
Messages
38
Reaction score
0
Code:
hi i am making a song request form
and basically when people press submit i would like
some sort of text to show up ie request&dedication submitted the dj will play it soon


here's my code



<html>
<style>
h1 {
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}
body {
background-color: #ff0040;
}

input[type=submit] {
  width: 300%;
  background: linear-gradient(to right, #ff3300 0%, #000000 100%);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background: linear-gradient(to right, #ff0000 0%, #000000 100%);
}

div {
  border-radius: 5px;
  background-color: #ffccff;
  padding: 20px;
}
input[type=dedi], select {
padding: 17px;
border: 1px solid #4CAF50;
}
input[type=text], select {
padding: 17px;
border: 1px solid #4CAF50;
body {
color: white;
}

input[type=text], select {
padding: 17px;
border: 1px solid #4CAF50;
body {
color: white;
}
$.ajax({
      type: "POST",
      url: "Your Post URL",
      success: function(result){
      $('#your-div').html('<div>Thank you!</div>');
    },
    error: function (error) {
      alert("There is a problem");
    }
  });
</style>
    <head>
        <title>Requests</title>
        
        
        </head>
        
        
        <body>
        
            <center>
            <h3>Request Ya Favorite Tune!!!</h3>
        
            <form action="mailto:[email protected]" method="post"
            enctype="text/plain">
            
            <table>
                <tr>
                    <td>Artist Name:</td>
                    <td>
                        <input type="text" name="artist" placeholder=
                        "Enter artist name">
                    </td>   
        </tr>
        
         <tr>
            <td>Artist Song:</td>
            <td>
                <input type="text" name="artist_song" placeholder=
                "Enter artist song">
            </td>
        
        </tr>   
            
           <tr>
                <td>Dedication:</td>
                <td>
                
                    <input type="dedi" name="dedication" placeholder=
                    "Dedicate Here">
                </td>
          
          
        <tr>
            <td>
               <input type="submit" name="submit"
               value="submit">
           </td>
       </tr>
   </tr>

          
            </table>             
            
            
              </form>       
        
            
            
            </center>
        
        </body>
        
 </html>
 
Ad

Advertisements

Joined
Nov 13, 2020
Messages
80
Reaction score
14
I don't like using Jquery so this is in raw JS. I did not explain my corrections of your code. Just did it.

JS can not send email (at lest that's what I think - look it up). I added to the CSS and change the display with JS.
The form changes because you use a table and columns grow to the largest <td> width.
Anybody that sees this code can spam your email!! I would use PHP to do this instead.
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Requests</title>
<style>
h1 {
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}
body {
  background-color:  white;
}

input[type=submit] {
  width: 300%;
  background: linear-gradient(to right, #ff3300 0%, #000000 100%);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background: linear-gradient(to right, #ff0000 0%, #000000 100%);
}

div {
  border-radius: 5px;
  background-color: #ffccff;
  padding: 20px;
}

input[type=text], select {
padding: 17px;
border: 1px solid #4CAF50;
}

#message {
  font-size: 40px;
  color: red;
  display: none;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px; 
}
</style>
</head>

<body>
<center>
<h3>Request Ya Favorite Tune!!!</h3>
<form action="mailto:[email protected]" id="form" method="post" enctype="text/plain">
  <table>
  <tr>
  <td>Artist Name:</td>
    <td>
    <input type="text" name="artist" placeholder=
    "Enter artist name">
    </td>   
  </tr>

  <tr>
  <td>Artist Song:</td>
    <td>
    <input type="text" name="artist_song"  placeholder=
    "Enter artist song">
    </td>
  </tr>   

  <tr>
    <td>Dedication:</td>
    <td>
      <input type="text" name="dedication" placeholder="Dedicate Here">
    </td>
  </tr>

  <tr>
    <td>
      <input id="mine" type="submit" name="submit" value="submit" onclick="TYmessage();">
    </td>
  </tr>
 
  <tr>
    <td>
      <p id="message">Thank You</p>
    </td>
  </tr> 

  </table>         
</form>       
</center>


<script>
function TYmessage(){
  document.getElementById("message").style.display = "block";
}
</script>
</body>
</html>
 
Joined
Jun 14, 2018
Messages
38
Reaction score
0
I don't like using Jquery so this is in raw JS. I did not explain my corrections of your code. Just did it.

JS can not send email (at lest that's what I think - look it up). I added to the CSS and change the display with JS.
The form changes because you use a table and columns grow to the largest <td> width.
Anybody that sees this code can spam your email!! I would use PHP to do this instead.
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Requests</title>
<style>
h1 {
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}
body {
  background-color:  white;
}

input[type=submit] {
  width: 300%;
  background: linear-gradient(to right, #ff3300 0%, #000000 100%);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background: linear-gradient(to right, #ff0000 0%, #000000 100%);
}

div {
  border-radius: 5px;
  background-color: #ffccff;
  padding: 20px;
}

input[type=text], select {
padding: 17px;
border: 1px solid #4CAF50;
}

#message {
  font-size: 40px;
  color: red;
  display: none;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
}
</style>
</head>

<body>
<center>
<h3>Request Ya Favorite Tune!!!</h3>
<form action="mailto:[email protected]" id="form" method="post" enctype="text/plain">
  <table>
  <tr>
  <td>Artist Name:</td>
    <td>
    <input type="text" name="artist" placeholder=
    "Enter artist name">
    </td>  
  </tr>

  <tr>
  <td>Artist Song:</td>
    <td>
    <input type="text" name="artist_song"  placeholder=
    "Enter artist song">
    </td>
  </tr>  

  <tr>
    <td>Dedication:</td>
    <td>
      <input type="text" name="dedication" placeholder="Dedicate Here">
    </td>
  </tr>

  <tr>
    <td>
      <input id="mine" type="submit" name="submit" value="submit" onclick="TYmessage();">
    </td>
  </tr>
 
  <tr>
    <td>
      <p id="message">Thank You</p>
    </td>
  </tr>

  </table>        
</form>      
</center>


<script>
function TYmessage(){
  document.getElementById("message").style.display = "block";
}
</script>
</body>
</html>
thank you ever so much, but once submitted will this send an email to that email that's in the code?
 
Joined
Nov 13, 2020
Messages
80
Reaction score
14
thank you ever so much, but once submitted will this send an email to that email that's in the code?
Both your code and mine opens an email that the user must send. Just run the code to see what I mean. Not a good method I'm afraid. Using a form action to call a PHP code would do this automatically and protect your address.
 
Joined
Jul 12, 2020
Messages
22
Reaction score
2
It would seem you're jumping into the deep end without your floaties!
1. Your ajax request is located in your stylesheet and there is no ajax library file linked to support it.
2. You stylesheet contains eules to elements that don't exist in your document.
3. You have two body rules.
4. input[type=text], select { is not closed.
5. I didn't know html had a 'dedi' type input field.
 
Ad

Advertisements

Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top