Hi how i can render a different form using leanModel dialog box? Currently this is how the lean model works:
<a id="go" rel="privateMsg" name="signup" href="#signup">With Close Button</a>
<div id="signup" style="display: none; position: relative; opacity: 1; z-index: 11000; left: 50%; margin-left: -202px; top: 200px;">
<div id="signup-ct">
<div id="signup-header">
<h2>Create a new account</h2>
<p>It's simple, and free.</p>
<a class="modal_close" href="#"></a>
</div>
<form action="">
<div class="txt-fld">
<label for="">Username</label>
<input id="" class="" name="" type="text">
</div>
<div class="txt-fld">
<label for="">Email address</label>
<input id="" name="" type="text">
</div>
<div class="txt-fld">
<label for="">Password</label>
<input id="" name="" type="text">
</div>
<div class="btn-fld">
Cancel
<button type="submit">Sign Up</button>
</div>
</form>
</div>
</div>
$(function() {
$('a[rel*=privateMsg]').leanModal({ top : 100, closeButton: ".modal_close,.close" });
});
The leanModel js is as follows :
(function($){
$.fn.extend({
leanModal:function(options){
var defaults={top:100,overlay:0.5,closeButton:null};
var overlay=$("<div id='lean_overlay'></div>");
$("body").append(overlay);
options=$.extend(defaults,options);
return this.each(function(){
var o=options;
$(this).click(function(e){
var modal_id=$(this).attr("href");
$("#lean_overlay").click(function(){
close_modal(modal_id)
});
$(o.closeButton).click(function(){
close_modal(modal_id);
});
var modal_height=$(modal_id).outerHeight();
var modal_width=$(modal_id).outerWidth();
$("#lean_overlay").css({"display":"block",opacity:0});
$("#lean_overlay").fadeTo(200,o.overlay);
$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":"100px"});
$(modal_id).fadeTo(200,1);e.preventDefault()
});
});
function close_modal(modal_id){
$("#lean_overlay").fadeOut(200);$(modal_id).css({"display":"none"})
}
}
});
})(jQuery);
How i can improve this code so that i can open a dialog box just for any form? Also if i would like to load signup div from ajax how can i do so? Thanks
Related
I have small form with checkbox. When I fill the form and save data to database and try to fill it with another data to save it to database my checkbox doesn't work. It works only when I refresh page. here is code.
<form action="javascript:saveNewBreakfast();" name="basic_validate"
id="breakfast_validate" novalidate="novalidate">
<div class="control-group" id="add_breakfast" style="display: none">
<div class="control-group">
<label class="control-label">Select new one</label>
<div class="controls">
<select name="required" id="breakfast_select">
</select>
</div>
</div>
<div class="control-group">
<label class="checkbox-inline"><input
id="is_free_breakfast" type="checkbox" checked>Is
free ? </label>
</div>
<div class="control-group" id="price_breakfast" style="display: none">
<label class="control-label">Price</label>
<div class="controls">
<input type="number" min="0"
style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;"
id="breakfast_price"> EUR
</div>
</div>
<div class="control-group">
<button type="submit" class="btn btn-mini; btn-success">Save</button>
</div>
</div>
</form>
$('#is_free_breakfast').change(function(){
getIsFree = $('#is_free_breakfast').is(':checked');
if(getIsFree){
$('#price_breakfast').hide();
}else{
$('#price_breakfast').show();
}
});
You will need to explicit reset the form if you are using js handler for form submit (action="").
Something like:
function saveNewBreakfast() {
// submit handler code
// reset the form to initial values
$('#breakfast_validate')[0].reset();
// show/hide the input based on checkbox's initial values
$('#is_free_breakfast').change();
}
NOTE: reset is a HTML DOM Element method (i.e. plain js function), and not
a jQuery one, so $('selector')[0] is used to convert jquery object to DOM element. Or you can use plain js
document.getElementById('breakfast_validate').reset();
Here's a demo:
function saveNewBreakfast() {
// submit hanlder code
alert('saved with price: ' + ($('#breakfast_price').val() || 'free'));
$('#breakfast_validate')[0].reset();
$('#is_free_breakfast').change();
}
$('#is_free_breakfast').change(function() {
getIsFree = $('#is_free_breakfast').is(':checked');
if (getIsFree) {
$('#price_breakfast').hide();
} else {
$('#price_breakfast').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:saveNewBreakfast();" name="basic_validate" id="breakfast_validate" novalidate="novalidate">
<div class="control-group" id="add_breakfast">
<div class="control-group">
<label class="control-label">Select new one</label>
<div class="controls">
<select name="required" id="breakfast_select">
</select>
</div>
</div>
<div class="control-group">
<label class="checkbox-inline"><input
id="is_free_breakfast" type="checkbox" checked>Is
free ? </label>
</div>
<div class="control-group" id="price_breakfast" style="display: none">
<label class="control-label">Price</label>
<div class="controls">
<input type="number" min="0" style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;" id="breakfast_price"> EUR
</div>
</div>
<div class="control-group">
<button type="submit" class="btn btn-mini; btn-success">Save</button>
</div>
</div>
</form>
$(document).ready(function () {
var html_content = '<label class="control-label">Price</label>' +
'<div class="controls">' +
'<input type="number" min="0"' +
'style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;"' +
'name="breakfast_price" id="breakfast_price"> EUR' +
'</div> ';
$('#is_free_breakfast').change(function () {
getIsFree = $('#is_free_breakfast').is(':checked');
if (getIsFree) {
$('#price_breakfast').empty();
} else {
$('#price_breakfast').html(html_content);
}
});
});
function form_submit(){
var queryString = $('#breakfast_validate').serialize();
console.log(queryString);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:saveNewBreakfast();" name="basic_validate"
id="breakfast_validate" novalidate="novalidate">
<div class="control-group" id="add_breakfast">
<div class="control-group">
<label class="control-label">Select new one</label>
<div class="controls">
<select name="required" id="breakfast_select">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</div>
<div class="control-group">
<label class="checkbox-inline">
<input
id="is_free_breakfast" type="checkbox" checked>Is free ?
</label>
</div>
<div class="control-group" id="price_breakfast">
</div>
<div class="control-group">
<button type="button" onclick="form_submit()" class="btn btn-mini; btn-success">Save</button>
</div>
</div>
</form>
I'm currently working on a site that allows users to complete form . there are currently 3 text inputs to add username to social media button. if left blank the button should not appear for that specific field , if complete then button will display on users post im having trouble getting this to work it works when using just one field & one button but i need this tow ork over multiple and im unsure on how to achieve this.
/////////////HTML///////////
<form>
<div class="form-group">
<input type="text" class="form-control twitter-button" placeholder="Text input">
</div>
<div class="form-group">
<input type="text" class="form-control github-button" placeholder="Text input">
</div>
<div class="form-group">
<input type="text" class="form-control facebook-button" placeholder="Text input">
</div>
</form>
<a class="btn btn-git" href="#" role="button">git button</a>
<a class="btn btn-fb" href="#" role="button">fb button</a>
<a class="btn btn-twitter" href="#" role="button">twitter button</a>
//////CSS///////////
.btn.btn-twitter {
display: none;
}
////////JS///////////
$(".twitter-button, .github-button, .facebook-button").keyup(function () {
if ($(this).val()) {
$(".btn.btn-default").show();
}
else {
$(".btn.btn-default").hide();
}
Try with closest() function and trim() will help remove the unwanted space
$(".form-control").keyup(function() {
if ($(this).val().trim()) {
$(this).closest('.form-group').find(".btn.btn-default").show();
} else {
$(this).closest('.form-group').find(".btn.btn-default").hide();
}
})
.btn.btn-default {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<input type="text" class="form-control twitter-button" placeholder="Text input">
<button class="btn btn-default">default</button>
</div>
<div class="form-group">
<input type="text" class="form-control github-button" placeholder="Text input">
<button class="btn btn-default">default</button>
</div>
<div class="form-group">
<input type="text" class="form-control facebook-button" placeholder="Text input">
<button class="btn btn-default">default</button>
</div>
</form>
Check all fields on change:
$(".twitter-button, .github-button, .facebook-button").change(function() {
if ($(this).val() != "") {
$(".btn.btn-default").show();
} else {
$(".btn.btn-default").hide();
}
});
.btn.btn-default {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div class="form-group">
<input type="text" class="form-control twitter-button" placeholder="Text input">
</div>
<div class="form-group">
<input type="text" class="form-control github-button" placeholder="Text input">
</div>
<div class="form-group">
<input type="text" class="form-control facebook-button" placeholder="Text input">
</div>
</form>
I have a list of Divs which contain an image. When I hover over a div, I want the image to move up (I'm doing this by altering the image css on hover). The issue I'm having is that when I hover over one div, all the images in all divs are changing. Instead, I want the hover effect just to take place on the div I'm hovering over. Here is my current jQuery:
jQuery(document).ready(function($){
screenshotHeight = $('.l_admin-product-screenshot img').height();
$('.l_admin-product').hover(function () {
$('.l_admin-product-screenshot img').css({
top: -screenshotHeight
});
},
function () {
$('.l_admin-product-screenshot img').css({
top: '0'
});
});
});
Here is my html structure:
<div class="l_admin-products">
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-1-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-2">
<label for="layers-preset-layout-skizzar-homepage-1-radio">
<input id="layers-preset-layout-skizzar-homepage-1-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-1-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage21_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-1" data-key="layers-preset-layout-skizzar-homepage-1">
Select </a>
</div>
</label>
</div>
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-2-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-2">
<label for="layers-preset-layout-skizzar-homepage-2-radio">
<input id="layers-preset-layout-skizzar-homepage-2-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-2-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage2_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-2" data-key="layers-preset-layout-skizzar-homepage-2">
Select </a>
</div>
</label>
</div>
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-3-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-3">
<label for="layers-preset-layout-skizzar-homepage-3-radio">
<input id="layers-preset-layout-skizzar-homepage-3-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-3-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage3_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-3" data-key="layers-preset-layout-skizzar-homepage-3">
Select </a>
</div>
</label>
</div>
</div>
$('.l_admin-product').hover(function () {
$this = $(this);
$this.find('.l_admin-product-screenshot > img').css({
top: -screenshotHeight
});
},function () {
$this.find('.l_admin-product-screenshot img').css({
top: '0'
});
});
Try with $this to point current image.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to create a HTML form where a user enters his name, address and gender. After the user enters that information and clicks submit a JSON file will be downloaded containing the information. Could someone please tell me how I create such form ?
You can actually use jQuery's serialize() function. Since you have used Bootstrap, there'll be jQuery for sure. So all you need to do is:
$(function () {
$("#myForm").submit(function () {
var jsonOutput = JSON.stringify($(this).serializeArray());
$("#genJSON").text(jsonOutput);
$("#download").attr("href", 'data:application/executable;charset=utf-8,' + encodeURIComponent(jsonOutput)).show();
return false;
});
});
* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
pre {font-family: 'Consolas', monospace; white-space: pre-wrap;}
form,
form ul,
form ul li,
form ul li label {display: block;}
form ul li {padding: 5px;}
form ul li label strong {display: inline-block; width: 100px;}
form ul li label input {padding: 3px;}
form ul li > input {margin-left: 105px; padding: 3px 10px; cursor: pointer;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<form action="" id="myForm">
<ul>
<li>
<label>
<strong>Username</strong>
<input type="text" name="Username" />
</label>
</li>
<li>
<label>
<strong>Password</strong>
<input type="text" name="Password" />
</label>
</li>
<li>
<label>
<strong>Full Name</strong>
<input type="text" name="FullName" />
</label>
</li>
<li>
<label>
<strong>Email</strong>
<input type="text" name="Email" />
</label>
</li>
<li>
<input type="submit" value="Get JSON" />
</li>
</ul>
</form>
<pre id="genJSON"></pre>
<div>
<a id="download" style="display: none;">Download Code</a>
</div>
Update
Using data: URI scheme, it is possible.
this.href = 'data:application/json;charset=utf-8,'
+ encodeURIComponent(genJSON.innerHTML);
I made following html form
<div class="row">
<div class="block block-bordered">
<div class="block-header bg-gray-lighter">
<h3 class="block-title">Profile </h3>
</div>
<div class="block-content">
<form class="form-horizontal push-10-t push-10" action="base_forms_premade.html" method="post"
onsubmit="return false;">
<div class="row">
<div class="col-sm-7">
<div class="form-group">
<div class="col-xs-6">
<label for="mega-firstname">Participant 1</label>
<input class="form-control input-lg" type="text" id="mega-firstname"
name="mega-firstname" placeholder="Name">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-7">
<div class="form-group">
<div class="col-xs-12">
<label for="mega-bio">Age</label>
<textarea class="form-control input-lg" id="mega-bio" name="mega-bio" rows="22"
placeholder="Age"></textarea>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group"></div>
<div class="form-group">
<div class="col-xs-12">
<label for="mega-skills">Subject</label>
<select class="form-control" id="mega-skills" name="mega-skills" size="7" multiple>
<option value="1">Sale</option>
<option value="2">Real Estate</option>
<option value="3">Employment</option>
<option value="4">Loan</option>
<option value="5">Renting</option>
<option value="6">Finance</option>
<option value="7">Construction</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="mega-age">Amount</label>
<input class="form-control input-lg" type="text" id="mega-age" name="mega-age"
placeholder="Enter bitcoin amount">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-warning" data-toggle="modal" data-target="#modal-slideup"
type="submit"><i class="fa push-5-r"></i> Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
Okay so basically I have 3 divs, called first, nextscreen, and finalscreen. I created some jquery that allows the divs to slide in and out of view, when pressing next or back. Animating from first to nextscreen when pressing Next >>> and <<< Back works, UNTIL I press Next >>> to animate from nextscreen to finalscreen. When I go <<< Back from finalscreen to nextscreen, and then try go <<< Back from nextscreen to first, NEXTSCREEN SIMPLY DOES NOT MOVE. However if I try make it slide out to the left it does work, but I need it to slide out to the right, or it just looks silly. This is my html:
<div class="row">
<div class="col-lg-12" id="first" style="position: relative; right: 0px">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<div class="form-group">
<label for="tableName">Name</label>
<input type="text" class="form-control" id="tableName" name="tableName" placeholder="Name your list..." />
</div>
<div class="form-group">
<label for="Description">Description</label>
<textarea class="form-control" id="Description" name="Description" placeholder="Provide a brief description of this list..." rows="3"></textarea>
</div>
<button type="button" class="btn btn-default" id="next">Next >>></button>
</div>
</div>
<div class="col-lg-12" id="nextscreen" style="right: -2000px; top: -220px; position: relative">
<div class="col-lg-6">
<div class="form-group">
<label for="addField">Add Field</label>
<input type="text" class="form-control" id="addField" placeholder="Field Name..." />
</div>
<button type="button" class="btn btn-default" id="add">Add Field >>></button>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="fieldList">Field List</label>
<select multiple class="form-control" id="fieldList" style="height: 200px">
<option>Name*</option>
<option>Cell*</option>
</select>
</div>
<p>* Compulsory fields</p>
<button type="button" class="btn btn-default" id="back"><<< Back</button>
<button type="button" class="btn btn-default" id="final">Next >>></button>
<button type="button" class="btn btn-default pull-right" id="remove"><<< Remove Field</button>
<input type="hidden" name="SelectedOptions" id="Name" value="Name" />
<input type="hidden" name="SelectedOptions" id="Cell" value="Cell" />
</div>
</div>
<div class="col-lg-12" id="finalscreen" style="right: -4000px; top: 0px; position: relative">
<div class="form-group">
<button class="btn btn-primary" type="submit" id="createtable">Create Table</button>
<button type="button" class="btn btn-default" id="finalback"><<< Back</button>
</div>
</div>
</div>
And this is my JQuery:
$("#next").click(function () {
$("#first").animate({ left: '-2000px' });
$("#nextscreen").animate({ right: '0px' });
$("#finalscreen").animate({ right: '-2000px' });
});
$("#final").click(function () {
$("#first").animate({ left: '-4000px' });
$("#nextscreen").animate({ left: '-2000px' });
$("#finalscreen").animate({ right: '0px' });
});
$("#back").click(function () {
$("#first").animate({ left: '0px' });
$("#nextscreen").animate({ right: '-2000px' })
$("#finalscreen").animate({ right: '-4000px' });
});
$("#finalback").click(function () {
$("#first").animate({ left: '-2000px' });
$("#nextscreen").animate({ left: '0px' });
$("#finalscreen").animate({ right: '-2000px' });
});
Here is a fiddle http://jsfiddle.net/yjZBe/
I think it would be way easier and efficient to place those elements in a container and animate only that one instead of each element.