I need to print popup dialog box.I have tried several times,but I could get whole window with popup dialog box.I need to print only the dialog box. not the around content of the dialog box.
here is my code
view
<script type="text/javascript">
$(document).ready(function(){
$("#dialogbox").dialog({
autoOpen:false,
modal:true,
title: "NDB BANK",
width:950,
height:300,
open: function( event, ui ) {
}
});
$('#submit').click(function() {
$('#dialogbox').empty()
var $clone=$("#show").clone()
$('#dialogbox').append($clone)
$('#dialogbox').append("<input type='button' id='submit2' value='save' onclick='myFunction2()'></input>")
$('#dialogbox').append("<input type='button' id='print' value='print' onclick='printFunction()'></input>")
$("#dialogbox :input").prop("disabled", true);
$("#dialogbox #submit2").prop("disabled", false);
$("#dialogbox #print").prop("disabled", false);
$("#dialogbox #amount_in_words").val($('#amount_in_words').val());
$('#dialogbox').dialog('open');
});
})
</script>
<script>
function printFunction() {
window.print();
}
</script>
<div id="dialogbox" style="height: 200px ; width: 400px; background-color: #FFA375"> </div>
<div id="content">
<div id="show">
<form action="#" id="cheque_details" name="cheque_details" method="post">
<div id="nameDiv"><p id="namecont">name: <input type="text" id="name"/></p> </div>
<div id="dateDiv"><p id="date">Date: <input type="text" id="datepicker"/></p></div>
<div id="amountDiv"><p>Amount: <input type="text" id="amount" onkeyup="myFunction()" /></p></div>
<div id="letAmountDiv"><p>Amount In letters:<textarea id="amount_in_words" rows="3" cols="30"></textarea></p></div>
<p id="addresscont">address: <input type="text" id="address"/></p>
<p id="acccont">Account No: <input type="text" id="acc_no"/></p>
<p id="bank_name">Bank: <input type="text" id="bank"/></p>
</form>
</div>
Related
I want to display the loading.gif image when doing a domain search with a click button. So when php processes a domain name search request, the loading image appears and disappears when the search results appear.
Below code from my php page:
<form class="form-full-width" method="post">
<div class="group align-center form-row">
<input autofocus class="group-stretch" type="text" name="domain" placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
<input type="hidden" name="token" value="70ed0e77d1b8f7124c494a970929ccb2">
<button class="button-secondary"> Search </button>
</div>
</form>
This is result after click search button, will appear approximately 5-30 seconds after clicking the Search button
$response = '<section class="content-row">
<div class="container">
<center>
<header class="content-header">
<h3><i class="fa fa-check text-color-success icon-left"></i> Selamat! Domain <b class="text-color-primary">'.$domain.'</b> Tersedia</h3>
<h4>Hanya dengan <b>Rp. 200.000</b> / tahun</h4>
<p>
<a href="member.domain.com/cart.php?a=add&domain=register&sld='.$domain.'" class="button button-primary">
<i class="fa fa-shopping-cart icon-left"></i>DAFTARKAN
</a>
</p>
<p>
atau<br>Lihat saran domain lainnya <i class="fa fa-angle-double-right"></i>
</p>
</header>
</center>
</div>
</section>
Javascript
<script type="text/javascript">
$( document ).ready(function() {
$('.button-secondary').click(function(){
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
});
event.preventDefault();
})
});
</script>
add <img id='loading' src='loading.gif' style='display:none' > to hide the image, then when a search prompts add this on your script $("#loading").css("display","block"); afterwards when php request is finish $("#loading").css("display","none");, hope that works
HTML
<form class="form-full-width" method="post">
<img id='loading' src='loading.gif' style='display:none' >
<div class="group align-center form-row">
<input autofocus class="group-stretch" type="text" name="domain"
placeholder="" value="" pattern="^[a-zA-Z0-9\.-]*$" title="">
<input type="hidden" name="token"
value="70ed0e77d1b8f7124c494a970929ccb2">
<button class="button-secondary"> Search </button>
</div>
</form>
JQuery
<script type="text/javascript">
$( document ).ready(function() {
$('.button-secondary').click(function(){
$("#loading").css("display","block");
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
$("#loading").css("display","none");
});
event.preventDefault();
})
});
</script>
JQuery EDIT
<script type="text/javascript">
$( document ).ready(function() {
$(document).on('click','.button-secondary',function(){
$("#loading").css("display","block");
var domain = $('input[name=domain]').val()
$.get( "cari-domain-function.php?domain="+domain, function( data ) {
$( "section.content-row-gray" ).html(data);
$("#loading").css("display","none");
});
event.preventDefault();
})
});
</script>
This is my first time working with jquery modals. I'm trying to display the popup only when the form is submitted. But instead, it's displaying on page load. How do I fix it?
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
<div id="dialog-confirm" title="Not so fast">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px
20px 0;"></span>Did you want to add a third for only $50? Click Yes to add</p>
</div>
<form id="orderform" action="/action_page.php">
Package 1:<br>
<input type="text" name="packageonename" value="">
<br>
Package 2:<br>
<input type="text" name="packagetwoname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
In order to prevent the dialog from automatically opening you can set autoOpen property to false when initializing the dialog.
Then, on form's submit event, you could open the dialog by calling element.dialog("open").
Note that I have added an event.preventDefault() in the submit event handler to prevent the form from submitting.
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
autoOpen: false,
buttons: {
"Yes": function() {
$(this).dialog("close");
},
"No": function() {
$(this).dialog("close");
}
}
});
$("#orderform").on("submit", function(e) {
$("#dialog-confirm").dialog("open");
e.preventDefault();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="dialog-confirm" title="Not so fast">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px
20px 0;"></span>Did you want to add a third for only $50? Click Yes to add</p>
</div>
<form id="orderform" action="/action_page.php">
Package 1:<br>
<input type="text" name="packageonename" value="">
<br> Package 2:<br>
<input type="text" name="packagetwoname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
You can do like this
$('#orderform').submit(function() {
$("#dialog-confirm").dialog("open");
return true; // return false to cancel form action
});
I would like to use jquery.dynamiclist library in my procject.
In the demo page that's running smoothly there is a jquery library in version 1.8.2.
In my project I use version 1.11.1 and this makes dynamiclist plugin doesn't work.
With newer version when I process form I get data with names of inputs but without values (I get 'undefined').
Here is the code from demo.
What I have to change to make it run with newer version of jquery?
<form class="form-horizontal">
<h2>Example 1: Basic List</h2>
<div class="control-group">
<label class="control-label">Party</label>
<div class="controls">
<input name="partyName" type="text" placeholder="Party Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Guest List</label>
<div id="example1" class="controls">
<div class="list-item">
<input name="guestList[0].name" type="text" placeholder="Guest Name">
<i class="icon-minus"></i> Remove Guest
</div>
<i class="icon-plus"></i> Add Guest
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary btn-large" value="Process Example 1"/>
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://github.com/ikelin/jquery.dynamiclist/blob/master/jquery.dynamiclist.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$("#example1").dynamiclist();
// display form submit data
$("form").submit(function(event) {
event.preventDefault();
var data = "";
$(this).find("input, select").each(function() {
var element = $(this);
if (element.attr("type") != "submit") {
data += element.attr("name");
data += "="
data += element.attr("value");
data += "; "
}
});
alert(data);
location.reload(true);
});
});
})(jQuery);
</script>
Simply change element.attr("value"); to element.val();.
Sorry I had to include the plugin code manually because apparently you cannot include the src directly from github. Also commented the reload for the snippet.
<form class="form-horizontal">
<h2>Example 1: Basic List</h2>
<div class="control-group">
<label class="control-label">Party</label>
<div class="controls">
<input name="partyName" type="text" placeholder="Party Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Guest List</label>
<div id="example1" class="controls">
<div class="list-item">
<input name="guestList[0].name" type="text" placeholder="Guest Name">
<i class="icon-minus"></i> Remove Guest
</div>
<i class="icon-plus"></i> Add Guest
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary btn-large" value="Process Example 1"/>
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
/* jQuery Dynamic List v 2.0.1 / Copyright 2012 Ike Lin / http://www.apache.org/licenses/LICENSE-2.0.txt */
(function(a){a.fn.dynamiclist=function(d){if(this.length>1){this.each(function(){a(this).dynamiclist(d)});return this}var g=a.extend({itemClass:"list-item",addClass:"list-add",removeClass:"list-remove",minSize:1,maxSize:10,withEvents:false,addCallbackFn:null,removeCallbackFn:null},d);var f=function(o,n,j){var m=o.find("."+j.itemClass).length;if(m<j.maxSize){var l=o.find("."+j.itemClass+":first").clone(j.withEvents);l.find("."+j.removeClass).show().click(function(p){e(o,a(this),p,j)});b(l,m);i(l);var k=o.find("."+j.itemClass+":last");k.after(l);if(j.addCallbackFn!=null){j.addCallbackFn(l)}}if(n!=null){n.preventDefault()}};var e=function(o,k,n,j){var m=o.find("."+j.itemClass).length;var l=k.parents("."+j.itemClass+":first");if(m==j.minSize){i(l)}else{l.remove()}c(o,j);if(j.removeCallbackFn!=null){j.removeCallbackFn(l)}n.preventDefault()};var b=function(j,k){j.find("label, input, select, textarea").each(function(){var m=["class","name","id","for"];for(var n=0;n<m.length;n++){var l=a(this).attr(m[n]);if(l){l=l.replace(/\d+\./,k+".");l=l.replace(/\[\d+\]\./,"["+k+"].")}a(this).attr(m[n],l)}})};var c=function(k,j){k.find("."+j.itemClass).each(function(){var l=k.find("."+j.itemClass).index(this);b(a(this),l)})};var i=function(j){j.find("input[type=text], textarea").val("");j.find("input[type=radio]").attr({checked:false});j.find("input[type=checkbox]").attr({checked:false})};var h=function(k){k.find("."+g.itemClass+":first ."+g.removeClass).hide();var j=k.find("."+g.itemClass).length;while(g.minSize>j){f(k,null,g);j++}k.find("."+g.addClass).click(function(l){f(k,l,g)});k.find("."+g.removeClass).click(function(l){e(k,a(this),l,g)});return k};return h(this)}})(jQuery);
</script>
<script>
(function($) {
$(document).ready(function() {
$("#example1").dynamiclist();
// display form submit data
$("form").submit(function(event) {
event.preventDefault();
var data = "";
$(this).find("input, select").each(function() {
var element = $(this);
if (element.attr("type") != "submit") {
data += element.attr("name");
data += "="
data += element.val();
data += "; "
}
});
alert(data);
//location.reload(true);
});
});
})(jQuery);
</script>
Hello I have a simple Jquery question, I have a simple jquery popup form that displays a thank you message when users have completed it. They can then close it. I am having trouble getting the box to reset and show the original form once a user closes it.
//open popup Book a demo
$(".actionButtonHeader, .bookADemoBTN").click(function(){
$("#overlay_form").fadeIn(1000);
$(".background_overlay").fadeIn(500);
positionPopup();
e.preventDefault();
});
var email = document.getElementById("email").value;
var subscribed = document.getElementById("subscribed").value
$("#overlay_form").submit(function(e)
{
var postData = $(this).serializeArray();
$.ajax(
{
url : "demoEmailProcess.php",
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
$(".formContent").html("<div id='messageDemo'><h2 style='text-align: center; font-size: 27px;'>Thank you " + (fullName.value).split(" ")[0]+ "!" + "</h2>" + "<p style='font-size: 21px;'> Your message has beeen successfully sent. We appreciate your interest in Cybertonica and will get back to you within the next 24 hours. </p>" + "<a class='messageLink' href='index.php'>Return to Homepage</a></div>")
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});
e.preventDefault();
});
$("#ajaxform").submit(); //Submit the FORM
//close popup Book a demo
$(".close").click(function(){
$("#overlay_form").fadeOut(500);
$(".background_overlay").fadeOut(500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background_overlay"></div>
<form id="overlay_form" style="display:none" action="" method="post" >
<div class="close"><div class="innerClose">X</div></div>
<div class="formContent">
<b class="popupText">Want to see how we manage fraud and increase sales? We would love to hear from you. Book a demo with Cybertonica!</b>
<p class="popupText">Briefly explain your business needs and how you manage fraud and we will happily get back to you within the next 24 hours.</p>
<p id="returnmessage"></p>
<div class="popupRowOne">
<li><b>Full Name<sup>*</sup></b>
<input id="fullName" name="fullName" required type="text">
</li>
<li><b>Company Name<sup>*</sup></b>
<input required name="companyName" id="companyName" type="text"></li>
</div>
<div class="popupRowTwo">
<li><b>Email<sup>*</sup></b>
<input required name="address" id="address" type="text">
</li>
<li><b>Job Title<sup>*</sup></b>
<input required name="jobTitle" id="jobTitle" type="text">
</li>
<li id="hiddenPot"><b>Please leave this blank<sup>*</sup></b>
<input type="text" name="email" id="email">
</li>
</div>
<div class="popupRowThree">
<li><b>Your Message<sup>*</sup></b>
<input name="textMessage" id="textMessage" class="textareaPopup" required>
</li>
</div>
<div id="contactSubscribe">
<p class="checkBoxText"><input type="checkbox" id="subscribed" value="subscribed" name="subscribed" checked> I would like to sign up to Cybertonica newsletter</p>
<button type="submit" id="submit" value="Submit" class="popUpactionButton">Submit</button>
</div>
</div>
</form>
Try this:
After:
$(".background_overlay").fadeOut(500);
Add this line:
$("#overlay_form").reset();
My script is an upload page which has a progress bar.
The file is uploading correctly to the server and the progress bar is working.
The on success isn't being executed though and I have no idea why.
The console has no errors and the xhr response is "file moved do logic" so why isn't the success being called?
<script type="text/javascript">
$(document).ready(function() {
$('#progressbar').progress();
$('#uploadForm').submit(function(e) {
//return Validate();
var ext = $('#userImage').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg','pdf']) == -1) {
alert('We only acccept PNG, JPG, JPEG, GIF or PDF files');
return false;
}
if($('#userImage').val()) {
e.preventDefault();
//$('#loader-icon').show();
$(this).ajaxSubmit({
target: '#targetLayer',
beforeSubmit: function()
{
$("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total, percentComplete){
$('#progressbar').progress({
percent: percentComplete
});
$('#progresslabel').html(percentComplete + '% Uploaded')
},
success:function (data){
alert (data);
},
resetForm: true
});
return false;
}
});
});
</script>
<div class="ui page grid">
<div class="fifteen wide column">
<div class="ui segment">
<div class="upload">
<h3>Upload <?php echo $pdf['UPLOADTITLE']; ?></h3>
<form name="uploadform" id="uploadForm" action="upload.php" method="post">
<div>
<label>Upload Image File:</label>
<input name="userImage" id="userImage" type="file" class="demoInputBox" />
</div>
<div>
<input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" />
</div>
<input type="hidden" value="<?php echo $pdf['UPLOADSTUDENT']?>" name="studentid">
<input type="hidden" value="<?php echo $pdf['UPLOADTITLE'] ?>" name="filetype">
<input type="hidden" value="<?php echo $pdf['UPLOADID']; ?>" name="uploadid">
</form>
</div>
<div class="ui teal progress" id="progressbar">
<div class="bar"></div>
<div class="label" id="progresslabel">0% Uploaded</div>
</div>
</div>
</div>
</div>
The problem was with :
target: '#targetLayer',
As soon as I removed this the onSuccess was called.