I use these libraries:
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
And I have a hidden form that only shows if I click the button. But I can't close it.
I find this example in the Internet and I have tried to implement it in my page.
Need help, I have tried a lot and nothing works.
Here is my code:
<div id="login-box" class="login-popup">
<img src="icon/close_pop.png" class="btn_close" title="Close Window" alt="Close" />
<form method="post" class="signin" action="#">
<legend>Contacto</legend>
<fieldset class="textbox">
<label class="Nome">
<span>Nome</span>
<input id="nome" name="nome" value="" type="text" autocomplete="on" placeholder="Nome">
</label>
<label class="Email">
<span>Email</span>
<input id="email" name="email" value="" type="email" placeholder="nome#dominio.com">
</label>
<label class="Mensagem">
<span>Mensagem</span>
<textarea rows="20" cols="56" name="mensagem" id="comment" id="mensagem" placeholder="A sua mensagem..."></textarea></label>
<button type="submit" class="submitbutton" style="width:80px;height:30px">Enviar</button>
</fieldset>
</form>
</div>
<script type="text/javascript">$(document).ready(function() {
$('a.login-window').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
You have a typo in your selectors; you probably want to change $('a.close, #mask') to $('a.closest, #mask').
Also, .live() is deprecated since jQuery 1.7, use .bind() instead.
Made a JSFiddle: http://jsfiddle.net/fhuNd/
You don't have a proper jquery selector, i.e. The jquery selector you have used doesn't point to any element in your page, hence it doesn't work.
use $('a.closest')
Related
As my title suggests, I'm trying to create a form that would take some user input like Name, Age, Gender, Hobbies, Contact details & Photo etc. (basically I'm thinking of making a simple local html based application that would create RESUME), and after taking user input, supposedly after clicking on the submit button it should create a new print window where every entered data should be arranged in a resume like format including photo.
This is what I'm trying for my input page...(ps: it's incomplete!!! most of my script part is just Ctrl+C & Ctrl+V 🤣
<!DOCTYPE html>
<html>
<head>
<title>Resume maker</title>
</head>
<body>
<div id="BMain" class="body">
<h1>Please enter your resume data!</h1>
<form action="#">
<p>Name</p>
<input type"text" id="name" name="name">
<p>Mother's name</p>
<input type"text" id="mName" name="mName">
<p>Father's name</p>
<input type"text" id="fName" name="fName">
<p>Gender</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<div class="container" id"dobPick">
<p>Date of Birth</p>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'L'
});
});
</script>
</div>
</div>
<label for="myfile">Upload your photo:</label>
<input type="file" id="myPic" name="myPic"><br><br>
<input type="submit">
</form>
After clicking on the submit button I'm expecting a print window with predefined background image like some vector art or some stamp like image or some pattern, well that's post work.
This is how my print window should be looking...
Print window
Any help on this mates..... at this stage scripts looks too messy to me. I'm excited to try this on my browser.
My question is how can I make it happen or rather I say what should I do or add into my input page to get the desired output I'm expecting? My above code was just a conceptual example.
The easiest way to do this would be to add a second div element to the page outside of your form. Once the form is validated and submitted, it can be hidden and the second div can be populated with that information. You can then use CSS media queries (there are print-specific queries) and trigger the print() method in Javascript. You would need to include the following in your html file:
<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">
Then, if your markup were to look like this:
<div id="resumeform">
<input id="name" type="text" />
<input id="age" type="text" />
<input id="address" type="text" />
<input id="height" type="text" />
<input id="btnSubmit" type="button" value="Submit Info"/>
</div>
<div id="result">
<span id="r_name"></span>
<span id="r_age"></span>
<span id="r_address"></span>
<span id="r_height"></span>
</div>
Your JS could look like this:
var btn = document.getElementById("btnSubmit");
btn.addEventListener("click", btnHandler);
function btnHandler(el){
var resumeform = document.getElementById("resumeform");
var result = document.getElementById("result");
var name = document.getElementById("name");
var age = document.getElementById("age");
var address = document.getElementById("address");
var height = document.getElementById("height");
var r_name = document.getElementById("r_name");
var r_age = document.getElementById("r_age");
var r_address = document.getElementById("r_address");
var r_height = document.getElementById("r_height");
r_name.innerHTML = name.value;
r_age.innerHTML = age.value;
r_address.innerHTML = address.value;
r_height.innerHTML = height.value;
resumeform.style.display = "none";
result.style.display = "block";
window.print();
}
And your CSS could look like this:
#resumeform {
display: block;
}
#result {
display: none;
}
input {
width: 200px;
display: block;
margin: 10px;
}
#media print {
span {
/* Your CSS rules would go here */
}
}
Working Fiddle:
https://jsfiddle.net/9apfwjxz/
I want to do a validation registration form. How to display the error of the input empty in a span at the bottom of the input?
I want this span to not already exist and be created to display the message.
enter code here
<form action="" name="reg-form" method="post">
<div id="name-box" onblur="validateFullname()" class="form-holder">
<input type="text" name="name" placeholder="enter name" id="name" class="form-control">
</div>
i want create a span element and display message after input or append to div.
The solution will look something like this:
Identify where the "Error Message" span will appear. It needs to be inside another element, even if that element is the body. My example contains: <div id="ErrMsg"></div>
You need an event that triggers both the validation, and the creation of the error span. Usually, that event is a button press. So let's go with that in this example:
$('#mybutt').click(function(){
var tmpL = $('#login').val();
var tmpP = $('#pword').val();
if( tmpL=='' || tmpP=='' ){
$('#ErrMsg').html('<span>Please fill-out all fields</span>');
}else{
alert('Logging in now');
}
});
$('input').on('keyup', function(){
if ( $('#ErrMsg span').length ) $('#ErrMsg span').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="LoginDIV">
<div id="LName">
Login: <input id="login" type="text" />
</div>
<div id="LPass">
Pword: <input id="pword" type="password" />
</div>
<div id="ErrMsg"></div>
<div id="btnDIV"><button id="mybutt">Login</button></div>
</div>
Note: the <script> tag that references the jQuery library is all that you need in order to use jQuery. jQuery just makes javascript easier, more consistent, and less-typing-required.
Your best bet is probably to use JQuery Validation. It's built-in methods don't technically use a span, as you specified, but you could easily tack on your own function to un-hide the custom span you create. Or, better yet, just style their error-message <label> in the way you prefer.
Here's an example using just JQuery Validation:
<form action="/" method="post" id="commentForm">
<div class="form-holder">
<input type="text" name="username" placeholder="username" class="form-control">
</div>
<div class="form-holder col-12">
<input type="email" name="email" placeholder="email" class="form-control">
</div>
</form>
<script>
var validator = $("#commentForm").validate();
validator.showErrors({
"email": "Please enter a valid email address"
});
</script>
(The example leaves out the includes for JQuery and JQuery Validation.)
I want to set different values of button under different situations. The modal display style is "none" at first. I try to use $("#submitform").value ="Add Event"; however, it doesn't work. When the modal pops up, the button value is still empty.
var btn = document.getElementById("myBtn");
btn.onclick = function() {
$("#submitform").value ="Add Event";
modal.style.display = "block";
};
<div id = "myModal" class = "modal">
<form name="addEvtForm" class="addEvtForm" >
title:<input type="text" name="title" id="title" autocomplete="title"><br>
<input type="button" value="" id="submitform">
</form>
</div>
First, you didn't add jQuery to the html, so the .value didn't work.
Second, there was invalid syntax for your code.
I fixed it up:
$("#submitform").click(function() {
$('#submitform').val('Add Event');
$(".modal").css("display", "block");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "myModal" class = "modal">
<form name="addEvtForm" class="addEvtForm" >
title:<input type="text" name="title" id="title" autocomplete="title"><br>
<input type="button" value="" id="submitform">
</form>
</div>
This should work.
try :
$('#submitform').val('Add Event');
or:
document.getElementById("submitform").value = "Add Event";
I can't figure out why my code doesn't work, I would appreciate if you help me, I need when you click on overlay or close button, overlay will be close.
<div class="callback-form promo">
<form name='promoform' id="promoform">
<span class="close-btn close">✖</span>
<input type="text" name="name" placeholder="Имя" maxlength="30">
<input type="tel" name="phone" placeholder="Телефон" maxlength="20">
<input class="callback-submit" type="submit" value="Отправить" name="save" id="sendPromo" disabled>
</form>
</div>
js:
$(".callPromo").click(function() {
$(".callback-form.promo").css("display", "block");
$(".close").click(function() {
$(".callback-form.promo").css("display", "none");
});
$(".callback-form.promo").on("click", function(e) {
var clicked = $(e.target);
var x = $(".callback-form.promo #promoform");
console.log(clicked);
if (clicked != x) {
$(".callback-form.promo").css("display", "none");
}
});
});
Your .close click event and callback-form.promo firing in same time. Use stopPropagation() for no firing other.
Try below.
$(".callPromo").click(function() {
$(".callback-form.promo").css("display", "block");
});
$(".close").click(function(e) {
$(".callback-form.promo").css("display", "none");
e.stopPropagation();
});
$("#promoform input").on("click", function(e) {
e.stopPropagation();
})
$(".callback-form.promo").on("click", function(e) {
e.stopPropagation();
var clicked = $(e.target);
var x = $(".callback-form.promo #promoform");
console.log(clicked)
if (clicked != x) {
$(".callback-form.promo").css("display", "none");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="callback-form promo" style="background:red;width:300px;height:300px">
<form name='promoform' id="promoform">
<span class="close-btn close">✖</span>
<input type="text" name="name" placeholder="Имя" maxlength="30">
<input type="tel" name="phone" placeholder="Телефон" maxlength="20">
<input class="callback-submit" type="submit" value="Отправить" name="save" id="sendPromo" disabled>
</form>
</div>
So it looks like your HTML you've provided doesn't match what the jQuery is looking for, .callPromo but perhaps this is just your activator and you've not included it? Also you have two additional click events nested in your initial click event. This isn't necessary and may be what is causing you the issue. Try putting all three click events in the same scope.
So, I searched for a while to see if I can disable the yellow color bg chrome adds to fields it remembers... This is a little annoying to my theme.
I found this code that fixes it!
<script type="text/javascript">
$(function() {
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
var intervalId = 0;
$(window).load(function() {
intervalId = setInterval(function () { // << somehow this does the trick!
if ($('input:-webkit-autofill').length > 0) {
clearInterval(intervalId);
$('input:-webkit-autofill').each(function () {
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
}
}, 1);
});
}
});
</script>
The issue is this little flash of yellow when you try it
Also here is my form....
<form action="login.php" method="post" class="form-container">
<input class="menu_button" type="submit" value="Login">
Register<br>
<input autocomplete="off" class="form-field" value="Username" type="text" name="username" onfocus="if (this.value=='Username') this.value='';"/><br />
<input class="form-field" value="Password" type="password" name="password" onfocus="if (this.value=='Password') this.value='';"/><br />
</form>
Is this simply because Chrome has glitches with it or something of that sort....
Is it even possible to fix?
You could hide the elements with CSS
/* may as well target Chrome (catches Safari too tho) */
#media screen and (-webkit-min-device-pixel-ratio:0){
input{
opacity:0;
}
}
Then show them after that webkit business kicks in.
$('input').css({opacity:1});
Yes they'll be invisible on load but that shouldn't really be noticeable.