Help needed with thank you message

S

strawbs

Joined
Jun 14, 2018
Messages
109
Reaction score
1
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>
 
BigDady

BigDady

Joined
Nov 13, 2020
Messages
302
Reaction score
38
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>
 
S

strawbs

Joined
Jun 14, 2018
Messages
109
Reaction score
1
BigDady said:
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>
Click to expand...
thank you ever so much, but once submitted will this send an email to that email that's in the code?
 
BigDady

BigDady

Joined
Nov 13, 2020
Messages
302
Reaction score
38
thank you ever so much, but once submitted will this send an email to that email that's in the code?
Click to expand...
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.
 
C

c1lonewolf

Joined
Jul 12, 2020
Messages
89
Reaction score
10
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.
 

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

Similar Threads

Help with my responsive home page 2
Need help with code on website (noob) 2
Help with code 0
Having trouble centering contents of td ? 3
Help needed with code 5
How do I fix this issue in sqaurespace code block? 1
How to position the *tooltip* comment on these buttons? 9
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0

Members online

No members online now.
Total: 368 (members: 2, guests: 366)
Robots: 249

Forum statistics

Threads
473,955
Messages
2,570,117
Members
46,705
Latest member
v_darius

Latest Threads

Top