I'm having some trouble dealing with the before unload event, which, for some reason, keeps firing even when I explicitly tell it no to.
So, this is my HTML:
<div class="payment-details-account-top">
<form id="payment-details-form-card" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
<div class="row all-steps">
<div class="col-md-12">
<input type="radio" name="payment-with-card" value="<?php echo $this->__('Betale med kort') ?>" id="payment-with-card" class="css-checkbox" <?php if ($ba->getMethodCode() == 'payex2'): ?> checked <?php endif; ?> onclick="this.form.submit();">
<label for="payment-with-card" name="payment-with-card" class="css-radio-label"></label>
<input type="submit" name="payment-with-card" id="payment-with-card" value="<?php echo $this->__('Betale med kort') ?>" class="top-payment-buttons" />
</div>
</div>
</form>
</div>
<div class="payment-details-account-bottom">
<div class="row all-steps">
<div class="col-md-12">
<input type="radio" name="payment-with-faktura" value="<?php echo $this->__('Betale med faktura') ?>" id="payment-with-faktura" class="css-checkbox" <?php if ($ba->getMethodCode() != 'payex2'): ?> checked <?php endif; ?> >
<label for="payment-with-faktura" class="css-radio-label"></label>
<input type="button" name="payment-with-faktura" id="payment-with-faktura" value="<?php echo $this->__('Betale med faktura') ?>" class="bottom-payment-buttons" />
<form id="payment-details-form" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
</form>
</div>
</div>
</div>
In order to change the selected form, I use radio buttons along with labels to style those radios according to needs.
So, here's my jQuery:
$('#payment-with-faktura').on('click', function(){
$('#payment-with-card').removeAttr("checked");
$('#payment-with-faktura').prop("checked", true);
$(window).unbind("beforeunload");
});
$('#payment-with-card').on('click', function(){
$('#payment-with-faktura').removeAttr("checked");
$('#payment-with-card').prop("checked", true);
$(window).unbind("beforeunload");
});
None of this seems to be working, so I went ahead and also added this
$('.css-radio-label').on('click', function () {
$(window).unbind("beforeunload");
});
The result is still the same, whenever I change the selected radio and try, for example, to refresh the page, I'm getting the popup alerting that I'm leaving the page and asking if I wish to stay on the page or leave the page.
So, what am I doing wrong here?
Best Regards
Related
I am using javascript to display an error when user click on form submit button if the number entered is not in between min and max. The issue is when you click submit button the form will submit regardless. Can you please look at the code below and tell me what I need to add. I need to prevent form from submitting if the min and max condition is not fulfilled.
this is my PHP codes
<div class="clearfix"></div>
<form action="store_items.php" method="post" name="cartform">
<div class="col-12 form-group">
<div class="row">
<div class="col-3">
<input type="hidden" name="cart_name" value="<?php echo $row['product_title']; ?>">
<input type="hidden" name="cart_image" value="<?php echo $row['product_photo']; ?>">
<input id="quantity"type="number" name="cart_qty" step="1" class="form-control text-center" onchange="restrictValue(this,<?php echo $min; ?>, <?php echo $max; ?>)">
<small class="float-right"><?php echo $row['product_unit']; ?></small>
<input type="hidden" name="cart_unit" value="<?php echo $row['product_unit']; ?>">
<input type="hidden" name="cart_price" value="<?php echo $row['product_price']; ?>">
<input type="hidden" name="product_id" value="<?php echo $row['id']; ?>">
<input type="hidden" name="seller_id" value="<?php echo $row['seller_id']; ?>">
</div>
<div class="col-9">
<input id="addtocart" class="btn btn-block addtocart" type="submit" value="Add to cart" name="addtocart" <?php if($row['product_status'] == 0) echo 'disabled="disabled"'; ?> >
</div>
</div>
</div>
</form>
this is the javascript
<script type="text/javascript">
function restrictValue(inputElement,minimum,maximum)
{
let value = inputElement.value;
if (value < minimum) {
value = minimum;
alert('Your order has not reach the minimum order quantity');
return false;
}
if (value > maximum) {
value = maximum;
alert('Your order has exceed the avaliable stock');
return false;
}
inputElement.value = value;
}
</script>
You don't need to prevent form submission! You can specify the min and max attribute on <input type="number"> and it will prevent users from entering in anything outside those bounds!
<input id="quantity"type="number" name="cart_qty" step="1" class="form-control text-center" min="<?php echo $min; ?>" max="<?php echo $max; ?>">
But, if you really want to prevent form submission...
<form onsubmit="doValidate">
...
</form>
<script>
function doValidate(event) {
event.preventDefault();
// validate your inputs
};
</script>
You are trying to prevent submission of form, for that you have to look into onSubmit event of form
Here we can add id to form
<div class="clearfix"></div>
<form action="store_items.php" method="post" name="cartform" id="cartfrom">
<div class="col-12 form-group">
<div class="row">
<div class="col-3">
<input type="hidden" name="cart_name" value="<?php echo $row['product_title']; ?>">
<input type="hidden" name="cart_image" value="<?php echo $row['product_photo']; ?>">
<input id="quantity"type="number" name="cart_qty" step="1" class="form-control text-center" onchange="restrictValue(this,<?php echo $min; ?>, <?php echo $max; ?>)">
<small class="float-right"><?php echo $row['product_unit']; ?></small>
<input type="hidden" name="cart_unit" value="<?php echo $row['product_unit']; ?>">
<input type="hidden" name="cart_price" value="<?php echo $row['product_price']; ?>">
<input type="hidden" name="product_id" value="<?php echo $row['id']; ?>">
<input type="hidden" name="seller_id" value="<?php echo $row['seller_id']; ?>">
</div>
<div class="col-9">
<input id="addtocart" class="btn btn-block addtocart" type="submit" value="Add to cart" name="addtocart" <?php if($row['product_status'] == 0) echo 'disabled="disabled"'; ?> >
</div>
</div>
</div>
</form>
In js you can listen to submit event, do validation whatever you want
<script type="text/javascript">
function restrictValue(inputElement,minimum,maximum)
{
let value = inputElement.value;
if (value < minimum) {
value = minimum;
alert('Your order has not reach the minimum order quantity');
return false;
}
if (value > maximum) {
value = maximum;
alert('Your order has exceed the avaliable stock');
return false;
}
inputElement.value = value;
}
function logSubmit(event) {
if(!restrictValue(inputElement,minimum,maximum)) {
event.preventDefault();
}
}
const form = document.getElementById('form');
form.addEventListener('submit', submit);
</script>
You can refer this for onSubmit event.
There are multiple ways you can solve this problem.
You can add a disabled attribute on the submit button. Remove this attribute until all the fields in the form are valid and your form submission is prevented. This might be a bit cumbersome because you'll need to watch for changes on all the form fields and then apply or remove the attribute.
Create a custom submit function using js and attach this as the onsubmit event handler. But you'll need an understanding of ajax calls. eg:
function handleSubmit(evt) {
evt.preventDefault(); // this will prevent the form from submitting
if(allFormFieldsAreValid) {
await fetch('/post-url', // the route you want to post data to
{
method: 'POST',
body: JSON.stringify(data) // the form data
}).then(function (data){
location.replace('/some-url'); // you can redirect to your disered route
});
}
}
<form onsubmit="handleSubmit">
...
</form>
I have a problem with Bootstrap Toggle.
After a partial refresh of the main page, the toggles disappear and I see only checkboxes.
I refresh the page with this code:
<script type="text/javascript">
setInterval( function() {
$('.swcon').load("status/controls.php");
}, 5000);
</script>
And here is part of my code on main page:
<div class="grid-item swcon">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">TOGGLES</h3>
</div>
<table class="table table-hover table-condensed small" border="0">
<tbody>
<tr>
<?php
/* GPIO */
$sth = $db->prepare("SELECT * FROM gpio WHERE gpio='$s[gpio]' AND rom='$s[rom]' AND (mode='simple' OR mode='temp' OR mode='moment' OR mode='read' OR mode='day') ");
$sth->execute();
$gpio = $sth->fetchAll();
foreach ($gpio as $g) {
?>
<td class="col-md-1">
<img src="media/ico/switch-icon.png" alt="" title="<?php if(!empty($s['ip'])){echo "Last IP: ".$s['ip']." GPIO: ".$s['gpio']." Mode: ".$g['mode'];} else {echo "GPIO: ".$s['gpio']." Mode: ".$g['mode'];}?>" />
</td>
<td class="col-md-1">
<a href="index.php?id=view&type=gpio&max=day&single=<?php echo $s['name']?>" class="label <?php echo label($g['status']) ?>" title="Charts" ><?php echo str_replace("_", " ", $s['name'])?></a>
</td>
<?php
/* SIMPLE IP */
if(($g['mode']=='simple'&&!empty($s['ip']))||($g['mode']=='temp'&&!empty($s['ip']))) {
?>
<td class="col-md-2">
<form class="form-horizontal" action="" method="post" style=" display:inline!important;">
<input class="checkbox" type="checkbox" data-toggle="toggle" data-size="mini" onchange="this.form.submit()" name="switch" value="<?php echo $s['tmp'] == '1.0' ? 'off' : 'on'; ?>" <?php echo $s['tmp'] == '1.0' ? 'checked="checked"' : ''; ?> />
<input type="hidden" name="ip" value="<?php echo $s['ip']; ?>"/>
<input type="hidden" name="rev" value="<?php echo $g['rev']; ?>"/>
<input type="hidden" name="rom" value="<?php echo $s['rom']; ?>"/>
<input type="hidden" name="gpio" value="<?php echo $s['gpio']; ?>"/>
<input type="hidden" name="onoff" value="simpleip" />
</form>
</td>
<!-- Rest of the page not important here -->
If I refresh the page manually, it looks as expected.
That is because BootstrapToggle parses the page at the initial pageload looking for nodes with [data-toggle="toggle"]. So, when you load new content to the page, the new DOM structure does not get parsed automatically. In order to initialize the new checkboxes as BootstrapToggle objects, you have to call $('[data-toggle="toggle"]').bootstrapToggle(); manually after the new content has been placed into the page.
As jQuery.load() accepts a callback function that is executed when the request completes as it’s second argument, you can implement the solution above like this:
$('.swcon').load('status/controls.php', function() {
$('[data-toggle="toggle"]').bootstrapToggle({
size : 'mini',
// additional settings if necessary
});
});
I have created the following code.
for some reason its skips my if event when the radiobutton changes.
the if statment is whitin a FORM i dont think this matters?
<p><?php echo $rijden[$lan][0];?></p><input type="radio" name="JA" id="waarde1" value="waarde1" onClick="gestuurdjanee();"><b>Ja</b> <input type="radio" name="JA" value="waarde0" id="waarde0" onClick="gestuurdjanee();" ><b>Nee</b></br>
<?php
function gestuurdjanee() {
if(document.getElementById("waarde0").checked == true) {
//nee?>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen"/></p>
<p><?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing"/></p>
<?php
}elseif(document.getElementById("waarde1").checked == true) {
//ja?>
<p><?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig"/></p>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="onstype"/></p>
<p><?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas"/></p>
<?php
}
else {
// niksingevuld
?>
<?php echo"Vink een van de optie's aan"?>
<?php
}
}
Combining JS and PHP like that won't work. As been commented, the PHP will only run once on the server. When it's done, it shows the result in the browser. Then the Javascript will run.
Instead create three divisions with different classes.
Then bind an event on changing the input.
Also see the comments in my code:
$(function() {
$('.div1, .div2').hide(); // hide div1 and div2 on page load
$('[name=JA]').on('change', function() { // bind an onchange function to the inputs
if( $('[name=JA]:checked').val() == 'waarde1' ) { // get the value that is checked
$('.div1').show(); // show div1
$('.div2, .div3').hide(); // hide other divs
}
else {
$('.div2').show(); // show div2
$('.div1, .div3').hide(); // hide other divs
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<?php echo $rijden[$lan][0];?>
</p><input type="radio" name="JA" id="waarde1" value="waarde1"><b>Ja</b>
<input type="radio" name="JA" value="waarde0" id="waarde0"><b>Nee</b></br>
<div class="div1">
DIV1
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen" /></p>
<p>
<?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing" /></p>
</div>
<div class="div2">
DIV2
<p>
<?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig" /></p>
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="onstype" /></p>
<p>
<?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas" /></p>
</div>
<div class="div3">Vink een van de optie's aan</div>
I have a problem in showing posted values in pop up box. When I click on book now it is showing only one id values for all.
Ex: if I click on 1st row on book now it is showing 1st row values, but if I click the 2nd row on book now it is showing 1st row values only.
<span>Book now</a> <!--<div class="disp"><p>-->
<div id="light" class="white_content"><label>Email:</label><?=$vehicle->Email; ?> </p><p><label>Mobile:</label><?=$vehicle->Mobile; ?></p>
<p><form id="form_<?php echo $vid;?>" name="form1" method="post" action="">
<?php //echo $_REQUEST['email'];?>
<p>
<input type="hidden" name="vehicleid" value="<?php echo $vid;?>" id="vehicleid" />
<label>
<input type="radio" name="RadioGroup1_<?php echo $vid;?> " value="1" id="bstatus<?php echo $vid;?>" onClick="idForm(<?php echo $vid;?>)" />
Conform</label>
<br />
<label>
<input type="radio" name="RadioGroup1<?php echo $vid;?>" value="0" id="bstatus1<?php echo $vid;?>" onClick="idForm(<?php echo $vid;?>)" />
Not Conform</label>
<br />
</p>
</form><b>X</b></div>
<div id="fade" class="black_overlay"></div>
This is how id works, you need have unique id for each div. Anticipating that you have a loop in place, you can add a counter or a incremental id while creating a div, something like below:
<div id="light_<?php echo $id;?>" class="white_content"><label>Email:</label><?=$vehicle->Email; ?> </p><p><label>Mobile:</label><?=$vehicle->Mobile; ?></p>
Without posting all of my code, I'm hoping I can figure out the last step to my leanModal PHP implementation of a basic CRUD system attempt.
So, this actually works, except for the last step. When I click submit on the form, somehow, it actually updates the database, but it doesn't reload the page, so the table-data still looks old, but if you manually reload the page, the table-data reflects the most recent update. Somehow, when submitting the form, the script that updates the database runs but the rest of the page doesn't load? I know I'm missing something, and maybe there's a better way of doing this...)
Hopefully, this is enough to give you an ideal what I'm doing. Thank you!
<script>
$(document).ready(function(){
$('a[rel*=leanModal]').leanModal({
closeButton: ".modal_close"
});
});
</script>
<?php
//save
if(isset($_POST['submit'])) {
$record = new Record();
if(isset($_POST['id'])) { $record->id = mysql_prep($_POST['id']); }
$record->name = mysql_prep($_POST['name']);
$record->save();
}
//view
$records = Record::find_all();
?>
<div id="table_data>
<table>
<?php foreach($records as $record): ?>
<tr>
<td><?php echo $record->name; ?></td>
<td>
<a rel="leanModal" href="#admin_form_<?php echo $record->id; ?>">edit</a>
<div id="admin_form_<?php echo $record->id; ?>">
<form action="index.php?id=<?php echo $record->id; ?>" method="post">
<input type="hidden" name="id" id="id" value="<?php echo $admin_nav->id; ?>">
<label for="name">Name</label><input name="name" id="name" type="text" value="<?php echo $record->name; ?>">
<button type="submit" name="submit">Save</button>
<a class="modal_close" href="#"></a>
</form>
</td>
</tr>
<?php endforeach; ?>
</table>
</div>
The best approach i would suggest is create a separate route let's say table.php that will server just the table data.
In your case table.php will contain
<table>
<?php foreach($records as $record): ?>
<tr>
<td><?php echo $record->name; ?></td>
<td>
<a rel="leanModal" href="#admin_form_<?php echo $record->id; ?>">edit</a>
<div id="admin_form_<?php echo $record->id; ?>">
<form action="index.php?id=<?php echo $record->id; ?>" method="post">
<input type="hidden" name="id" id="id" value="<?php echo $admin_nav->id; ?>">
<label for="name">Name</label><input name="name" id="name" type="text" value="<?php echo $record->name; ?>">
<button type="submit" name="submit">Save</button>
<a class="modal_close" href="#"></a>
</form>
</div>
</td>
</tr>
<?php endforeach; ?>
</table>
and load is via ajax in your page in to #table_data div.
And call leanModel script after loading table.
And on submit of form just re-load your table data again. Load table script would look like this.
function load_table(){
$.ajax('table.php', function(data){
$('#table_data').html( data );
// Call Lean Model Now
$('a[rel*=leanModal]').leanModal({
closeButton: ".modal_close"
});
});
}