Confirm/redirect functionality not working - javascript - php

Here I used JavaScript to Delete an employee...
<script type="text/javascript">
function delet(emp)
{
var answer = confirm('Are you sure?');
if(answer)
{
window.location='delete.php?emp='+emp;
}
}
</script>
By using anchor tag am calling the function of javascript ....
<a onclick="javascript:delet('<? echo $_GET['emp']; ?>')">
<input type="button" name="delete" id="delete" style="background: url('images/del1.jpg')no-repeat;width:50px;height:50px" value=""/></a>
But my problem is it is working upto showing the alert msg but after answering the alert msg it is not redirecting to the page given by me that is "delete.php?emp=+emp"

Because you're nesting an <input type="Submit"/> inside an <a>, clicking the button is not the same as clicking the <a>, rather it "Submits" nowhere (read to the page you're already on, refreshing the page) before the <a> can do it's job.
Simple demo where you don't go to google.
<input type="Submit"/>
Bergi has pointed out that the behaviour I described is not universal (hello Opera, IE) unless a <form> element is present, so for example the following
<form action="jail.php">
<a href="go.php" onclick="window.location='?collect=£200';">
<input type="submit"/>
</a>
</form>
will send you directly to jail without passing go or collecting £200 across all browsers.
Further, this only really applies to page redirection; other pieces of script may well fire before the page changes, the easiest to observe being console.log, alert, etc.

You're submitting some form by clicking on that button. That submit process will overrule the window.location navigation request. A quick workaround would be to prevent that:
<a onclick="event.preventDefault(); delet('<? echo $_GET['emp']; ?>');">
// cross-browser-safe:
<a onclick="delet('<? echo $_GET['emp']; ?>'); return false">
but actually your markup with the nested button is quite odd. You don't need that link at all, just use
<form action="delete.php" onsubmit="return confirm('Are you sure');">
<input type="hidden" name="emp" value="<? echo $_GET['emp']; ?>" />
<input type="submit" name="delete" id="delete" style="background: url('images/del1.jpg')no-repeat;width:50px;height:50px" value="" />
</form>

Related

How to create button direct to url that query result from mysql

I have succeeded displaying data from query from mysql. But there is a url that connected to files that has been stored in mysql database. But I need to changes this url that text based to a button. Here is my script:
<td align="center"><a href='<?php echo $res['url_new_edition'] ?>'>New Edition</a></td>
Now I want to changes the 'New Edition' texts of course as a link/url into a button. I was already tried to add 'class=button', type='button' ect but none of works.
try this
<input type="button" onclick="window.location.href='http://google.com'; return false;">
in your case
<input type="button" onclick="window.location.href='<?php echo $res['url_new_edition'] ?>'; return false;">
Use a form instead of a href if you want a button. A clear solution that even comes along without JavaScript would look like this:
<form action="<?php echo $res['url_new_edition']; ?>" method="get">
<input type="submit" value="New Edition" />
</form>

Retrieving form field and display value in fancybox

I am trying to create a basic form with one text field. When a user inputs a code into the text field. Then when they click submit I will have an iframe pop up with the url + their text field value.
Everything looks to me like it is setup correctly but the fancybox loading screen never goes away and iframe never shows.
This is my sample of what is not currently working:
<form id="Form" onsubmit="fancybox.iframe('http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value);return false;" autocomplete="off" style="height: 100%;" enctype="multipart/form-data" action="/Contact/tabid/59/Default.aspx" method="post" name="Form">
<input type="text" name="Event">
</form>
<?PHP
$eventid = $_POST['Event'];
echo '<a class="fancybox fancybox.iframe" href="http://www.regonline.com/eventinfo.asp?eventid='. $eventid .'">Submit</a>';
?>
This does work but it opens another window and I cannot get it working with fancybox iframe:
<form id="Form" onsubmit="window.open('http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value);return false;" autocomplete="off" style="height: 100%;" enctype="multipart/form-data" action="/Contact/tabid/59/Default.aspx" method="post" name="Form">
<input type="text" name="Event">
<br>
<a class="event" onclick="window.open('http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value);" href="#">Submit</a>
</form>
I'm sure this is super simple for the right set of eyes, be gentle ;)
It seems like you're missing some code or you didn't paste it all.
Where is the form submission handled? I see you have a link and the href is what you want for the iframe value, but I'm not understanding the connection between it all.
If on clicking the link it populates the input field called Event, then you're actually populating it with the whole url. If you're then using that field to populate the iframe in your onsubmit line, then you're actually appending the whole url to the url again, creating a url like this in the end: http://www.regonline.com/eventinfo.asp?eventid=http://www.regonline.com/eventinfo.asp?eventid=SOME_ID_NUMBER
Without seeing all the code, I'm speculating that you really want the href in the submit link to only include the $eventid value and not the whole URL.
So your code might need to be:
echo '<a class="fancybox fancybox.iframe" href="'. $eventid .'">Submit</a>';
Thanks for the help guys, this is actually what I was looking for and somehow I ended up getting it right. Thanks again for the help
<form id="Form" autocomplete="off" style="height: 100%;" enctype="multipart/form-data" action="" method="post" name="Form">
<input type="text" name="Event">
<br>
<a id="event-link" class="event" href="#">Submit</a>
</form>
<script>
$('#event-link').click(function () {
$.fancybox({
type: 'iframe',
href: 'http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value
});
});
</script>

