I am having a scenario when I am clicking on a button then one pop-up must be opened asking "Do you want to perform this operation". There are two button OK and Cancel. And on pressing any of there button control must go i controller and do required task.
After doing google, I find one way using windows.open but i cannot apply my css on this and there is no particular url for this. So this did not worked.
I have tried that when the page load a div having this data should hide and after clicking it must shown but this is not giving felling of popup.
<body onload="hide()">
<center>
<script>
function hide() {
document.getElementById("show").style.visibility = "hidden";
}
function show() {
document.getElementById("show").style.visibility = "visible";
}
</script>
<div id="form">
<form method="get">
<div id="show">Demo</div>
<table>
<tr>
<td></td>
<td><a id="dialog-link" href="">
<button type="button" value="Show Pop up"
onclick="show()">Click</button>
</a></td>
</tr>
</table>
</form>
</div>
</center>
</body>
i think you need confirmation box:
function show() {
confirm("do your operation!");
}
My guess:
1. Add style "display:none", that will hide your element in DOM.
2. Change that attribute using JS.
<body onload="hide()">
<center>
<script>
function hide() {
document.getElementById("show").style.display = 'none';
}
function show() {
document.getElementById("show").style.display = 'block';
}
</script>
<div id="form">
<form method="get">
<div id="show" style="display: none;">Demo</div>
<table>
<tr>
<td></td>
<td><a id="dialog-link" href=""><button type="button"
value="Show Pop up" onclick="show()">Click</button></a></td>
</tr>
</table>
</form>
</div>
</center>
</body>
Here is a similar topic:
javascript hide/show element
If you want something more than a confirm modal, something with more css, I would go into bootstrap, because creating a modal window from scratch can be sometimes hard, and bootstrap gives you free API for that. But it will require jQuery in your app.
Related
i use django(version 3.1.6) with html5, when i want to perform any link in 'a' tag and also execute a function from 'script' in 'button' tag ,nothing happen with clicking the link text. but unusually the link works fine if i remove function execution part from onclick attribute in button tag. this is the code i have in my home.html (template):
<html>
<body>
<table>
<tr>
<td>
<button class="rounded" type="button" id="btn1" onclick='my_function(`{{ object_from_classbasedview }}`)'>
<a href="some url here">
Click me!
</a>
</button>
</td>
</tr>
</table>
<text id='txt1'></text>
</body>
<script>
function my_function(param1){
event.PreventDefault();
document.getElementById('txt1').innerHtml=param1;
}
</script>
</html>
i Tried many solutions but none of them worked. Any idea or solution appreciated🙏 thanks in advance.
What's happening is that the onClick trigger is having priority here. If you put the a tag outside the button the same would happen with href.
A solution could be to only use the onClick function (remove href altogether) and do the redirect inside said function.
your function would end up looking something like this:
function my_function(param1){
event.PreventDefault();
document.getElementById('txt1').innerHtml=param1;
window.location.href = "some url here";
}
I am basically trying to implement this
http://www.impressivewebs.com/html5-form-attribute/
I have a cart which is outputting and sandwiched by a html table. Below the table, I currently have my submit button.
<thead>
<tr>
<th>ITEM</th>
<th>PRICE</th>
<th>WEIGHT (Kg)</th>
<th>QTY</th>
<th>SUBTOTAL</th>
<th></th>
</tr>
</thead>
<tbody>
<form action='shop.php' id='cart' method='post'>
<?php echo $cartOutput; ?>
</form>
<tr>
<td class="totals"><strong>Total</strong></td>
<td class="totals"> </td>
<td class="totals"><?php if (isset($weightTotal)) { echo $weightTotal . 'kg';} ?> </td>
<td class="totals"><?php if (isset($quantityTotal)) { echo $quantityTotal; } ?></td>
<td class="totals"><strong><?php if (isset($cartTotal)) { echo '$' . $cartTotal; } ?></strong></td>
<td class="totals"></td>
</tr>
</tbody>
/* code finishing table here */
<div class="col-lg-12 col-md-12 col-xs-12 remove-padding">
<button type="submit" class="btn btn-default" form="cart" name="adjustButton" id="adjust-button">UPDATE CART</button>
<button type="button" class="btn btn-default" form="contact" name="order" id="order-button" onclick="confirmOrder()" >ORDER NOW</button>
</div>
So because of the way I want the layout to look.. I can't put the buttons inside the form. I want to have the ability to put the update button below the cart.
Right now the order button is not a submit button but just a button. I can put it beneath its own form section but right now I force it through javascript for a confirmation and then submit the request through JS if they say OK.
I want to keep that function while supporting browsers including IE 9 +10. From what I found form="" doesn't work in IE
Can I achieve this?
Put the form tag outside all 'relevant' content (including submit button(s)):
<body>
<form>
<table>
</table>
<div>
<button>
</button>
</div>
</form>
</body>
If the button cannot be inside the form, make the form outside the
button.
This should work in all browsers:
document.getElementById('cart').submit();
You can put that in the onClick, and wrap it in a function if needed.
Edit: Since the issue (per the comments below) is that you have inputs outside the form: Really the simplest solution, and one that involves no Javascript, is to put the </form> at the end of the page (so that all your inputs and buttons will be in the form). But of course this doesn't work if you need to have more than one form on the page, and it might not even be possible depending on how the page is layed out.
If your submit button is outside the form and you have some input elements outside the form then the simplest way to send this form (without using ajax) would be to make a form and put your submit button in it.
And since your input fields are outside the form you will make a copy of those input fields inside your form and hide them with display:none; and when user changes the value of your visible input fields you will use javascript to change the value of the hidden input field.
This way you get to send the form the usual way, without the input fields having to be inside the form itself.....
You could copy the outside form elements to inside the form and sync them using JS.
http://jsfiddle.net/rudiedirkx/y0cmda4o/
if ( !('fform' in document.createElement('input')) ) {
$('input[fform], textarea[fform], select[fform]').on('change', function(e) {
this.$hidden.val(this.value);
}).each(function(i, el) {
var formId = $(el).attr('fform'),
$form = $('#' + formId),
$hidden = $('<input name="' + el.name + '" type="hidden">');
$form.append($hidden);
el.$hidden = $hidden;
});
}
As you can see, I used the fform attribute, to trigger the if statement. Change it to form and try it in IE.
Disclaimer:
This won't work with multiple value elements (like select[multiple]), or you have to add some serious JS to fake those multiple values.
This won't send the triggered button value. Normal submit buttons send only their value, and not the other submit buttons'. You could maybe add an onclick to handle that... If you use it.
I'm new to Wordpress and new to JQuery, so let me start off explaining what I am trying to do.
I have an admin page, inside this page I'm giving the user the ability to upload an image. I want this done using Ajax (independent from the general form update).
Here is the code I have so far:
At top of page - script includes:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js">
I can confirm these scripts are "pingable" and work.
Now the HTML code :
<table width="100%">
<tr>
<td width="100" style="padding:10px" valign="top">Email Image (180x180):</td>
<td style="padding:10px"><img id="previewEmailImage" width=180 height=180>
</td>
</tr>
<tr>
<td></td>
<td>
<div id='emailpreviewloader'>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<form id="imageform" method="post" enctype="multipart/form-data" action="/ajaximage.php">
<input type="file" name="photoimg" id="photoimg" />
</form>
</td>
</tr>
</table>
The key things in the HTML is a) a form and b) The div emailpreviewloader.
Now just after the html table, inline I have the following js:
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#emailpreviewloader").html('');
$("#emailpreviewloader").html('<img width="180" src="/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(function(result)
{
alert("Thank you for your comment!");
});
});
});
</script>
for testing purposes ajaximage.php just contains 1 line: Echo "It worked";
So assuming I've done my job right, and the html + js above is correct, it would seem Wordpress might be hijacking the Ajax somehow and preventing it from working as expected. Is this possible?
All I want to do is have a regular Ajax post, how is this possible?
EDIT:
What is working:
The change event for the file upload control is firing. I've confirmed this with an alert, and the loader.gif is visible. But it would seem the form isn't firing, or not firing correctly. The inner alert, never fires.
If you don't want to use wordpress's functions for ajax calls, try sending the form to action="<?php bloginfo('template_url');?>/ajaximage.php" and make sure the file is in the root of your wordpress instalation.
I have a modal window but I want to set up a close function so that when the user clicks on the "button", it will close the modal window. Does anyone know how this can be achieved?
I have a link to the application so you can view it here
Below is the javascript code where it shows the function of opening the modal window and the setup function of where I want to place the code to close the modal window:
function plusbutton() {
$(".previouslink").modal();
return false;
}
function closewindow() {
return false;
}
Below is the form code where user clicks on the plus button and it displays the content within the "previouslink" div tag:
<form id="QandA" action="imageupload.php" method="post">
<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
<tr>
<th><a onclick="return plusbutton();">
<image src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
</a><span id="plussignmsg">(Click Plus Sign to look <br />
up Previous Questions)</span> </th>
</tr>
</table>
<div class="previouslink">
<h1>PREVIOUS QUESTIONS</h1>
<button type="button" id="close" onclick="return closewindow();">Close
</button></div>
</form>
Your Live-Example shows me, that you seem to be using SimpleModal
From the documentation:
CLOSING THE DIALOG
SimpleModal will automatically bind the close
function (using the onclick event) to any element inside the dialog
with the simplemodal-close class. In addition, you can
programmatically close the currently opened dialog by calling
$.modal.close();
Means: In your closeWindow()-Function, you could simply enter the line:
$.modal.close();
and be done.
I've used this jQuery reveal modal plugin on several sites and it has worked great for me.
Alternatively, you should check out jQuery Impromptu. I love the tour feature myself, but the modals are more likely what you are trying to accomplish.
The code from both examples will probably lead you to what you are specifically looking for :)
I'm having problems with getting a login box I made to hide. Here is the HTML code I use to make the login box:
<center>
<form name=login>
<table width=225 border=1 cellpadding=3>
<tr><td colspan=2><center><font size="+2"><b>Login</b></font></center></td></tr>
<tr><td>Username:</td><td><input type=text name=username></td></tr>
<tr><td>Password:</td><td><input type=password name=password></td></tr>
<tr><td colspan=2 align=center>
<button type="button" onclick="loginNow()">Login</button>
</td></tr>
</table>
</form>
</center>
When the "Login" button is clicked, it runs some Javascript code. The loginNow() function runs, which verifies the password. Once the password is verified, I need this form to hide.
Can anyone give me some code that will work in this situation?
Wrap your form in a div with an id:
<div id="loginform">
<form>...</form>
</div>
Then, in the loginNow() function, use document.getElementById('loginform').style.visibility = 'hidden'
Add an id to the center tag like : center id="login_box"
And write this script inside the success block of the loginNow() code
$('#login_box').hide('fast');
Or if you cannot add id to the center tag then add this script inside the success block of the loginNow()code
$('center').hide('fast');
But it will hide all the center tags present in the code.