I am trying to create a really simple example of using Stripe payments.
This is my code:
// Create a Stripe client
var stripe = Stripe('pk_test_XSHE4IYLLy9qCPe7lW7pK4ZE');
// Create an instance of Elements
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '24px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
});
.StripeElement {
background-color: white;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://js.stripe.com/v3/"></script>
<title>test</title>
</head>
<body>
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors -->
<div id="card-errors"></div>
</div>
<button>Submit Payment</button>
</form>
</body>
</html>
I followed the example from Stripe.
This is the error that I got from the Javascript console:
Uncaught Error: The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().
at new t (js.stripe.com/:1)
at t.value (js.stripe.com/:1)
Based on the error, I think the Stripe JavaScript could not find any #card-element, but it is there.
This could be a dumb question, but this is my first time using Stripe, so it would be great if someone could help me. Thank you so much.
Don't add the script in the head, instead, add it right before you close the body.
<html lang= "en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors -->
<div id="card-errors"></div>
</div>
<button>Submit Payment</button>
</form>
<script src="https://js.stripe.com/v3/"></script>
</body>
</html>
Putting your script at the bottom ensures that the DOM is rendered prior to executing the script, so that'll do the trick!
Put your script after the html from,
<form></form>
//after your stripe form put stripe script
<script></script>
As below
<style type="text/css">
* {
font-family: "Helvetica Neue", Helvetica;
font-size: 15px;
font-variant: normal;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
background: #E6EBF1;
align-items: center;
min-height: 100%;
display: flex;
width: 100%;
}
form {
width: 480px;
margin: 20px auto;
}
.group {
background: white;
box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
0 3px 6px 0 rgba(0,0,0,0.08);
border-radius: 4px;
margin-bottom: 20px;
}
label {
position: relative;
color: #8898AA;
font-weight: 300;
height: 40px;
line-height: 40px;
margin-left: 20px;
display: block;
}
.group label:not(:last-child) {
border-bottom: 1px solid #F0F5FA;
}
label > span {
width: 20%;
text-align: right;
float: left;
}
.field {
background: transparent;
font-weight: 300;
border: 0;
color: #31325F;
outline: none;
padding-right: 10px;
padding-left: 10px;
cursor: text;
width: 70%;
height: 40px;
float: right;
}
.field::-webkit-input-placeholder { color: #CFD7E0; }
.field::-moz-placeholder { color: #CFD7E0; }
.field:-ms-input-placeholder { color: #CFD7E0; }
button {
float: left;
display: block;
background: #666EE8;
color: white;
box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
0 3px 6px 0 rgba(0,0,0,0.08);
border-radius: 4px;
border: 0;
margin-top: 20px;
font-size: 15px;
font-weight: 400;
width: 100%;
height: 40px;
line-height: 38px;
outline: none;
}
button:focus {
background: #555ABF;
}
button:active {
background: #43458B;
}
.outcome {
float: left;
width: 100%;
padding-top: 8px;
min-height: 24px;
text-align: center;
}
.success, .error {
display: none;
font-size: 13px;
}
.success.visible, .error.visible {
display: inline;
}
.error {
color: #E4584C;
}
.success {
color: #666EE8;
}
.success .token {
font-weight: 500;
font-size: 13px;
}
</style>
<form action="subscription.php" method="post">
<div class="group">
<label>
<span>Name</span>
<input name="cardholder-name" class="field" placeholder="Jane Doe" />
</label>
<label>
<span>Phone</span>
<input class="field" placeholder="(123) 456-7890" type="tel" />
</label>
</div>
<div class="group">
<label>
<span>Card</span>
<div id="card-element" class="field"></div>
</label>
</div>
<button type="submit">Pay $25</button>
<div class="outcome">
<div class="error" role="alert"></div>
<div class="success">
Success! Your Stripe token is <span class="token"></span>
</div>
</div>
</form>
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
var stripe = Stripe('YOUR_PUBLIC_KEY');
var elements = stripe.elements();
var card = elements.create('card', {
style: {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
}
});
card.mount('#card-element');
function setOutcome(result) {
var successElement = document.querySelector('.success');
var errorElement = document.querySelector('.error');
successElement.classList.remove('visible');
errorElement.classList.remove('visible');
if (result.token) {
// Use the token to create a charge or a customer
// https://stripe.com/docs/charges
successElement.querySelector('.token').textContent = result.token.id;
successElement.classList.add('visible');
} else if (result.error) {
errorElement.textContent = result.error.message;
errorElement.classList.add('visible');
}
}
card.on('change', function(event) {
setOutcome(event);
});
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
var form = document.querySelector('form');
var extraDetails = {
name: form.querySelector('input[name=cardholder-name]').value,
};
stripe.createToken(card, extraDetails).then(setOutcome);
});
</script>
For anyone else with this same problem - the code snippet in Stripe's docs is incomplete. So the suggested fixes above may in fact be necessary to ensure proper order of operations, but the whole thing won't work unless you define a stripeTokenHandler method.
Stripe's docs define the method (further down the page) as:
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
Stripe.js renders the inputs for credit card number, expiration, CVC in iFrames. You cannot create these or get at them with JavaScript. You can however style the containers as you want which will enable you to get pretty close matching to the UI of your website - Bootstrap, MDC-Web, or whatever.
If your elements are not displaying, try the below to get started.
<div class="stripe-custom-element">
<label for="stripe-card">Card Number</label>
<div class="" id="stripe-card"></div>
</div>
<div class="stripe-custom-element">
<label for="stripe-exp">Expiration</label>
<div class="" id="stripe-exp"></div>
</div>
<div class="stripe-custom-element">
<label for="stripe-cvc">CVC</label>
<div class="" id="stripe-cvc"></div>
</div>
var cardNumberElement = doc.getElementById("stripe-card");
var cardExpiryElement = doc.getElementById("stripe-exp");
var cardCvcElement = doc.getElementById("stripe-cvc");
var cardNumber = elements.create('cardNumber', {});
var cardExpiry = elements.create('cardExpiry', {});
var cardCvc = elements.create('cardCvc', {});
cardNumber.mount(cardNumberElement);
cardExpiry.mount(cardExpiryElement);
cardCvc.mount(cardCvcElement);
registerElements([cardNumber, cardExpiry, cardCvc]);
I may be be late, but this worked for me , make sure to add the charge.js script below the stripe script , also, add them before the closing body tag
<html lang= "en">
<head>
<link rel="stylesheet" href="style.css"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors -->
<div id="card-errors"></div>
</div>
<button>Submit Payment</button>
</form>
<script type ="text/javascript" src="https://js.stripe.com/v3/"></script>
<script src="charge.js"></script>
</body>
</html>
Related
In this code i want to try make validation phone number field.
I am using Tel-Input-Js.
if i am using
initialCountry: "AE",
for showing default selection country. but it's not working properly as you can see in image AE country flag is just append on US flag so volition not working properly.
Here my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>International telephone input</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>
<style>
.container {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#phone,
.btn {
padding-top: 6px;
padding-bottom: 6px;
border: 1px solid #ccc;
border-radius: 4px;
}
.btn {
color: #ffffff;
background-color: #428BCA;
border-color: #357EBD;
font-size: 14px;
outline: none;
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
}
.btn:focus,
.btn:hover {
background-color: #3276B1;
border-color: #285E8E;
}
.btn:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.alert {
padding: 15px;
margin-top: 10px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-info {
border-color: #bce8f1;
color: #31708f;
background-color: #d9edf7;
}
.alert-error {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
© 2022 GitHub,
Inc. Terms Privacy Security Status Docs Contact GitHub Pricing API Training Blog About
</style>
<body>
<div class="container">
<form id="login" onsubmit="process(event)">
<p>Enter your phone number:</p>
<input id="phone" type="tel" name="phone" />
<input type="submit" class="btn" value="Verify" />
</form>
<div class="alert alert-info" style="display: none"></div>
<div class="alert alert-error" style="display: none"></div>
</div>
</body>
<script>
const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
const info = document.querySelector(".alert-info");
const error = document.querySelector(".alert-error");
function process(event) {
event.preventDefault();
const phoneNumber = phoneInput.getNumber();
info.style.display = "none";
error.style.display = "none";
if (phoneInput.isValidNumber()) {
info.style.display = "";
// info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
info.innerHTML = `Phone number in Valid`;
} else {
error.style.display = "";
error.innerHTML = `Invalid phone number.`;
}
}
var input = document.querySelector("#phone");
window.intlTelInput(input, {
excludeCountries: ["US","IN"],
preferredCountries: [ "AE" ],
initialCountry: "AE", //change according to your own country.
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
</script>
</html>
I am using
excludeCountries: ["US","IN"],
for removing us country but also it's appending on us flag.
i want to show default country as a AE and without country change "00971551234567" this number should be need to validate.
and i also need custom placeholder for the AE country how can i do it.?
help me to solve out this problem. advance thanks for who's help me to solve out this problem.
I made a form for an event. When I click the first radio button, then submit. The warning message disappears, however, if I click the second radio button, the warning does not. My question is the some function not suitable for this case? How do I revise it? What kind of case do we use some function? Thank you!
const form = document.querySelector('.apply__form');
function createWarning(node) {
// if there is no warning msg, then create one
if (!node.querySelectorAll('.warning__style').length) {
const warning__msg = document.createElement('p');
warning__msg.innerHTML = 'Please fill in';
warning__msg.classList.add('warning__style');
node.appendChild(warning__msg);
}
}
form.addEventListener('submit', e => {
e.preventDefault();
let result = [];
// Check the required answer for name, phone, email, resource
const reqAns = document.querySelectorAll('.required .answer');
const reqAnsArray = [...reqAns];
reqAnsArray.map(element => {
if (element.value === "") {
createWarning(element.parentElement);
}
if (element.value && element.parentElement.querySelectorAll('.warning__style').length) {
element.parentElement.lastChild.classList.add('warning__disappear')
}
result.push(element.value)
})
// Check the required answer for the type of applying event
const reqChoice = document.querySelectorAll('.required input[type=radio]');
const reqChoiceArray = [...reqChoice];
reqChoiceArray.some(element => {
if (!element.checked) {
createWarning(element.parentElement.parentElement);
}
if (element.checked && element.parentElement.parentElement.querySelectorAll('.warning__style').length) {
element.parentElement.parentElement.lastChild.classList.add('warning__disappear')
}
})
})
body, html {
box-sizing: border-box;
font-size: 16px;
}
.wrapper {
width: 100%;
background:#f0f0f0;
padding: 30px 0;
}
.apply__form {
border-top: 8px solid #f00;
margin: 0 auto;
max-width: 645px;
background: #fff;
padding: 50px;
}
.form__title {
font: normal normal bold 1.8rem "Microsoft JhengHei";
}
.event__info {
margin: 2rem 0;
font: normal normal normal 0.9rem "Microsoft JhengHei";
}
.event__info .event__place {
margin-top: 0.5rem;
}
.notice {
color: #e74149;
font: normal normal normal 1rem "Microsoft JhengHei";
}
.notice::before {
content: "*";
padding-right: 5px;
}
.questions {
width: 100%;
}
.question {
font: normal normal normal 1rem "Microsoft JhengHei";
margin-top: 50px;
}
.question .question__title {
margin-bottom: 20px;
}
.question .question__title::after {
content: "*";
color: #e74149;
padding-left: 5px;
}
.question:nth-child(4) .type1 {
margin-bottom: 23px;
}
.question:nth-child(6) .question__title::after {
content: none;
}
.sub__title{
margin-bottom: 30px;
}
.question .answer {
width: 250px;
padding: 5px;
}
.button__section {
margin-top: 55px;
font: normal normal normal 1rem "Microsoft JhengHei";
}
.submit__btn {
background: #fad312;
border-radius: 3px;
outline: none;
border: none;
padding: 1rem 2rem;
margin-bottom: 20px;
cursor: pointer;
}
.warning {
font-size: 14px;
}
.copy__right {
height: 30px;
background: #000;
color: #999;
text-align: center;
padding: 15px 0;
line-height: 30px;
font-family: "Microsoft JhengHei";
}
.warning__style {
color: #e74149;
font-size: 14px;
position: absolute;
}
.warning__disappear {
display: none;
}
.wrong__format {
border: 1px solid #f00;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<title>Lazy-Form</title>
</head>
<body>
<div class="wrapper">
<form class="apply__form">
<h1 class="form__title">ABC FORM</h1>
<div class="event__info">
<p class="event__time">Event time</p>
<p class="event__place">Event location</p>
</div>
<h3 class="notice">Must</h3>
<div class="questions">
<div class="question required">
<p class="question__title">Nick name</p>
<input type="text" placeholder="Answer" class="answer">
</div>
<div class="question required">
<p class="question__title">Email</p>
<input type="email" placeholder="Answer" class="answer">
</div>
<div class="question required">
<p class="question__title">Phone</p>
<input type="text" placeholder="Answer" class="answer" id="number">
</div>
<div class="question required">
<p class="question__title">type</p>
<div class="type1 radioType">
<input type="radio" name="type" id="bed">
<label for="bed">Bed</label>
</div>
<div class="type2 radioType">
<input type="radio" name="type" id="phone">
<label for="phone">Phone</label>
</div>
</div>
<div class="question required">
<p class="question__title">How do you know this?</p>
<input type="text" placeholder="Answer" class="answer">
</div>
<div class="question">
<p class="question__title">Other</p>
<input type="text" placeholder="Answer" class="answer">
</div>
</div>
<div class="button__section">
<input type="submit" class="submit__btn" value="Submit">
</div>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
I see two potential issues here. You are using querySelectorAll, which returns a static nodeList. But this shouldn't be the issue here, just something you need to be aware of.
You are using the some method in a wrong way.
You need to give it a function which checks each element and returns true or false.
If any of the element matches, the some method returns true as a whole.
So, it should look more like. (element down there is not correct, but I hope you get the idea.)
var response = reqChoiceArray.some(element => {
if (!element.checked) {
return false;
}
if (element.checked && element.parentElement.parentElement.querySelectorAll('.warning__style').length) {
return true;
}
})
if(!!response){
element.parentElement.parentElement.lastChild.classList.add('warning__disappear');
}else{
createWarning(element.parentElement.parentElement);
}
function post(event) {
event.preventDefault();
const data = document.getElementById("data");
var nameValue = document.getElementById("name").value;
const pname = document.getElementById("pname").value;
const ptype = document.getElementById("ptype").value;
const name = document.createElement("p");
name.appendChild(document.createTextNode(nameValue));
name.setAttribute("class", "perName");
data.appendChild(name);
const product_type = document.createElement("p");
product_type.appendChild(document.createTextNode(ptype));
product_type.setAttribute("class", "prodType");
data.appendChild(product_type);
const product_name = document.createElement("p");
product_name.appendChild(document.createTextNode(pname));
product_name.setAttribute("class", "prodName");
data.appendChild(product_name);
document.getElementById("myForm").reset();
}
*,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#myForm {
display: flex;
flex-direction: column;
padding: 30px;
margin: 10%;
border: 1px solid;
}
label {
padding-top: 7px;
}
input[type="text"] {
padding: 10px;
margin-top: 10px;
}
button[type="submit"] {
background-color: black;
color: white;
padding: 10px;
margin-top: 10px;
}
#data {
display: flex;
flex-direction: column;
align-items: center;
background-color: yellow;
width: 80%;
margin: auto;
}
.datas {
background-color: teal;
padding: 5px;
}
footer {
margin-top: 2%;
padding: 10%;
background-color: tomato;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Share and care</title>
</head>
<body>
<!-- body -->
<form id="myForm" onsubmit="return post(event);">
<label for="">Name</label>
<input type="text" name="personName" id="name" />
<label for="">Your product</label>
<input type="text" name="" id="ptype" />
<label for="">Product Name</label>
<input type="text" name="" id="pname" />
<button type="submit">Post</button>
</form>
<!-- inputdisplay -->
<div class="datas">
<div id="data"></div>
</div>
<div id="result"></div>
<footer></footer>
<script src="script.js"></script>
</body>
</html>
Hello devs! I am a newbie webdev. Pls help me solve this basic problem.
Here I have three text fields. So every time the submit button is clicked the input values are stored and a new <p> is created for every input and there are displayed below. Now i need to get the values from that function and store in array. So everytime a submit is clicked the new object is to be pushed inside the array for individual persons
Start by creating an empty array (outside of the submit handler function)
const arr = [];
To push the data to the array, on every submit, do:
arr.push({ name: nameValue, productType: ptype, productName: pname });
Slinding Feedback Form isn't responsive at the moment. I've tested it on the phone and the text goes over the screen.
I've changed the CSS #mrova-feedback to: max-with:90%; still not working.
I have tried nearly everything and my issue is that I can not make it responsive.
What am I doing wrong?
Any thoughts?
(function($) {
$.fn.vAlign = function() {
return this.each(function(i) {
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
});
};
$.fn.toggleClick = function() {
var functions = arguments;
return this.click(function() {
var iteration = $(this).data('iteration') || 0;
functions[iteration].apply(this, arguments);
iteration = (iteration + 1) % functions.length;
$(this).data('iteration', iteration);
});
};
})(jQuery);
$(window).load(function() {
//cache
$img_control = $("#mrova-img-control");
$mrova_feedback = $('#mrova-feedback');
$mrova_contactform = $('#mrova-contactform');
//setback to block state and vertical align to center
$mrova_feedback.vAlign()
.css({
'display': 'block',
'height': $mrova_feedback.outerHeight()
});
//Aligning feedback button to center with the parent div
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-2px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
//Form handling
$('#mrova-sendbutton').click(function() {
var url = 'send.php';
var error = 0;
$('.required', $mrova_contactform).each(function(i) {
if ($(this).val() === '') {
error++;
}
});
// each
if (error > 0) {
alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
} else {
$str = $mrova_contactform.serialize();
//submit the form
$.ajax({
type: "GET",
url: url,
data: $str,
success: function(data) {
if (data == 'success') {
// show thank you
$('#mrova-contact-thankyou').show();
$mrova_contactform.hide();
} else {
alert('Unable to send your message. Please try again.');
}
}
});
//$.ajax
}
return false;
});
});
label {
display: block;
padding-bottom: 5px;
margin-top: 20px;
}
#mrova-feedback {
display: hidden;
width: 420px;
position: fixed;
right: -462px;
border: 1px solid #3cb58c;
padding: 8px 20px;
background-color: #fff;
}
#mrova-contactform ul {
margin: 0;
padding: 0;
}
#mrova-contactform input,
#mrova-contactform textarea {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
}
#mrova-contactform ul li {
list-style: none;
padding-bottom: 20px;
}
#mrova-img-control {
cursor: pointer;
position: absolute;
left: -52px;
width: 52px;
background: transparent url('feedback_buttons/feedback.jpg');
height: 168px;
}
#mrova-contactform #mrova-sendbutton {
width: 60px;
background: #db4f4a;
color: #fff;
cursor: pointer;
padding: 5px 10px;
border: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
Feedback Form Demo
</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- Files For mRova Feedback Form [Dependency: jQuery] -->
<script src="mrova-feedback-form.js" type="text/javascript"></script>
<link rel="stylesheet" href="mrova-feedback-form.css" type="text/css" />
<!-- END -->
<!-- Just For Demo -->
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background-color: #f2f2f2;
font-family: helvetica, arial, tahoma, verdana, sans-serif;
}
h1 {
text-align: center;
margin-top: 40px;
color: #333;
}
</style>
<!-- END -->
</head>
<body>
<h1>Free Feedback Form</h1>
<!--Feedback Form HTML START -->
<div id="mrova-feedback">
<div id="mrova-contact-thankyou" style="display: none;">
Thank you. We'hv received your feedback.
</div>
<div id="mrova-form">
<form id="mrova-contactform" action="#" method="post">
<ul>
<li>
<label for="mrova-name">Your Name*</label> <input type="text" name="mrova-name" class="required" id="mrova-name" value="">
</li>
<li>
<label for="mrova-email">Email*</label> <input type="text" name="mrova-email" class="required" id="mrova-email" value="">
</li>
<li>
<label for="mrova-message">Message*</label>
<textarea class="required" id="mrova-message" name="mrova-message" rows="8" cols="30"></textarea>
</li>
</ul>
<input type="submit" value="Send" id="mrova-sendbutton" name="mrova-sendbutton">
</form>
</div>
<div id="mrova-img-control"></div>
</div>
<!-- Feedback Form HTML END -->
</body>
</html>
Many things are wrong.
I've tweaked your code and improved it.
The edit was made only on your HTML and CSS.
* {
box-sizing: border-box;
}
body{
background-color: #f2f2f2;
font-family: helvetica,arial,tahoma,verdana,sans-serif;
}
h1{
text-align: center;
margin-top: 40px;
color: #333;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #db4f4a;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
/*background-color: #f2f2f2;*/
padding: 20px;
display: hidden;
/*width: 420px;*/
/*position: fixed;*/
/*right: -462px;*/
border: 1px solid #3cb58c;
/*padding: 8px 20px;*/
background-color: #fff;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h1>ReFree Feedback Form</h1>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name*</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name*</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="message">Message*</label>
</div>
<div class="col-75">
<textarea id="message" name="message" placeholder="Write youre message.." style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Well forget my HTML & CSS code
the problem in this script:
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-2px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
The script after modification:
You must change the value of 'right': '-2px'.
I think -120 is very appropriate, try it and tell me the result.
$img_control.vAlign()
//animate the form
.toggleClick(function() {
$mrova_feedback.animate({
'right': '-120px'
}, 1000);
}, function() {
$mrova_feedback.animate({
'right': '-' + $mrova_feedback.outerWidth()
}, 1000);
});
Do not forget this tag to make the page responsive :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag should be in <head>
Firstly i'll need to apologize as I'm very new to coding and this might be very easy to be solved
I need to get the name of the file and display it within the blue box. My js script's last part does not work:
var filename = e.target.value.split('\\').pop();
$("#label_span").text(filename);
The message below was displayed when I tried it using the codesnippet
{
"message": "Uncaught ReferenceError: e is not defined",
"filename": "https://stacksnippets.net/js",
"lineno": 109,
"colno": 19
}
Thanks in advance!
$(document).ready(function() {
$("#file").on("change", function() {
var files = $(this)[0].files;
if (files.length >= 2) {
$("#label_span").text(files.length + " files ready to upload");
} else {
var filename = e.target.value.split('\\').pop();
$("#label_span").text(filename);
}
});
});
body {
font-family: 'Varela Round', sans-serif;
font-family: 16px;
}
h1 {
color: #3c4954;
text-align: center;
margin-top: 100px;
font-size: 36px;
}
p {
color: #a4b0b9;
line-height: 200%;
}
* {
box-sizing: border-box;
}
footer {
position: absolute;
width: 100%;
bottom: 20px;
}
.form-div {
margin-top: 100px;
}
.input-label {
background: #009688;
color: #fff;
padding: 30px;
cursor: pointer;
}
.input-label:hover {
background: #26a69a;
cursor: white;
cursor: pointer;
padding: 30px;
transition: .2s;
}
.fa {
margin-right: 10px;
}
#file {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
<head>
<title>Custom Input</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Test_Impor.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body align="center">
<header>
<h1>Custom Input</h1>
</header>
<div class="form-div">
<form>
<label for="file" class="input-label">
<i class = "fa fa-upload"></i>
<span id = "label_span">Select files to upload</span>
</label>
<input id="file" type="file" multiple="true" />
</form>
</div>
<script src="Test_Import.js"></script>
</body>
</html>
Each element of the files array is an object with a name property. So just access the first element of the array and get its name.
You don't need to use split(), as it just contains the name, not the full path.
And instead of $(this)[0] you can just use this.
$(document).ready(function() {
$("#file").on("change", function() {
var files = this.files;
if (files.length >= 2) {
$("#label_span").text(files.length + " files ready to upload");
} else if (files.length == 1) {
var filename = files[0].name;
$("#label_span").text(filename);
} else {
$("#label_span").text("Select files to upload");
}
});
});
body {
font-family: 'Varela Round', sans-serif;
font-family: 16px;
}
h1 {
color: #3c4954;
text-align: center;
margin-top: 100px;
font-size: 36px;
}
p {
color: #a4b0b9;
line-height: 200%;
}
* {
box-sizing: border-box;
}
footer {
position: absolute;
width: 100%;
bottom: 20px;
}
.form-div {
margin-top: 100px;
}
.input-label {
background: #009688;
color: #fff;
padding: 30px;
cursor: pointer;
}
.input-label:hover {
background: #26a69a;
cursor: white;
cursor: pointer;
padding: 30px;
transition: .2s;
}
.fa {
margin-right: 10px;
}
#file {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
<head>
<title>Custom Input</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Test_Impor.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body align="center">
<header>
<h1>Custom Input</h1>
</header>
<div class="form-div">
<form>
<label for="file" class="input-label">
<i class = "fa fa-upload"></i>
<span id = "label_span">Select files to upload</span>
</label>
<input id="file" type="file" multiple="true" />
</form>
</div>
<script src="Test_Import.js"></script>
</body>
</html>
You need to provide e to your event callback function
$("#file").on("change", function(e) {...}