my modal does not display my output (empty modal) except for the title. I have checked and the output is working when i don't display it within the modal.
what can i change to display the output?
<script>
$( function() {
$( "#mortgageResults" ).dialog({
autoOpen: false,
modal: false,
resizable: false,
autoResize: true,
show: {
effect: "clip",
duration: 400
},
hide: {
effect: "drop",
duration: 400
}
});
$( "#mortgagebtn" ).on( "click", function() {
$( "#mortgageResults" ).dialog( "open" );
return false;
});
} );
</script>
computation:
<div id="calculator_one">
<?php
$borrow = $_POST['borrow']; //amount borrowed
$interest = $_POST['interest']; //interest rate
$term = $_POST['term']; //term
$months = ( $term * 12 );
$answer = ($borrow * ($interest / 100)) / 12;
$answer_two = ( $borrow * (($interest/12) / 100) / ( 1 - pow( 1 + (($interest/12) / 100), -$months)) ); ?>
<form id="calcualtor" action="" method="post" class="calculator">
<label class="calcAmount">Amount to borrow (₱)</label>
<input class="calcAmount" type="text" name="borrow" maxlength="6" />
<br />
<label class="calcInterest">Interest (%)</label>
<input class="calcInterest" type="text" name="interest" maxlength="4" />
<br />
<label class="calcTerm">Term (Years)</label>
<input class="calcTerm" type="text" name="term" maxlength="2" />
<br />
<button id="mortgagebtn" type="submit">Calculate</button>
</form>
</div>
my display output:
<div id="mortgageResults" title="Mortgage Results">
<?php
if (isset($_POST['mortgagebtn'])){
echo "<p class='calc_header'>Results</p>";
echo "<div id='results'><p class='calc_result'>Based on borrowing <span class='mortgage'>₱", number_format($borrow) , "</span> over <span class='mortgage'>", ($term), " years</span> at <span class='mortgage'>", ($interest), "%</span>, your monthly repayments would be:</p>";
echo "<p class='calc_result'>Interest Only <span class='mortgage'>₱", number_format($answer,2), "</span></p>";
echo "<p class='calc_result'>Repayment <span class='mortgage'>₱", number_format($answer_two,2), "</span></p></div>";} ?>
</div>
The issue is here:
<button id="mortgagebtn" type="submit">Calculate</button>
here you have not assign the name. And you are trying to check it like:
if (isset($_POST['mortgagebtn'])){
Assign the name like:
<button id="mortgagebtn" name="mortgagebtn" type="submit">Calculate</button>
and try again.
Related
I'm trying to create a script that calculates data from a form loaded using jQuery post but my script is not working as expected.
This is my code:
//main file
function updateForm(monthsunpaid, unpaiddue, nodelay, tpenalty, idpostsave, code) {
$.post("updatedata.php", {
monthsunpaid: monthsunpaid,
unpaiddue: unpaiddue,
nodelay: nodelay,
tpenalty: tpenalty,
idpostsave: idpostsave,
code: code
})
.done(function(data) {
$(".table1").empty().append(data);
$('#myModaledit').modal('hide');
});
}
<script >
// want to make this code work
$(document).ready(function() {
$("#nodelay").change(function() {
var unpaiddue = $("#unpaiddue").val();
var nodelay = $("#nodelay").val();
var result = Number(unpaiddue) * Number(nodelay) * 0.05;
var result = Math.round(result * 100) / 100;
$("#tpenalty").val(result);
});
});
</script>
This data is from a php file load using the updateForm() function:
<form method="post">
<div class="form-group">
<label for="usr">UNPAID MONTHS</label>
<input type="text" class="form-control" id="monthsunpaid" value="<?php echo $delayed_months; ?>">
</div>
<div class="form-group">
<label for="pwd">UNPAID MONTHLY DUES</label>
<input type="text" class="form-control" id="unpaiddue" value="<?php echo $unpaid_monthly; ?>">
</div>
<div class="form-group">
<label for="pwd">NO. OF MONTHS DELAYED</label>
<input type="text" class="form-control" id="nodelay" value="<?php echo $months_delayed; ?>">
</div>
<div class="form-group">
<label for="pwd">TOTAL PENALTY CHARGES EQUITY</label>
<input type="text" class="form-control" id="tpenalty" value="<?php echo $totalpenalty; ?>">
</div>
<input type="hidden" id="idpostsave" value="<?php echo $id; ?>">
<input type="hidden" id="code" value="<?php echo $biscode; ?>">
<div class="form-group">
<button type="button" class="btn btn-primary" id="saveButton"
onclick="updateForm($(monthsunpaid).val(), $(unpaiddue).val(), $(nodelay).val(), $(tpenalty).val(), $(idpostsave).val(), $(code).val())">SAVE</button>
</div>
</form>
Bind your event as delegate. Change your code to this and hope so it will help you.
$(document).ready(function() {
$("document").on("#nodelay", "change", function() {
var unpaiddue = $("#unpaiddue").val();
var nodelay = $("#nodelay").val();
var result = Number(unpaiddue) * Number(nodelay) * 0.05;
var result = Math.round(result * 100) / 100;
$("#tpenalty").val(result);
});
});
I would suggest the following changes to your code to avoid issues that can be caused by mixing inline javascript and jquery. Consider delegating all event binding logic to jquery (rather than using on onclick in your forms HTML) by doing the following:
//main file
function updateForm(monthsunpaid, unpaiddue, nodelay, tpenalty, idpostsave, code){
$.post( "updatedata.php", {
monthsunpaid:monthsunpaid,
unpaiddue:unpaiddue,
nodelay:nodelay,
tpenalty:tpenalty,
idpostsave:idpostsave,
code:code
})
.done(function( data ) {
$( ".table1" ).empty().append( data );
$('#myModaledit').modal('hide');
});
}
// Shorthand for JQuery is now ready
$(function(){
$(document).on('change', "#nodelay", function(){
var unpaiddue = $("#unpaiddue").val();
var nodelay = $("#nodelay").val();
var result = Number(unpaiddue) * Number(nodelay) * 0.05;
var result = Math.round(result * 100) / 100;
$("#tpenalty").val(result);
});
// Attach a submit handler to your form, which is called
// when the user submits the form
$(document).on('submit', 'form', function() {
updateForm(
$('#monthsunpaid').val(),
$('#unpaiddue').val(),
$('#nodelay').val(),
$('#tpenalty').val(),
$('#idpostsave').val(),
$('#code').val()
);
// Prevent default form submit behaviour
return false;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="post">
<div class="form-group">
<label for="usr">UNPAID MONTHS</label>
<input type="text" class="form-control" id="monthsunpaid" value="<?php echo $delayed_months; ?>">
</div>
<div class="form-group">
<label for="pwd">UNPAID MONTHLY DUES</label>
<input type="text" class="form-control" id="unpaiddue" value="<?php echo $unpaid_monthly; ?>">
</div>
<div class="form-group">
<label for="pwd">NO. OF MONTHS DELAYED</label>
<input type="text" class="form-control" id="nodelay" value="<?php echo $months_delayed; ?>">
</div>
<div class="form-group">
<label for="pwd">TOTAL PENALTY CHARGES EQUITY</label>
<input type="text" class="form-control" id="tpenalty" value="<?php echo $totalpenalty; ?>">
</div>
<input type="hidden" id="idpostsave" value="<?php echo $id; ?>">
<input type="hidden" id="code" value="<?php echo $biscode; ?>">
<div class="form-group">
<!-- replace button with input, leave event binding to jquery -->
<input type="submit" value="SAVE" class="btn btn-primary" id="saveButton" />
</div>
</form>
I am using Grails 3.1.9 as the platform, my problem is that when the button Add Item has not been clicked, I can see the contents of the dialog box at the bottom of the page, and when the button is clicked, the contents disappear from the bottom. How do I prevent this from happening? Any help you can provide will be greatly appreciated.
Before Clicking Add Item Button
After Clicking Add Item Button
show.gsp Code is:
<div id="dialogEntry" title="Item Entry">
<fieldset class="form">
<form id="entryForm" action="" method="post" ><input type="hidden" name="_method" value="PUT" id="_method" />
<input type="hidden" name="invoice.id" value="${invoice.id}" />
<div class="fieldcontain required">
<label for="product">
<g:message code="orderItem.product.label" default="Product" />
<span class="required-indicator">*</span>
</label>
<input type="text" name="product" value="" required="" id="product" />
<input type="hidden" id="prodid" value="" />
<div class="fieldcontain">
<label for="quantityInStock">
Quantity in Stock
</label>
<input type="text" id="quantityInStock" value="" readonly="true" />
</div>
</div>
<div class='fieldcontain required'>
<label for='quantity'>Quantity
<span class='required-indicator'>*</span>
</label><input type="number" name="quantity" value="1" required="" min="1" id="quantity" />
</div>
<div class='fieldcontain required'>
<label for='price'>Price
<span class='required-indicator'>*</span>
</label><input type="number" name="price" value="" required="" step="0.01" min="1.00" id="price" />
</div>
<div class="fieldcontain">
<label for="totalAmount">
Total Amount
</label>
<input type="null" name="totalAmount" value="" id="totalAmount" />
</div>
</form>
</fieldset>
</div>
<script>
var editId;
document.getElementById("add").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("add").innerHTML =
$( "#dialogEntry" ).dialog({
autoOpen: true,
modal: true,
width: 500,
buttons: [
{
text: "Save",
click: function() {
var quantity = $('#quantity')[0].value;
var quantityInStock = $('#quantityInStock')[0].value;
if (quantity.length == 0) {
alert('Quantity is required');
$('#quantity')[0].focus();
return;
}
if (parseInt(quantity) > parseInt(quantityInStock)) {
alert('Quantity cannot be served as Quantity in Stock is just ' + quantityInStock);
$('#quantity')[0].focus();
return;
}
$( this ).dialog( "close" );
var price = $('#price')[0].value;
var prodid = $("#prodid")[0].value;
// submit to server
//var form = $('#entryForm')[0];
if (editId != 0) {
$.ajax({
type: "POST",
url: "${resource(dir:'orderItem/updatex')}/" + editId,
data: {'productid':prodid, 'quantity':quantity, 'price':price},
async: true,
cache: false,
success: function (result) {
//alert('OK ' + result.success.message)
update(editId)
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + " " + errorThrown);
}
});
} else {
$.ajax({
type: "POST",
url: "${resource(dir:'orderItem/savex')}/" + editId,
data: {'productid':prodid, 'quantity':quantity, 'price':price, 'invoiceid':${invoice.id}},
async: true,
cache: false,
success: function (result) {
var id = result.success.id
//alert('OK ' + id)
update(id)
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + " " + errorThrown);
}
});
}
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
}
</script>
<div id="dialogEntry" title="Item Entry">
Change this to:
<div id="dialogEntry" title="Item Entry" style="display:none;">
Change this:
document.getElementById("add").innerHTML =
$( "#dialogEntry" ).dialog({
to
document.getElementById("add").innerHTML =
$( "#dialogEntry" ).show().dialog({
Change this to:
text: "Cancel",
click: function() {
$( this ).dialog( "close" ).hide();
}
I have used jquery price range slider. I want to filter out result using the jquery price range slider on same page. But this jquery price range slider is not working or variable of that value is not posted on same page.
I have tried following code,
<?php
if(isset($_POST['amount1']))
{
echo $_SESSION['amount1'] = $_POST['amount1'];
}
if(isset($_POST['amount2']))
{
echo $_SESSION['amount2'] = $_POST['amount2'];
}
if(isset($_POST['submit_range']))
{
$sql = mysql_query("select * from hall_search_data_1 where rent BETWEEN '".$_SESSION['amount1']."' AND '".$_SESSION['amount2']."'");
$res = mysql_query($sql)or die(mysql_error());
}
?>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 50000,
values: [ 100, 1000 ],
slide: function( event, ui ) {
$( "#amount" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
$( "#amount1" ).val(ui.values[ 0 ]);
$( "#amount2" ).val(ui.values[ 1 ]);
}
});
$( "#amount" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
<div class="slider">
<div id="slider-range"></div>
<form method="get">
<input type="hidden" id="amount1">
<input type="hidden" id="amount2">
<input type="submit" name="submit_range" value="Submit">
</form>
</div>
<!--here php code ---->
if(isset($_POST['amount1']))
{
echo $_SESSION['amount1'] = $_POST['amount1'];
}
if(isset($_POST['amount2']))
{
echo $_SESSION['amount2'] = $_POST['amount2'];
}
if(isset($_POST['submit_range']))
{
$sql = mysql_query("select * from hall_search_data_1 where rent BETWEEN '".$_SESSION['amount1']."' AND '".$_SESSION['amount2']."'");
$res = mysql_query($sql)or die(mysql_error());
}
So please help me.
<div class="slider">
<div id="slider-range"></div>
<form method="get">
<input type="hidden" id="amount1">
<input type="hidden" id="amount2">
<input type="submit" name="submit_range" value="Submit">
</form>
</div>
In your form you have missed name attribute, hence you are getting
Undefined index: amount1,amount2
above error.
Update your code as follow
<form method="get">
<input type="hidden" id="amount1" name="amount1">
<input type="hidden" id="amount2" name="amount2">
<input type="submit" name="submit_range" value="Submit">
</form>
I hope you can all help me / give me a shove in the right direction.
The situation is as follows. I have several forms which should pop up (inpage) when clicked upon. To achieve this i am using the Dialog fuction of JQUERY which works perfectly. The only problem is my page is starting to contain a lot of code since i am giving every form its own dialog. Is there a way to combine the function to use 1 dialog? (so put everything in one function? - or load the form into the dialog depending on which button is pushed? I have done a lot of searching on the web but i cannot find anything which gives me a push in the right direction....hope yall are willing and able to help me. Anyways thanks in advance. (i only showed the first 2 functions ... i have around 6 more of these )
<script>
$(function(c) {
$( "#dialog" ).dialog({
autoOpen: false,
maxWidth:260,
maxHeight: 85,
width: 260,
height: 85,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#dialog" ).dialog({
position: {
my: 'left, top',
at: 'right, top',
of: $('#opener')
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
$(function(s) {
$( "#dialog2" ).dialog({
autoOpen: false,
maxWidth:300,
maxHeight: 85,
width: 300,
height: 85,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#dialog2" ).dialog({
position: {
my: 'left, top',
at: 'right, top',
of: $('#opener2')
}
});
$( "#opener2" ).click(function() {
$( "#dialog2" ).dialog( "open" );
});
</script>
<body>
<?php
if(!empty($row['voornaam'])){
?>
<div id="dialog" >Naam<br>
<p><form method="post" id="naam"> <input type="text" value="<?php echo $row['voornaam'];?>" name="voornaam" size="8"/> <input type="text" value="<?php echo $row['achternaam'];?>" name="achternaam" size="8"/> <input type="submit" value="opslaan" > </form>
</div>
<button id="opener" border="0" color="white"> <?php echo $row['voornaam'] . " " . $row['achternaam'] ;?> <img src="edit.png" width="10" height="10"></button>
<?php
} ?>
<?php
if(!empty($row['gebooredatum'])){
?><div id="dialog2" >Geboortedatum<br>
<p><form method="post" id="leeftijd" > <input type="text" value="" name="geboortedatum" placeholder="<?php echo $row['gebooredatum'];?>" size="11"/> <input type="submit" value="opslaan" > </form>
</div>
<button id="opener2" border="0" color="white"> <?php echo $leeftijd ;?> Jaar <img src="edit.png" width="10" height="10"></button>
<?php
} else {?>
<div id="dialog2">Geboortedatum<br>
<p><form method="post" id="leeftijd"> <input type="text" name="geboortedatum" placeholder="dd-mm-jjjj" size="11"/> <input type="submit" value="opslaan" "size="3"></form></p>
</div>
<button id="opener2" border="0" color="white"><?php echo "Voeg je geboortedatum toe";?> <img src="edit.png" width="10" height="10"></button>
<?php } ?>
</body>
</html>
You could use the open event provided by the jquery widget. Inside this event is where you can place some logic that would determine what you want to show in the dialog.
http://api.jqueryui.com/dialog/#event-open
I'm creating popup forms using jQuery dialog & validation plugin. It all works fine except one thing - the error message doesn't clear off when form is closed, i.e. the form does not "reset" itself back to its initial state when user close the form.
My codes are as follows:
HTML
<div id="popupfrm" title="Action Plan Details">
<form id="frmAClientActionPlanDetails" method="post" action="">
<ul>
<li>
<label id="lActionPlanTitle" for="lActionPlanTitle">Action Plan Title*:</label>
<input id="iActionPlanTitle" name="iActionPlanTitle" class="text" size="50" />
</li>
<li id="iActionPlanTitleMsg" class="errorStr"></li>
<li>
<label id="lDescription" for="lDescription">Description*:</label>
<input id="iDescription" name="iDescription" class="text" size="50" />
</li>
<li id="iDescriptionMsg" class="errorStr"></li>
<li>
<label id="lNotes" for="lNotes">Notes:</label>
<textarea id="iNotes" name="iNotes" cols="35" rows="4" class="text"></textarea>
</li>
<li id="iNotesMsg" class="errorStr"></li>
<li>
<label id="lDateUploaded" for="lDateUploaded">Date Uploaded:</label>
<input id="iDateUploaded" name="iDateUploaded" class="text" size="50" maxlength="10" readonly="readonly" />
</li>
<li id="iDateUploadedMsg" class="errorStr"></li>
<li>
<label id="lFileUploaded" for="lFileUploaded">File Uploaded:</label>
<input id="iFileUploaded" name="iFileUploaded" type="file" value=""/>
</li>
<li id="iFileUploadedMsg" class="errorStr"></li>
<li><br />
</li>
<li>
<input type="submit" id="btnUpdate" name="btnUpdate" value="Update" class="button" />
</li>
</ul>
</form>
</div>
JS - dialog
$(document).ready(function(){
var iActionPlanTitle = $( "#iActionPlanTitle" ),
iDescription = $( "#iDescription" ),
iNotes = $( "#iNotes" ),
iFileUploaded = $( "#iFileUploaded" ),
allFields = $( [] ).add( iActionPlanTitle ).add( iDescription ).add( iNotes ).add( iFileUploaded );
alert(allFields);
$('#popupfrm').dialog({
autoOpen: false,
width: 600,
modal: true,
close: function() {
allFields.val( "" ).removeClass( "error" );
}
});
// Popup Links
$('#popupfrm_link').click(function(){
$('#popupfrm').dialog('open');
return false;
});
$('#popupfrm_link2').click(function(){
$('#popupfrm').dialog('open');
return false;
});
//hover states on the static widgets
$('#popupfrm_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
JS - validation
$('#frmAClientActionPlanDetails').validate({
rules: {
iActionPlanTitle: {
required: true,
minlength: 2
},
iDescription: {
required: true,
minlength: 2
}
},
messages: {
iActionPlanTitle: {
required: "Please enter a title."
},
iDescription: {
required: "Please enter a description."
}
},
errorElement: "li",
});
Can anyone please advise? Thanks!
On closing the dialog box, you have to clear the errormsg string value :
close: function() {
.
.
$('#iFileUploadedMsg').val('');
.
.
}
Debug your page and check what is the class or id your error labels are taking. Then based on those attributes you can clear text from them.
For clearing you can use something like this:
$(id).html('');