I have a basic web page that uses a simple javascript validate function to verify field content before returning TRUE to allow submission. If validate is false, then it just displays an alert() and returns FALSE.
However, I need to modify this, so that if everything validates, a pop-up appears that says "You are about to submit this form and agree to XYZ. Click OK to continue, Cancel to leave, or Print to print this page"
In other words, I need an alert box with an OK, CANCEL, and PRINT button (the print button actually would print the page itself and then allow user to click OK and move forward with the submit command.
** EDIT: I should have clarified, using a modal pop-up is causing that modal to appear in the print screen. so maybe a close.modal followed by a print.screen set of commands? library isn't an option because we are confined to a single page with no external loads of any kind because this is inside of a banking platform and they only allow html/inline-css/on-page javascript.
You need to use a custom code to do this since there is no way to add buttons to window.confirm.
Libraries like jQuery UI, YUI, DOJO, etc have a modal dialogs which would allow you do do something like that.
http://jsfiddle.net/QRm4c/1/
You could always just use a <div> to make a fake one.
<div id="confirmation">
<p>Blah, blah, blah</p>
<form>
<input type="button" name="ok" id="ok" value="OK" />
<input type="button" name="cancel" id="cancel" value="Cancel" />
<input type="button" name="confirm" id="confirm" value="Confirm" />
</form>
</div>
epascarello is right, window.confirm can't do this.
Related
I try to make my checkout page more friendly and how to do this:
I have guest form`s and save button after them. And after guest info is saved (instead payment option) are show send my order button - this is from one module Cash on delivery, but instead to choice only this i move button to be showed directly.
BUT: Many clients are confused from this "save" button. I want to marge this two buttons in one.
How to do this? What is the best solution: to add some js when for save button or adding new button instead these 2?
You can see the problem page in my live shop here: http://bijutaniki.com/porychka (do not forget to add product like: http://bijutaniki.com/prysteni/8-prysten-na-nastroenieto.html - and shop is on bulgarian)
Now process looks like that:
What i want to do:
I try two times to add new button with js instead these to but without success. May be if use "save" button and add js to click on other "send order" button will be more easy because when "save" been clicked check fields above and if fields are valid show message.
What are you think, how to combine this buttons.
Thanks!
EDIT:
Save button and message:
{$HOOK_CREATE_ACCOUNT_FORM}
<p class="submit">
<input type="submit" class="exclusive button" name="submitGuestAccount" id="submitGuestAccount" value="{l s='Save'}" />
</p>
<p style="display: none;" id="opc_account_saved">
{l s='Account information saved successfully'}
</p>
<p class="required opc-required" style="clear: both;">
</p>
Send order button (with smile):
<div class="cod_cofirm">
<form action="{$link->getModuleLink('cashondelivery', 'validation', [], true)|escape:'html'}" method="post">
<input type="hidden" name="confirm" value="1" />
<p class="cart_navigation" id="cart_navigation">
<input type="submit" value="{l s='Send order' mod='cashondelivery'}" class="extraorderbutton" />
</p>
</form>
</div>
Because prestashop have controllers may be need to show code from some controller?
I guess there is no valid answer without showing us code, I'll try it anyway:
$('NEW_Send_Order_btn').click(function(e){
e.preventDefault();
$('Save_btn').trigger('click');
if($('Save_btn').hasClass('well_done')){
$('Send_my_order').trigger('click');
}
});
I have a button in the form in a page1.asp.
I am getting getting response from page2.asp after form submission.
It is take sometime for processing data in page2.asp.
User stays at page1 and clicking the button again and again.
so I want to have an "Loading window" while data processing and user could not click the Button again.
please help me to get this done.
Thanks in advance.
AGM Raja
You can use submit button's "onclick" event both to disable the button (so user won't be able to click it again) and to display "Loading..." message to the user.
At the very simplest you can display the message in the button itself, e.g.
<input type="submit" value="submit" onclick="this.disabled=true;this.value='Please wait...'" />
Demo: http://jsfiddle.net/t4f3T/
UPDATE
I don't know why it worked in my own tests, but Shadow Wizard pointed errors of my way: Form will not be submitted by disabled button, you have to add form.submit() yourself:
<input type="submit" value="submit" onclick="this.disabled=true;this.value='Please wait...';form.submit()" />
Demo 2: http://jsfiddle.net/t4f3T/2/
I have a home page that contains a texfield that reads the user input, sends the value of whatever is typed in and sends it to another page where the search will happen and display the search results.
<div>
<form action="****.jsp" method="get" id="search-id">
<input type ="text" name = "search" id="search" size="70"/><br>
<br />
<input type="Submit" value="Search" class="button rounded">
</form>
<br />
<br />
<br />
</div>
But the thing is that it takes some time before the actual second page shows up, therefore I wanted to make a little loading gif to appear while waiting for that page to actually load up. I have a gif file ready to use, but I can't figure out how to implement it into the website so that it would show up after I click on the search button.
I'm very new to HTML/JS and I been searching for a possible way for days. Is this possible at all?
Add a submit event handler to your form, that makes the animated gif appear and doesn't prevent the form submission. Example with JQuery:
$('#search-id').submit(function() {
$('#animated-gif').show();
});
assuming you have the animated gif hidden somewhere in the page:
<img src="..." style="display: none;" id="animated-gif"/>
Since you are new to HTML, you will need to search more about ajax and jquery. That will ideally answer your question. Have a look on this similar question as well. Hope this will help you.
<button type="submit" id="start-break" name="start" type="button" class="actv-btn-dft1 blbg" onClick="showhide('start-break', 'stop-break');return false;" title="Start Break">Start Break</button>
<button type="submit" id="stop-break" type="button" class="actv-btn-dft1 orbg" onClick="showhide('stop-break', 'start-break');return false;" style="display:none" title="Stop Break">Stop Break</button>
I am using something like a toggle button where click of start makes visible stop then on click of stop start button is visible.
I am using showhide('start-break', 'stop-break') JavaScript function as described below:
function showhide(hideid,showid)
{
document.getElementById(showid).style.display='block';
document.getElementById(hideid).style.display='none';
}
I want to know why I am not able to get the value of the start or stop in the controller.
-> If I remove that return false in the onclick I get it submitted but the UI gets disturbed (the button does not remain in the stop position when start is clicked).
The return false; is blocking the submit. When the form is submitted, the page will of course be refreshed with the response of the form submit request.
Just don't use JS to show/hide the buttons. Use the server side language for this (based on your profile and the edit history you're using "J2EE" and thus you're familiar with JSP):
<c:if test="${empty param.start}">
<button type="submit" name="start">Start</button>
</c:if>
<c:if test="${not empty param.start}">
<button type="submit" name="stop">Stop</button>
</c:if>
An alternative is to use Ajax to submit the form. But that's a completely different story.
Have you tried putting return false; at the end of the showHide() function as opposed to in the elements' onclick attribute? If I'm not mistaken, you're not supposed to have multiple javascript statements in one inline attribute.
If nothing happens, could it be that your function declaration is out of window scope? Your code works fine for me in http://jsfiddle.net/TZMkH/1/
I added a button that is supposed to open a calendar 'date-picker'. The button is in a form that is rendered inside an EXTJS TabPanel. When the button is clicked, it causes the EXTJS tab panel to reload. Even if I remove everything but the following (making it a dumb button) the page still reloads.
<button id="calendar-trigger">...</button>
Edited: derived from: http://www.dynarch.com/projects/calendar/doc/
<input type="text" id="id_activity_date" name="activity_date">
<input type="button" value="..." id="calendar-trigger">
<script type="text/javascript">
new Calendar({
trigger : "calendar-trigger",
inputField : "id_activity_date",
onSelect : function() { this.hide() }
});
</script>
I don't want the reload to happen and I can't figure out why the reload is happening. or how to stop it. Something is getting triggered beyond just the button click. I suspect that EXTJS is causing it, but I can't figure out why.
I would like to start by killing all code that is triggered by this button. I want to make this a dumb button that doesn't do anything when clicked.
What is likely going on here? and How can I fix it?
Try this instead:
<input type="button" id="calendar-trigger" value="Button Label">
I've had trouble with <button> tags trying to submit forms and what not when they should not. Using an <input> tag with a type of "button" seemed to help me - maybe it will work for you as well.
If you have a <button> tag on a form which does not have a submit button (<input type="submit">), the <button> becomes the input button by default, apparently.
In HTML, <button> has a type attribute. The default value for type is submit, meaning that unless you specify type="button" (or something else), the button will trigger the submission of the form it is associated with. That is probably what is causing your page to reload (because the form is being submitted).
Alternatively, you could use <input type="button" id="calendar-trigger" />.
I would recommend using <input> as opposed to <button>
<input type="button" value="Click Me" id="calendar-trigger" />
Typically the <input type="submit" /> will make a submit button when in a form, I suspect that is what the <button> tag is doing.