How can I display a line of text when the "Contact Us" button is clicked on a practice website, similar to this:
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/
Currently, I am working on creating a "category list" with multiple items for a Cordova app. The initial approach was to use a simple HTML list, but unfortunately, it seems that my list is causing some unexpected behavior. Desired swipe navbar layout: ht ...
I've developed a component and now I'm looking to enable scrolling when it expands beyond the screen width <Stack direction="row"> <Stack gap={1} overflow="auto"> {fields.map((el, i) => ( ...
I am trying to figure out how to use the .getJSON() function to store a JSON object as a JavaScript variable. Can someone guide me through this process? var js = $.getJSON(url, function(data) {...} ); Is it necessary to include the function(data) { ...
Currently, I am attempting to retrieve an HTML document by utilizing the jQuery ajax() method. It appears that when I try to analyze the retrieved data using $(data), every browser except Internet Explorer returns a DOM element. However, in Internet& ...
Currently, I am in search of an effective vertical text scroller. My desired scroller would move vertically in a continuous manner, ensuring there is never any empty space while waiting for the next text to appear. I am open to using either JavaScript or ...
I am looking to achieve a unique effect with my thumbnail image and background. Currently, I have the thumbnail image inside a div with another image serving as the background to frame it. My goal is to change the position of the background image from bott ...
After reading multiple blogs and posts on input validation in Mvc 1.0, I noticed that there are several effective solutions mentioned for non-Ajax scenarios. However, when it comes to using jQuery Ajax, I am curious to know what your preferred method is ...
Website: I am interested in linking just the triangle banner located at the top right corner of the page. The triangle image is actually a transparent rectangle with only the triangle portion filled in, so I want to ensure that only that particular sectio ...
Hey there, I am struggling with Regular Expressions, especially when it comes to client side validation for a specific field. Can you please help me come up with a Regular Expression that would verify if an email address is valid based on these criteria: ...
Is there a way to organize multiple divs of varying heights into two columns that display immediately one after the other, without relying on JavaScript or libraries like packery or masonry? I've experimented with using display: inline-block in this ...
I'm having trouble implementing an image gallery on my index page. Despite my efforts, I can't seem to achieve the desired behavior. Here's a snippet of my code: .container .row .col-md-8.col-sm-8.col-xs-8 - 4.times do |i| ...
Check out the Plunker Demo <script> var myapp = angular.module('myapp', ["ui.router"]) myapp.config(function($stateProvider, $urlRouterProvider) { // If there is no matching URL, go to /dashboard $urlRouterProvider. ...
I am in need of a simple "page loading" animation while my photo is being uploaded. Unfortunately, when I tried using the "blockUI" JavaScript for this purpose, it didn't seem to work with my form. For uploading the image, I have employed a div as a ...
I am looking to update the parameter value of an applet tag based on the selection from a dropdown menu. As I am new to jQuery, I would appreciate any guidance on how to achieve this using jQuery. This is my current applet code: <applet id="decisiontr ...
Presented here is a neatly styled button I've created import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; const MyB ...
How can I incorporate JSON data into an HTML modal window? I have a set of 12 buttons, and when a user clicks on one, I want to display the corresponding month's information from a JSON file. let myJson; $(`button`).on(`click`, function() { let ...
I am currently dealing with a clickable div element which has a collapse functionality, and there is also a link placed on top of it: <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-h ...
Recently, I have been attempting to modify the color of a submit button when a form is empty. As a beginner in this area, I am somewhat puzzled as to what mistake I might be making. I will share the current code with you in hopes of receiving some guidance ...
In my JavaScript code, I have the following written: var formSubmit = { preloaderId: "", send:function (formId) { var url = $(formId).attr("action"); $.ajax({ type: "POST", url: url, data: $(formId).serialize(), dataTy ...
I am currently creating an application using the Ionic framework, and I am looking to set a square image as the background. The challenge is to ensure that the image scales appropriately for different screen resolutions; ideally, it should occupy the full ...