I'm trying to make a little JScript popup that displays information from the form for confirmation. Here is what it looks like right now:
<input type="submit" value="Accept" onclick="return confirm('Press OK to confirm your purchase of' document.form.field.value)" />
The idea is to return a more useful confirmation than just 'Click OK to confirm' by showing values of the submitted form in the popup. Can anyone help me with the syntax?'
You can use the following:
<input type="submit" value="Accept" onclick="return confirm('Press OK to confirm your purchase of ' + document.getElementById('FIELDID').value)" />
Or you could modify the above to loop through each product and build a dynamic string with each product on a new line like this:
<input type="submit" value="Accept" onclick="return ConfirmOrder(); />
function ConfirmOrder()
{
var msg = 'Click OK to confirm your order of\n';
var prds = '';
var prdElements = <GET PRODUCT ELEMENTS HERE>
for (i=0; i<numPrds; i++)
{
prds = prdElements[i].value + '\n';
}
return confirm(msg + prds);
}
Also I think the onclick event should be in the onsubmit event of the form.
Related
Here is a form
<cfoutput>
<form name = "xrefform"
id = "xrefform"
action = ""
method = "post"
onsubmit = "return submitx('#coltop#', '#col#')">
</cfoutput>
There are two different way to submit it:
1) when you want the data in the form to be placed in a MySql Table
2) when you want the data to be deleted from the Mysql Table
For the first case I have
<input type = "Submit"
name = "SubmitXref"
class = "submitbut"
value = "Submit"
onclick = "aasubmit('xref2.cfm')">
with corresponding javascript:
function aasubmit(target) {
document.xrefform.action = target;
}//end function aasubmit
This works fine.
For the delete case I have
<input type = "Submit"
id = "delbut"
class = "onoffbut"
value = "delete"
onclick = "aasubmit('repdel.cfm')">
This has a problem, which is that the submitx() javascript runs, and in this case I don't want it to.
I find references that say using the document.form.submit() method will avoid running the onsubmit function. But I can't figure out how to indicate the action.
Can someone show me how to do this?
After fussing around some more I found the answer:
For the delete button --which needs to evade the onsubmit script --here is the HTML:
<input type = "button"
id = "delbut"
value = "Delete this item"
onclick = "buttonsubmit('xrefdel.cfm', 'xrefform')">
And here is the javascript.
function buttonsubmit(target, source) {
var q = document.getElementById(source);
q.action = target;
q.submit();
}
This works perfectly. The ordinary submit honors the onsubmit script, the delete button skips it.
Let's outline your requirements:
One form
Two submit buttons
No JavaScript submit.
If you give each of the submit buttons a name, then you can have a single action page and check which button was clicked.
name="doUpdate" or name="doDelete"
The only name key that will exist in the form scope is whichever submit button was clicked. Use structKeyExists() to check and process accordingly.
Of course, you probably want to use onsubmit="return validateForm()" to call a validation function. If you click on "delete", you might want the user to confirm that was what they wanted to do before processing it. The function validateForm() just needs to return true or false, so you'll still avoid the JavaScript submit().
Do something like this in the form:
<input name="action" value="save" id="action" type="hidden">
<button type="submit" class="button button-basic-green" onclick="document.getElementById('action').value='save';"><span class="fa fa-save"></span> Save</button>
<button type="submit" class="button button-basic" onclick="document.getElementById('action').value='reload';"><span class="fa fa-repeat"></span> Save & Reload</button>
<button type="submit" class="button button-basic" onclick="document.location.href='./';return false;"><span class="fa fa-arrow-circle-o-left"></span> Cancel</button>
Note the default action of "save". Gets you something like:
Then in the singular form-action page, check to see what the form.action is and process accordingly.
<cfif form.action eq "reload">
<cfset loc="page.cfm?id=#form.id#">
<cfelse>
<cfset loc="./">
</cfif>
I have a textbox the value load from PHP Here is the code
<input type="text" id="fName" value="<?php echo $row['fName']; ?>" disabled/>
<input type="button" value="Edit" onclick="changeValue('fName')" />
my Javascript
function changeValue(id){
var value = "test";
document.getElementById(id).value = value;
}
As soon as I click the function, the value change for a few second and go back to default one from database. Can anyone help me
After clicking on the button, the page will reload so that the value of the database will be restored.
Please change
<input type="button" value="Edit" onclick="changeValue('fName')" />
to
<input type="button" value="Edit" onclick="changeValue('fName'); return false;" />
to avoid submitting the form.
For more information, please have a look at this: What's the effect of adding 'return false' to a click event listener?
If you click on elements like links (a element) or buttons (input[type="button"] or button) page will be redirect. So at the end of onClick action you must write return false to force say to the browser I don't want to redirect this page after click!
For example:
function changeValue(id){
var value = "test";
document.getElementById(id).value = value;
return false;
}
How can i change the PHP value in textbox through Javascript
An alternative to using document.getElementById(id).value would be:
function changeValue(id){
var value = "test";
document.getElementById(id).setAttribute("value", value);
}
I am trying to continuously add to a js variable every time a user enters a value into a box.
So far if they enter '21' the alert will say 'your balance is £12' but then if I enter '15' I want it to say your balance is '27' but instead it says '15' or rather just the latest amount.
The code below:
<form action="" method="get">
<input type="number" value="" id="amountDropped">
<input type="submit" value="Deposit amount" onclick="depositedFunds()">
</form>
var firstAmount = 0;
function depositedFunds(){
var ad = document.getElementById("amountDropped");
firstAmount = +firstAmount + +ad.value;
alert ("Your balance is £" + firstAmount);
};
thanks
The function which makes the change is attached to a submit button.
When the user clicks the button:
The JS runs
The value is updated
The value is alerted
The form is submitted
A new page loads
The new page has var firstAmount = 0; in it
You should:
Set the default value dynamically with server side code. See Unobtrusive JavaScript and
Prevent the default behaviour of the submit button
Using an onclick attribute, you need to return false from the event handler function:
onclick="depositedFunds(); return false;"
Modern code would separate concerns and not tie things so tightly to a specific means of triggering the form submission.
var firstAmount = 0;
function depositedFunds(e) {
e.preventDefault();
var ad = document.getElementById("amountDropped");
firstAmount = +firstAmount + +ad.value;
alert("Your balance is £" + firstAmount);
};
document.querySelector('form').addEventListener('submit', depositedFunds);
<form method="get">
<input type="number" id="amountDropped">
<input type="submit" value="Deposit amount">
</form>
I want to have a form and need to submit it to a url in a new pop up window on button onclick action. I want something like this.
<form id = "test" name = "test" action = "preview.jsp">
Email : <input type = "text" name = "email"/>
<button id = "submitButton" onclick = "submitFormInPopUp()"/>
</form>
So how to write this function submitFormInPopUp() which posts to action url in a new pop up page.
Thanks
Jitendra
Use this:
function submitFormInPopUp()
{
window.open('','Prvwindow','location=no,status=no,toolbar=no,scrollbars=yes,width=730,height=500');
document.test.action = "preview.jsp"
document.test.target = "Prvwindow"
document.test.submit();
}
i hope its help to u
function submitFormInPopUp(){
var url = "preview.jsp?email=" + document.getElementsByTagName('input')[0].value;
window.open(url);
}
Maybe you could use the target attribute?
http://www.w3schools.com/TAGS/att_form_target.asp
Change the button type to submit and specify target, you don't need any javascript.
<form id="test" name="test" action="preview.jsp" target="_blank">
Email : <input type = "text" name = "email"/>
<input type="submit" value="Submit" id="submitButton" />
</form>
Be aware though it's deprecated and not allowed in Strict.
<form action="/cgi-bin/Lib.exe" method=POST name="checks">
<input type=checkbox name="user1" value="'$NAME'">
<input type=checkbox name="user2" value="'$NAME'">
<input type=checkbox name="user3" value="'$NAME'">
<input type="button" value="User 1" onclick="somefunction()">
For example, if I selected checkbox user2 I would want the javascript function to pop up saying "you are not user 1..." (all input check boxes are under same form name).
After validation of specific check box name I will do document.checks.submit();
Thanks.
I'd propose few improvements to sktrdie's reply.
This will avoid submitting form on errors.
<form action="".... onsubmit="return somefunction(this);">
function somefunction(f) {
var user1 = f.user1;
var user2 = f.user2;
// etc..
if(user2.checked) {
alert("you are not user1");
return false;
}
return true;
}
Note #1: this example is very simple and not-so-flexible, so additional reading on forms validation would be good idea. Say, on w3schools
Note #2: do not forget to implement server-side validation along with this. JS checks can be easily avoided.
<form onsubmit="somefunction(this);" ...
function somefunction(f) {
var user1 = f.user1;
var user2 = f.user2;
// etc..
if(user2.checked) alert("you are not user1");
}
You may want to use the checkbox's onclick event to do the validation... So when they click it to turn it on/off you can catch em immediately, before form submission.
<input type=checkbox name="user1" value="'$NAME'" onclick="javascript:validatecheckbox(document.checks.user1);">
And then whatever you want to validate against in the JS function: (sorry for some reason the encoding of this code isn't working right... but hopefully you get the idea)
<script language="javascript">
function validatecheckbox(inputbox) {
if (inputbox.checked)
alert ('Are you ' + inputbox.name + '?');
}
</script>