Why does my "add to cart" button not work?

My website uses a private e-commerce system, and unfortunately, while their support team are very helpful, they are not particularly supportive of 'custom code', such the code that I require.
I am trying to configure a "splash" page (which pops up before users complete their order), which offers users the opportunity to buy one of our t-shirts half-price, with an "add to cart" allowing them to add it to their cart from within the splash page.
I have tried copying code from the standard product pages, but unfortunately the button does not work as it should, and instead it simply links through to '#' (which can be seen in the code below).
<form action="includes/cart/add_to_cart.inc.php" method="get" name="addcartform" id="addcartform" onsubmit="return false;">
<!-- Important hidden inputs -->
<input type="hidden" id="js" name="js" value="false" />
<input type="hidden" id="product_id" name="product_id" value="{product:id}" />
<a id="add_to_cart" style="display:none;" href="#" onclick="{product:add_to_cart_js}" class="generated_button" title="Add To Cart" >
<img src="images/icons/cart_add.png" align="absmiddle" />
<span> Add To Cart </span> </a>
<noscript>
<!-- non javascript -->
<input class="generated_button" type="submit" value="Add To Cart" name="submit" id="cart_submit" />
</noscript>
After putting the code in, I change the "display" of the link to "inline-block" (so that it shows), and I also tried putting in the ID of the product that I want users to add to their cart here:
id="product_id" name="product_id" value="{product:id}"
Unfortunately none of this has worked, and as I dont have complete (or easy) access to all of the files I need, I'd really appreciate any help with getting this one resolved!
Thanks in advance,
Dan
UPDATE: The support team behind our eCommerce system have since sent me this piece of code to help, but I'm not entirely sure how to use it:
If you want more control via javascript you can use the core Cart object we make available > in the javascript. Its accessable via the (Private eCommerce System) namespace, and in
fact if you open up the console in an (Private eCommerce System) site and type in (Private > eCommerce System) and hit enter it will return an object to you of what parts of the core > system we make available to you right in the javascript so far, (this will increase in
time too).
The (Private eCommerce System).Cart object has a sub addItem() method/function that can be used here.
You can pass it the product id to add it to cart: (e.g. adding a product with id #52)
Cart.addItem(52);
Or you can pass it these full options like so:
Cart.addItem({
productId: 52,
qty: 1,
options: {},
wishlistId: 0,
extraData: "Some detail i want to show to the user"
}, function () {
console.log('This is the callback for when its complete!');
});
So if they add a button or link, they can use jQuery to set on click of that button to run that code, e.g.
jQuery(function ($) {
$('.some-button').on('click', function () {
Cart.addItem(52);
return false;
});
});
What if you swap out the Javascript button and replace it with the no-script input field?
<form action="includes/cart/add_to_cart.inc.php" method="get" name="addcartform" id="addcartform" onsubmit="return false;">
<!-- Important hidden inputs -->
<input type="hidden" id="js" name="js" value="false" />
<input type="hidden" id="product_id" name="product_id" value="{product:id}" />
<input class="generated_button" type="submit" value="Add To Cart" name="submit" id="cart_submit" />
<img src="images/icons/cart_add.png" align="absmiddle" />
<span> Add To Cart </span>
</form>
You might need to re-style the form fields and the <span> which says "Add to Cart" to get it looking right...
UPDATE:
Given the information the support team have provided, try putting this in your "splash page", instead of the form above.
<div>
<script>
function addTshirtToCart(){
/* Swap out the 34 for the actual product ID of the tshirt you want to
add to the basket */
Cart.addItem(34);
// You might also want some code here to close the "splash page"
return false;
}
</script>
<a href="#" id="add_to_cart" onclick="return addTshirtToCart();">
<img src="images/icons/cart_add.png" align="absmiddle" />
<span> Add To Cart </span>
</a>
</div>
UPDATE 2:
Replace the existing div from my 2nd answer and replaced it with this which works for me:
<form action="includes/cart/add_to_cart.inc.php" method="get" name="addcartform" id="addcartform" onsubmit="return false;">
<input type="hidden" id="js" name="js" value="false">
<input type="hidden" id="product_id" name="product_id" value="1618">
<a id="add_to_cart" style="" href="#" onclick="update_cart_content(); return false;" class="generated_button" title="Add To Cart">
<img src="images/icons/cart_add.png" align="absmiddle">
<span> Add To Cart </span> </a>
<noscript>
<input class="generated_button" type="submit" value="Add To Cart" name="submit" id="cart_submit"/>
</noscript>
</form>
UPDATE 3
To close the popup when adding the t-shirt to the cart, try putting this in the a element above:
onclick="update_cart_content(); spashBox.close(); return false;"

href hyperlinks as POST

I'm wondering which is the best way to map <a href=...></a> hyperlinks performing a HTTP GET to perform a HTTP POST (I'd like to avoid passing all variables in the URL)? For instance, the 2 hrefs below. Furthermore, I would like also to get rid of the submit button and use a regular <a href=...></a> hyperlink. Any suggestions?
<form action="test.php?action=update" method="post" id="cart">
<table>
<tr>
<td>
<a href="test.php?action=delete&id=<?php echo $id ?>" class="r">
remove
</a>
</td>
<td>
add
</td>
</tr>
<tr>
...
</tr>
</table>
<div> <button type="submit">Update</button> </div>
</form>
I'd suggest using jQuery.post and click. When the link is clicked, submit the data via something like this
$('.r').on('click', function() {
$.post('test.php', {key:'value', key2:'value2'}, function(data) {
//error check here
});
return false;
});
As far as i know you can't perform any POST requests with links. You can make your GET requests with links and php as a fallback for users with javascript disabled and for those who have javascript enabled cancel default behavior for links with javascript and make with ajax your POST request with help of AJAX.
for example:
<a class="submit" href="hallo.html?hello=world&test=yes">Test</a>
and js(i used jquery) would be:
$('.submit').click(function(){
var urlPairs = this.href.split('?')[1].split('&'),
total = urlPairs.length,
current = [],
data = {};
for(;total;) {
current = urlPairs[--total].split('=');
data[current[0]] = current[1];
}
$.post('test.php', data);
return false;
});
​
you could also write your POST function other for more info check jQuery post function doc
P.S. I wounder, if you are using FORM any way why wouldn't you use submit button, is it because of CSS styling? You could style it the same way like any other element(with some tweaks in some browsers).
You can keep the input tags as hidden in your form to submit them as POST.
<td>remove</td>
<td>add</td>
Rewrite the above using two forms, having <input type="hidden" name="id />
and buttons <input type="button" name="delete" />
etc..
if you run print_r($_POST) in your action script. You'll get a list of the buttons and the values of the hidden fields. Now, you can write conditions for the actions to run. I didn't write complete code here, just passing the idea.
Edit: See the example below.
<form method="post" id="cart">
<table>
<input type="hidden" name="id" value='some value' />
<input type="submit" name="action" value="delete" />
<input type="submit" name="action" value="add" />
</tr>
<tr>
...
</tr>
</table>
<div><button type="submit">Update</button></div>
</form>
<?php print_r($_POST); ?>

