I've been searching a lot for a good mootools script for a simple newsletter signup form with a one-line input field + send button.
Some things I'm trying to consider:
form submission without reloading
I don't want to have to use jQuery or
Protoype or any other library outside
of Mootools (I already have Mootools
for some other parts of the site, and
adding more libraries to that would
create too much clutter I think?)
Trying to find one with nice but
simple effects (like the spinning
"loading" image when it's
sending...but only found this for
jQuery/Prototype so far)
I'm using clean urls: .htaccess to
send the URI to index.php, which then
parses the URL and figures out what
php files to include to create each
page. In other words, I'm not sure
if there's a way to do the
validation/insert entries into mysql
without messing with the URL?
Any help would be much appreciated, thank you!
You can use the Ajax.Form method, found here - This is an ajax post/post-back method for storing your data.
Here's the skinny on the code:
$('myForm').addEvent('submit', function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();
/**
* This empties the log and shows the spinning indicator
*/
var log = $('log_res').empty().addClass('ajax-loading');
/**
* send takes care of encoding and returns the Ajax instance.
* onComplete removes the spinner from the log.
*/
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
});
HTML/CSS to use with this reference code:
<h3>Send a Form with Ajax</h3>
<p>See ajax.form.phps</p>
<form id="myForm" action="demos/Ajax.Form/ajax.form.php" method="get">
<div id="form_box">
<div>
<p>First Name:</p>
<input type="text" name="first_name" value="John" />
</div>
<div>
<p>Last Name:</p>
<input type="text" name="last_name" value="Q" />
</div>
<div>
<p>E-Mail:</p>
<input type="text" name="e_mail" value="john.q#mootools.net" />
</div>
<div>
<p>MooTooler:</p>
<input type="checkbox" name="mootooler" value="yes" checked="checked" />
</div>
<div>
<p>New to Mootools:</p>
<select name="new">
<option value="yes" selected="selected">yes</option>
<option value="no">no</option>
</select>
</div>
<div class="hr"><!-- spanner --></div>
<input type="submit" name="button" id="submitter" />
<span class="clr"><!-- spanner --></span>
</div>
</form>
<div id="log">
<h3>Ajax Response</h3>
<div id="log_res"><!-- spanner --></div>
</div>
<span class="clr"><!-- spanner --></span>
Additional reference CSS:
#form_box {
float: left;
width: 290px;
background: #f8f8f8;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
font-size: 11px;
font-weight: bold;
padding: 0.5em;
margin-top: 10px;
margin-bottom: 2px;
}
#form_box div {
height: 25px;
padding: 0.2em 0.5em;
}
#form_box div.hr {
border-bottom: 2px solid #e2e2e1;
height: 0px;
margin-top: 0pt;
margin-bottom: 7px;
}
#form_box p {
float: left;
margin: 4px 0pt;
width: 120px;
}
#log {
float: left;
padding: 0.5em;
margin-left: 10px;
width: 290px;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
margin-top: 10px;
}
#log_res {
overflow: auto;
}
#log_res.ajax-loading {
padding: 20px 0;
background: url(http://demos111.mootools.net/demos/Group/spinner.gif) no-repeat center;
}
Hope this helps.
to fix the north creative example so it works with 1.2+:
http://jsfiddle.net/dimitar/gEdqa/
the code to intercept the form submission is as simple as can be:
document.id("myForm").addEvent("submit", function(e) {
e.stop();
new Request({
url: this.get("action"),
method: "post",
data: this,
onRequest: function() {
document.id("result").set("html", "sending...");
// or do whatever spinner you want.
},
// update: $("results"),
// evalScripts: true, // etc etc options to request class
onComplete: function() {
document.id("result").set("html", this.response.text);
}
}).send();
});
also, storing a request instance in the element.send prototype shortcut still works but i will leave you to read up on the details.
Related
I couldn't do this because my javascript part was not good. I have a design in mind. When you click the button and upload the picture, the picture will appear in that circle. At the same time if you want to remove the cross button.
Theme screenshot
<div class="upload">
<img src="images/upload.png" class="uploadImage" alt="">
<input type="file" class="imageUpload">
<style>
.upload{
width: 130px;
height: 130px;
border-radius: 50%;
border: 3px dashed #ddd;
}
input[type="file"].imageUpload{
cursor: pointer;
font: 300 14px sans-serif;
color:#9e9e9e;
width: 128px;
height: 128px;
border-radius: 50%;
background: rgba(0, 0, 0, 0);
position: relative;
z-index: 2;
display: block;
margin-top: -2px;
}
input[type="file"].imageUpload::-webkit-file-upload-button{
display: none
}
img.uploadImage{
position: absolute;
margin-top: 41px;
z-index: 1;
left: 70px;
width: 39px;
}
</style>
There is a design for the album page. I'm gonna use a design here. Click on the button and the image after the bear will be listed next to the size button. At the same time the cross button can be removed at any time.
Theme screenshot
I would appreciate it if you tell me with a simple design. It's like I can handle it myself if I understand your logic.
Somewhat like you want
<form>
<input required type="file" name="fileToUpload" multiple data-preview-to="#preview" />
<div id=preview></div>
<input type=hidden name="who-sent" value="jake sent me">
<button>submit</button>
</form>
$($(this).data("preview-to")).html($.map(this.files, function(f) {
return `<figure>
<img src="${URL.createObjectURL(f)}">
<figcaption><input type=checkbox checked> ${f.name}</figcaption>
</figure>`
}))
JSFiddle Example
I'm currently trying to inform a user about the form details they input.I'm not very clear how to go about this but what i thought of doing was to 1 html file to have the "form" and in the action ="htmlfile2.url" where the user has to be shown what his input was.
so currently i have 2 html files. The first one is a form to fill. the second html file is a modal pop up. In this pop up i want to show the user the details that they have entered. The issue is the name the user enter has to come to the second page on submitting ( after clicking the submit button the user gets directed to "htmlfile2" where the modal is shown. What i have so far is this.
HTML File 1
<div class="feedback-background">
<div class="feedback-content">
<div class="close">+</div>
<img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">
<form name="FeedbackForm" action="htmlfile2.html" onclick="return validation()" method="post">
Name:
<input id="Name" name="Name" type="text" placeholder="Name">
E-Mail:
<input id="E-mail" name="E-mail" type="email" placeholder="E-mail">
What do you think about us?<br>
<textarea id="comment" rows="6" cols="33" name="comment"></textarea>
<br>
How would you rate us ?
<br>
<label><input type ="radio" name="rating" id="rating" value="Excellent" checked>Excellent</label>
<label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
<label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
<label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
<label><input type ="radio" name="rating"id="rating" value="Extreamly Poor">Extremely Poor</label>
<br>
SUBMIT
</form>
</div>
</div>
HTML File 2
<body>
<div class="popup">
<div class="popuptext" id="myPopup"><p>Thank you <span id="username"></span> ,<br>Your feedback has been recorded.<br>
<br>You commented that"<span id="usercomment"></span>" <br><br>and rated our website "<span id="userrating"></span>".
<br><br>Thank you
for taking your time to do so.<br><br>You will now be re-directed automatically</p>
</div>
</div>
</body>
CSS File for both (Please note that the css file contain other styling done for other pages this is the entire css)
/*----------comment form----------*/
.feedback-background{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
display:none;
}
.feedback-content{
width: 500px;
height: 550px;
background-color: white;
border-radius: 4px;
padding: 20px;
position:relative;
}
#submit{text-transform:uppercase;
padding:6px 2px;
margin-right: 40px;
margin-top: 20px;
background: #ee0c6e;
font-weight:600;
color:white;
border-radius: 3px;
font-size: 10px;
min-width: 100px;
text-decoration:none
}
input {
width: 50%;
display: block;
margin: 10px 0px;
}
label {
display: block;
}
input[type="radio"]{
width: auto;
display: inline;
}
.close{
position:absolute;
top:0px;
right:14px;
transform:rotate(45deg);
font-size:42px;
cursor:pointer;
}
#feedbacksubmit{
margin-left:600px;
margin-bottom:50px;
background-color:#484848;
border-radius:14px;
padding:10px;
cursor:pointer;
color:white;
outline:none;
}
/*-----popup----*/
.popup{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.popuptext{
width: 100px;
height: 350px;
background-color: #000025;
border-radius: 4px;
padding: 20px;
position:relative;
color:#fff;
width: 20%;
height:30%;
display: block;
margin: 10px 0px;
text-align:center;
margin-left:0px;
margin-bottom:80px;
}
What i want to do is after the first html (which contains the form) is submitted , it has to get directed to the second html where it basically say thank you to the person filling the form. Here i want to access the name the user added into the form ( if he entered "john") i want to say thank you John "Inside the SECOND HTML AFTER GETTING DIRECTED UPON submitting (sorry for caps that was just to highlight it)
If there is a better way to go about this please enlighten me. Thank you so much all.Also please note that i only know JavaScript . Dont know how to work with JQuery or PHP
For the sake of knowledge, You can get data in HTML File 2 using Javascript, use the following code in HTML File 2:
window.onload = function () {
var url = document.location.href;
var params = url.split('?')[1].split('&');
var data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById('username').innerHTML = data.name;
}
Nothing special we are just extracting data from the URL (HTTP Request) that was sent from the HTML file 1 form using some string functions.
But the proper way is to use some backend language.
A solution to your problem using php would be something like:
<?php
if(!empty($_POST['name']) && !empty($_POST['comment']) && !empty($_POST['rating'])): // you should also include other checks... ?>
<body>
<div class="popup">
<div class="popuptext" id="myPopup">
<p>
Thank you <span id="username"><?php echo $_POST['name'];?></span> ,<br>Your feedback has been recorded.<br>
<br>You commented that"<span id="usercomment"><?php echo $_POST['comment'];?></span>" <br><br>and rated our website "<span id="userrating"><?php echo $_POST['rating'];?></span>".
<br><br>Thank you
for taking your time to do so.<br><br>You will now be re-directed automatically
</p>
</div>
</div>
</body>
<?php endif; ?>
You could also use other programming languages, but I hope this can help you.
I recently designed a webpage, I am not a web developer, so I collected pieces and bits from various locations and kinda stitched them up.
Now, the page is fully designed and works in firefox, chrome and IE.
But it does not work on Safari.
Here is the code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="referrer" content="origin">
<script>
var counter = 0;
var limit = 50;
function addInput(divName, arrName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' required>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<style>
html *
{
color: #000 !important;
font-family: Arial !important;
}
.wrapper
{
height: 100%;
width: 100%;
display: flex;
overflow:auto;
}
.window
{
width: 100%;
min-height: 200px;
display: flex;
flex-direction: column-reverse;
float: none;
align-items: center;
justify-content: center;
}
.windowContent
{
}
input[type=text], select {
width: 150%;
padding: 6px 10px;
margin: 4px 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 80%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]{
width: 50%;
background-color: #9CAFFF;
color: white;
padding: 6px 5px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 0px;
float: left;
width: 75%;
margin: 5px;
margin-left: 0.5cm;
}
.floating-box {
float: left;
width: 100%;
margin: 5px;
margin-left: 0.5cm;
border: 3px solid #73AD21;
}
</style>
</head>
<body onload="GenerateEmotion()">
<div class="wrapper">
<div class="window">
<div class="windowContent">
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
<div id="dynamicInput_1">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_2">
<div class="floating-box">Sally heard a knock on the door.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_2', 'myInputs_2');">
</div>
<div id = "dynamicInputHolder">
<div id="dynamicInput_3">
<div class="floating-box">Her heartbeat fast, Sally began to walk down the aisle.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_3', 'myInputs_3');">
</div>
<br>
<input type="submit" value="I have completed a story">
</form>
<script>
function GenerateEmotion(){
var emotion = "";
var raw = Math.random();
var final = Math.ceil(raw * 4);
if (final == 1)
document.getElementById("emotion").value = "Happy";
else if (final == 2)
document.getElementById("emotion").value = "Sad";
else if (final == 3)
document.getElementById("emotion").value = "Angry";
else if (final == 4)
document.getElementById("emotion").value = "Surprise";
}
</script>
</div>
</div>
<div class="window">
<div class="windowContent">
<p><font size="6"><b>Emotionalize it!</b></font></p>
<p><font size="3">We are trying to develop computer programs that can understand common emotions, so they can communicate better with human users.</font></p>
<p><font size="5"><b> Rules of the game </b></font></p>
<font size="3">
<p>Imagine you are a narrator. Today, you are narrating a story of John and Sally's wedding.</p>
<p>Your goal is to make your audience experience the emotion written on the left top. </p>
<p>We are helping you to maintain the flow, you just need to connect the dots!</p>
<p>As your story will be fed to a giant computer program, so can you:</p>
<ul>
<li>Please use simple language. Do NOT use compound, complex, or conditional sentences</li>
<li>Please do not use pronouns. Use the name - John instead of 'him'</li>
<li>Please use the past tense and active voice.</li>
<li>Please make sure to include events from the beginning to the end.</li>
<li>You want more characters? If yes, Please use David(male) and Amy(female)</li>
<li>You can use the also include character based actions, e.g. 'A waiter ...'</li>
<li>Your audiance should experience the said emotion</li>
</ul>
</font>
</div>
</div>
</div>
</body>
</html>
Specifically, what does not work:
button click to 'add new sentences'
submit
Is there any error: No, nothing happens after touch-clicking the button
What I am looking out for:
If you web developer guys can figure out why it does not work on Safari, it would be great help.
How to change that part, so functionality remains the same, but it works on safari
As I am already asking this question, another side question would help. can I know how to fix the scrollbar at the bottom?
PS_1: If you don't feel like copy pasting this code, it is in working condition here
PS_2: WHen I say safari, I mean the one on the iPhone
Try moving the "Emotion" input text box outside of the "dynamicInput_1" div. So, instead of:
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
<div id="dynamicInput_1">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
Try:
<form method="POST" action="http://formspree.io/sga267#uky.edu" align="center">
<div id = "dynamicInputHolder">
Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
<div id="dynamicInput_1">
<div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
</div>
<input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
</div>
Also, take a look at this explanation of the use of id and class: div class vs id
You've got several divs using the same id. ids should be unique.
I'm not sure what you mean about fixing the scrollbar at the bottom, so I haven't addressed that question.
Do you have the javascript turned on in Safari?
Desktop: https://support.ezimerchant.com/hc/en-us/articles/200836150-How-do-I-enable-cookies-and-JavaScript-in-Safari-Mac-
Mobile: https://www.whatismybrowser.com/guides/how-to-enable-javascript/safari-iphone-ipod
I know there are many question about it, but they don't answer properly.
After readings and looking for, I tried this:
<input id="ext-element-47" class="x-input-file x-input-el" type="file" accept="" style="display:none">
hiding the file-input and then
this.element.down(".x-input-file").dom.click();
this works on Chrome's console but in my JS code it doesn't. It doesn't click.
Anyone knows why? and what can I do for make click?
Notes:
I need to make click because the file element is not visible and so when it clicks it does not show unless I do element.click ().
Here is an example what I'm doing:
document.getElementsByClassName('o-file-field-input')[0].click()
.o-file-field-input {
display: none;
}
.o-big-btn {
background-color: red;
height: 3em;
width: 3em;
}
<div class="x-container x-unsized o-cont-option" data-componentid="ext-container-5" id="ext-container-5">
<div class="x-inner x-align-center x-pack-center x-horizontal x-layout-box" id="ext-element-50">
<div class="x-button x-button-plain open-field-icon o-big-btn x-layout-box-item x-flexed x-stretched" id="ext-OUI_BaseButton-1" data-componentid="ext-OUI_BaseButton-1" tabindex="0" style="-webkit-box-flex: 1;">
<span class="x-button-icon x-shown smf smf-upload-file" id="ext-element-45"></span>
<div class="o-button-bg"></div>
<div class="x-unsized x-field-input x-has-height" id="ext-fileinput-1" data-componentid="ext-fileinput-1" style="height: 38px;">
<input id="ext-element-47" class="x-input-file x-input-el o-file-field-input" type="file" accept="">
<div class="x-field-mask x-hidden-display" id="ext-element-48"></div>
<div class="x-clear-icon" id="ext-element-49">
</div>
</div>
</div>
</div>
</div>
See ya!
Here's what I usually do: Wrap the input inside a <label> element, and then style the element as a button, for example:
.pretty-file {
border: 1px solid #000;
cursor: pointer;
display: inline-block;
padding: 5px 15px;
}
.pretty-file input[type="file"] {
display: none;
}
<label class="pretty-file">
Choose File
<input type="file" />
</label>
This finally works well:
var obElement = document.getElementsByClassName('input-file')[0];
//the title property overrides tooltip's description
obElement.setAttribute('title', ' ');
.flex-style{
display: flex;
}
.input-file{
opacity: 0;
margin-left: -40px;
width: 40px;
height: 45px;
}
.icon{
width: 40px;
height: 45px;
background-color: blueviolet;
}
<div class='flex-style'>
<div class='icon'></div>
<input class='input-file' type='file'>
</div>
I have used the below the code for make required field but I need to show like below image
Please check following link to view my code
My Code : JSFIDDLE
<form action="" method="POST" id="formID">
Your name: <input id="yourname" required /><span id="yournameMsg" style="margin-left:6px;color:darkred;"></span>
<br />
<input type="submit" />
</form>
Note : I have used Safari browser.
Thanks
This should be closer to what you want: http://jsfiddle.net/mikiqex/US4sr/15/
Please note that the whole tip (arrow, triangle) has to be in a solid color, so it can't be bordered like in your picture above.
It's customized CSS from http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
.triangle-isosceles:after {
border-color: #ddd transparent;
border-width: 0 10px 10px;
border-style: solid;
bottom: auto;
content: "";
display: block;
position: absolute;
width: 0;
left: 30px;
top: -10px;
}
.triangle-isosceles {
background: #ddd;
box-shadow:0 1px 3px #888;
border-radius: 4px;
border:1px solid #ddd;
color: #000000;
margin-top:6px;
margin-left:130px;
padding: 8px 15px;
position: absolute;
width:160px;
display:none;
}
Try to use jquery validate plugin and the tooltip from jquery ui or third part plugin.
solution in jsfiddle:
http://jsfiddle.net/US4sr/9/
To learn more:
Use HTML5 inputs and style the bubble by CSS3,
HTML5 Input example:
<input type="number" />
CSS3 options:
::-webkit-validation-bubble
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-message
Check this article:
http://www.broken-links.com/2011/06/16/styling-html5-form-validation-errors/
Or use 'jQuery inline form validation':
http://www.position-relative.net/creation/formValidator/demos/demoValidators.html