How can I display a line of text when the "Contact Us" button is clicked on a practice website, similar to this:
https://i.sstatic.net/MgbYQ.png
I have set the current opacity of the submit message to 0 so it is hidden, but is there a way to change its opacity to 1 when the submit link above is clicked, using either CSS or jQuery?
If you're creating a mockup:
$("#submitButton").on("click", function( e ) {
e.preventDefault();
$("#thanks").fadeIn( 800 ); // Display Thank You Message
}); #thanks{ display:none; } /* Hide Thank You Message */<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
Your message:<br>
<textarea></textarea><br>
<a href="javascript:;" id="submitButton"><b>Get in touch</b></a>
<div id="thanks">Thanks for your inquiry!</div>In most cases, it's recommended to use a success AJAX event before showing the thank you message (especially when submitting a form)
CSS (Hide Thank You Message):
#thanks{ display:none; }jQuery (Show Thank You on Success):
$("#submitButton").on("click", function() {
$.ajax({
url: '/mail.php', // or any applicable endpoint
type: "POST",
data: $form.serialize(),
success: function( response ) {
console.log( response ); // Retrieve server response on success
$("#thanks").show(); // Show Thank You Message
},
error: function (a, b, c) {
console.log(a, b, c);
}
});
});
It seems like my brain is taking a break today... I couldn't figure out why this code snippet wasn't working until I realized that javascript was disabled on my device. It turned out to be a simple solution.
$(".button").on("click", function(){
$(".feedback").css("opacity", "1");
})
To simply show the text, adjust the transparency level of the element by modifying the opacity property in CSS or utilizing jQuery for animation.
<style>
span
{
opacity: 0;
}
</style>
<input type="text">
<button>
Get In Touch
</button>
<span>Thanks for your message</span>
<script>
$("button").click(function()
{
$('span').animate({ opacity: 1 },1000);
});
</script>
Example: https://jsfiddle.net/3mb8ep19/2/
Here is the code snippet using AJAX: $('#MyUploadForm').submit(function () { $(this).ajaxSubmit({ beforeSubmit: beforeSubmit ,dataType: 'json' ,uploadProgress: OnProgress ,resetF ...
When I click the button, I want to show and then hide a div. However, it doesn't work on the first click - only on the second click. How can I make it work on the first click? HTML <p>Click the button</p> <button onclick="myFu ...
Hey there, I'm completely new to Codeigniter. In the Controllers folder, I've created a file called caller.php and in the \Views directory, I've created a file named home1.php. Additionally, within the root directory, I've made an ...
Currently I am delving into the world of Ajax and have encountered a minor issue. I've been attempting to make a POST request to a Django backend using ajax, but strangely enough, the alert isn't showing up on screen. Furthermore, upon inspectio ...
I'm completely new to the world of web development and I am attempting to construct a website for my company all by myself. However, I am encountering an issue with a "red info box" on one of my pages. While it displays perfectly on Chrome, it appear ...
After numerous attempts, I'm still encountering the same error. Here is the Json String that's causing the issue: [{"cart":{"itemid":"2","itemAmount":"2"}},{"cart":{"itemid":"3","itemAmount":"1"}}] I attempt to pass it to PHP using this cod ...
Trying to solve this seemingly simple problem has been quite the challenge for me. I have a container with multiple divs added to it, and I want these divs to position themselves freely within any available white space. However, they must follow a pattern ...
I'm attempting to target the final child element of type <div> within the container "#myDiv" <div id="myDiv"> <div> <img> <div> <div>text</div> ...
While browsing the internet for C programs, I stumbled upon this particular program that caught my eye: <span style='color:#004a43'>#</span><span style='color:#004a43'>include</span><span style='color:#8 ...
Apologies in advance, as this is my first attempt at coding a website. I have a specific need where I want to update only one div on my web page when a link in the navigation bar is clicked. <body> <div id="wrapper"> <header id= ...
I'm fairly new to CSS/Html/JS and I'd like to create a row of Boxes (loaded from a json file) displayed horizontally. Something similar to this: https://i.sstatic.net/ZgxMR.png Here's the code snippet I've been using: <style> ...
I have integrated the Material UI V4 Data Grid component into my React Js application. The Data Grid component requires two props: rows (list type) and columns (list type). Below is a sample row item: const rows = [ { id: 1, customerName: " ...
I am currently attempting to determine if the ID is included in a variable containing HTML content. The ID name is being added to a DIV element through dynamic variables. strHTML = "<div id='"+var1+var2+"'>" Now, I want to verify if a sp ...
I tried to follow the instructions provided in this tutorial but unfortunately, I couldn't get it to work. This is the process I followed: 1 / Including in the header <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ...
I am currently working on a JavaScript Backbone project and I have declared a global object as follows: window.App = { Vent: _.extend({}, Backbone.Events) } In the initialize function, I have done the following: initialize: function () { window.App ...
Why do the images with the same CSS property appear different in Chrome and Mozilla? I want them all to float left with equal margins between them, covering the complete area horizontally despite having varying image widths. I'm unsure why there is a ...
I want to create an effect where I have two images, with the first one hidden initially. When we hover over the second image, the first image should become visible. Here are the codes and class names related to the images: <div class="entrycontent"&g ...
I am currently working on developing a price estimation calculator. Here is the breakdown: For 1000 MTU, the price will be 0.035, resulting in a total of 35. For 2000 MTU, the price will be 0.034, making the total 67. For 3000 MTU, the price will be 0.03 ...
Is there a way to print a page with an embedded YouTube video without it showing up as a blank area? I want the printed version to display the same still shot that appears on the web. If this isn't possible, I will use a noprint stylesheet. Here is ho ...
Hi there, I'm encountering some issues with the JS clients slider on my website. I need to pause it when the mouse is over and resume when the mouse leaves. I've double-checked the code but for some reason it's still not functioning properl ...