show div on form submit with no redirect

I'm using a WordPress sidebar widget to capture email addresses. The thing is, it redirects after form submission. I want the visitor to stay on the page they were on after form submission with just a hidden div giving a successful signup message.
I've tried something with javascript like this --
<script type="text/javascript">
function showHide() {
var div = document.getElementById("hidden_div");
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}
</script>
And that works perfectly for showing the hidden div on submit, but the actual form then doesn't work :(
The form (with what I was trying to do) is like this --
<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>
<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p>
</div>
The problem is coming in somewhere between 'return false' and the form action (which is where the plugin's coder has made it redirect I think). If I remove 'return false', it redirects. With 'return false' there, the form doesn't work. I can't figure out a way to get the form to work but not redirect, ie. just show the hidden div, work, and that's it! No redirect :) Would appreciate your help.
I will show how to submit the form with jQuery, as this is what you have available to you:
First of all, you should make one small change to the form HTML. Namely, change showHide() to showHide(this), which will give showHide() access to the form element. The HTML should be:
<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(this); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>
<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p>
</div>
The javascript to submit the form and display the div on successful submit is:
function showHide(form) {
var serial = $(form).serialize();
$.post(form.action, serial, function(){
$('#hidden_div').show();
});
};
What this does:
Serializes the form data, i.e. converts it to one long string such as wp-email-capture-name=&wp-email-capture-email=&wp_capture_action=1 that is stored in serial.
Submits the serialized data to the the form's action url (form.action)
If the form submit was successful, it runs the success handler, which is the third parameter to $.post(). This handler takes care of displaying the hidden div. I changed the code to use jQuery's .show() function, which takes care of browser inconsistencies.
Hope this is helpful.

Categories