i have 2 pages: A.htm and B.htm
A calls B as a popup, then after some operations B must call a javascript inside A, to do this i used the javascript: "opener".
but i think i did some mistakes because in the popup when i click the button nothing happen, here an example to download: http:\www.suale.it/prova/a.zip
this is the code of A.htm
<html>
<script language="javascript">
function ricaricapagina()
{
var theform;
if
(
window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
theform = document.forms["frmMain"];
}
else
{
theform = document.frmMain;
}
//txtOperation.value=pOperation;
theform.submit();
}
function SelectArticoli(pForm, txtOperation)
{
var sQueryString=new String;
var WinSettings = "center=yes,resizable=yes,scrollbars=yes,height=600,width=1000";
sQueryString='B.htm';
sQueryString += '?CallerForm=' + pForm;
sQueryString += '&CallerOperation=' + txtOperation;
sQueryString += '&CallerReload=1' ;
window.open(sQueryString, '', WinSettings);
}
</script>
<form name="frmMain" id="frmMain" action="A.htm" method="post">
<input name="txtOperation" type="hidden" id="txtOperation" />
<input name="cmdSelectArticoli" id="cmdSelectArticoli" onclick="javascript:SelectArticoli('frmMain', 'txtOperation');" type="button" value="Aggiungi Articoli...">
</form>
</html>
this is the code of B.htm
<html>
<script language="javascript">
function chiudipopup(pResult)
{
if (pResult==true)
{
window.opener.document.forms[frmMain].item(frmMain.txtCallerOperation.value).value = 'SelectArticoli';
if (frmMain.txtCallerReload.value != '')
{
window.opener.ricaricapagina();
}
}
window.close();
}
</script>
</script>
<form name="frmMain" method="post" id="frmMain">
<input name="txtCallerOperation" type="hidden" id="txtCallerOperation" value="txtOperation" />
<input type="submit" name="cmdConferma" onclick="javascript:chiudipopup(true);" value="conferma" id="cmdConferma" class="button" />
</form>
</html>
can you try declaring the function as window.ricaricapagina = function(){...}
You have two problem:
[B.html]=>change window.opener.document.forms[frmMain].item(frmMain.txtCallerOperation.value).value to window.opener.document.forms["frmMain"].elements["txtOperation"].value
[B.html]=>window.opener.ricaricapagina();(I'm working on it :))
Related
I'm new in coding , there is a question that someone gave me and I can't find the right answer , this is the question :
Create an HTML form with one field and button.On button click,get the input,and return the sum of the previous value and the current input value.The value is 0 and input is 5->output is 5,then value is 5,input is 6-> output is 11 and etc.
I tried few things nothing even close ,
if someone can give me the answer Ill be much appreciated , thanks.
There you go, but you should try doing it yourself. it's pretty easy to google things like "on button click" etc.
var total = 0;
$('.js_send').click(function(){
total += parseInt($('.number').val());
$('.total').html(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" value="0" class="number"/>
<input type="button" value="send" class="js_send"/>
<div class="total">0</div>
Here's a JQuery free version
var oldInput = 0,
newInput,
outPut;
document.querySelector("#showSum").onclick = function() {
newInput = parseInt(document.querySelector("#newInput").value),
outPut = newInput + oldInput,
oldInput = outPut,
document.querySelector("#result").innerHTML = outPut;
};
#result {
width: 275px;
height: 21px;
background: #ffb6c1;
}
<input type="number" value="0" id="newInput">
<button id="showSum">Show Results</button>
<br>
<div id="result"></div>
Here is the solution to your problem. Put all below code into a html file and name it as index.html, then run the html page.
<html>
<head>
<title></title>
</head>
<body>
Output : <label id="output">0</label>
<form method="get" action="index.html">
Your Input: <input type="text" id="TxtNum"/>
<input type="hidden" id="lastvalue" name="lastvalue" />
<input type="submit" onclick="return doSum();" value="Sum" />
</form>
<script>
//- get last value from querystring.
var lastvalue = getParameterByName('lastvalue');
if (lastvalue != null) {
document.getElementById("lastvalue").value = lastvalue;
document.getElementById("output").innerHTML = lastvalue;
}
/*
* - function to calculate sum
*/
function doSum() {
var newvalue = 0;
if(document.getElementById("TxtNum").value != '')
newvalue = document.getElementById("TxtNum").value;
var lastvalue = 0;
if(document.getElementById("lastvalue").value != '')
lastvalue = document.getElementById("lastvalue").value;
document.getElementById("lastvalue").value = parseInt(newvalue) + parseInt(lastvalue);
output = parseInt(newvalue) + parseInt(lastvalue);
}
/*
* - function to get querystring parameter by name
*/
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
</body>
</html>
If you are doing it in server side, You could have a static variable and update it on button click. More like
public static int prevValue;
public int buttonclick(.....){
int sum = textboxValue + prevValue;
prevValue = textboxValue;
return sum;
}
here is your solution
<script type="text/javascript">
var sum=0;
function summ()
{
localStorage.setItem("value",document.getElementById("text").value);
var v=localStorage.getItem("value");
sum=sum+parseInt(v);
alert(sum);
}
</script>
<html>
<input id="text">
<button id="submit" onclick="summ()">sum</button>
</html>
It will be pretty easy.
Created CodePen
http://codepen.io/anon/pen/eJLNXK
function getResult(){
var myinputValue=document.getElementById("myinput").value;
var resultDiv=document.getElementById("result");
if(myinputValue && !isNaN(myinputValue)){
resultDiv.innerHTML=parseInt(myinputValue) + (resultDiv.innerHTML ? parseInt(resultDiv.innerHTML) : 0);
}
}
<input type="text" id="myinput">
<button id="btngetresult" onclick="getResult()">GetResult</button>
<p>
Result:
<div id="result"></div>
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
function sum() {
var t1 = parseInt(document.getElementById("t1").value);
var t2 = parseInt(document.getElementById("pre").value);
document.getElementById("result").innerHTML = t1+t2;
document.getElementById("pre").value = t1;
}
</script>
</head>
<body>
<div>
<form method="get" action="">
<input type="text" name="t1" id="t1">
<input type="button" value="get sum" name="but" onclick="sum()">
<input type="hidden" name="pre" id="pre" value="0">
</form>
</div>
<div id="result"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
function validate5(str)
{
var myvar = <?php echo json_encode($code);?>
if (str.valueOf()===myvar.valueOf())
{
<?php include_once("view/ok.php");
$this->model->insertCustomer(); ?>
return true;
}
else{
alert("Wrong Key ...Try Again");
return false;
}
}
</script>
</head>
<body>
<form >
<h3> Insert Code: </h3> <input type="text" id="code" />
<button type="button" onclick="return validate5(code)">Confirm</button>
</form>
</body>
I've declared the $code correctly
i just want to redirect the user to ok.php if the text user entered matches with the $code is code is correct or stay on same page.
is it possible to it the way i'm trying to do?
if not please suggest some different way
Try this:
<script language="javascript" type="text/javascript">
function validate5()
{
var myvar = <?php echo json_encode($code);?>
var str = document.getElementById('code').value;
if (str==myvar)
{
window.location.href="/view/ok.php";
return true;
}
else{
alert("Wrong Key ...Try Again");
return false;
}
}
</script>
</head>
<body>
<form >
<h3> Insert Code: </h3> <input type="text" id="code" />
<button type="button" onclick="return validate5();">Confirm</button>
</form>
</body>
I got this code:
#using (Html.BeginForm())
{
<h3 id="js" class="text-blue title-article editable">#Model.Title</h3>
<input type="text" id="testinput" name="testinput" />
<input type="submit" value="submit" onclick="changeLink()">
}
<script>
function changeLink()
{
var str =document.getElementById('js').innerHTML;
alert(str);
}
</script>
When I click the submit-button, the function gets the .innerhtml from the id="js".
I would like the var str to get copied into the textbox with the id="testinput".
You can get value from js element and equal to the testinput
<script>
function changeLink()
{
document.getElementById('js').innerHTML = document.getElementById('testinput').value
}
</script>
Try this..
<script>
function changeLink()
{
document.getElementById('testinput').value=str ;
}
</script>
I cannot figure out what I'm doing wrong. validateForm() does not seem to execute from an onsubmit. Here is validateForm()
function validateForm() {
var amt = IsNumeric(document.forms["InvGenPay"]["Amount"].value);
alert(amt);
if (amt == false)
{
alert("placeholder to avoid scrolling.");
return false;
}
else
{
return true;
}
}
function IsNumeric(strString)
{
// check for valid numeric strings
var strValidChars = "0123456789.";
var strChar;
var blnResult = true;
if (strString.length == 0) return false;
// test strString consists of valid characters listed above
for (i = 0; i < strString.length && blnResult == true; i++)
{
strChar = strString.charAt(i);
if (strValidChars.indexOf(strChar) == -1)
{
blnResult = false;
}
}
if (0 > parseFloat(strString))
{
return false;
}
else
{
return blnResult;
}
}
Here is the form with onsubmit:
<script type="text/javascript" language="JavaScript1.2">
document.write('<form name="InvGenPayDonation" action="'+PostURL+'" onsubmit="return validateForm();" method="POST">');
</script>
<input type='text' name='DonationAmount' value="0.00">
In honor of <span style="color: #FF0000"><br />
<input type='text' name='TransDesc' id='TransDesc' value="" >
<input type="submit" value="Next">
</form>
Your biggest issue is that you don't have the right form name (or the right field name for that matter) in your validation code.
var amt = IsNumeric(document.forms["InvGenPay"]["Amount"].value);
vs
'<form name="InvGenPayDonation" action="'+PostURL+'"
Full, working code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Sampe file</title>
<script>
function validateForm() {
// Badly named variable, since this is actually a boolean of 'IsNumeric'
var amt = IsNumeric(document.forms["InvGenPayDonation"]["DonationAmount"].value);
// Can be simplified as simply:
//return amt;
alert('Amt = ' + amt);
if (!amt)
{
alert("placeholder to avoid scrolling.");
return false;
}
else
{
return true;
}
}
function IsNumeric(n) {
// Shamelessly stolen from:
// http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
<body>
<form name="InvGenPayDonation" action="#"
onsubmit="return validateForm();"
method=POST>
<input type='text' name='DonationAmount' value="0.00">
In honor of <span style="color: #FF0000"><br />
<input type='text' name='TransDesc' id='TransDesc' value="" >
<input type="submit" value="Next">
<script>
// Assigned for testing purposes
var PostURL = "#"
document.forms.InvGenPayDonation.action = PostURL;
</script>
</form>
</body>
</html>
You cannot have un-escaped newlines in a JavaScript string. Check your JavaScript console, you are probably getting a syntax error. That error is why the onsubmit is not running.
Also, as suggested, do not use document.write, just write the form normally in HTML, and use JavaScript to add just the POST url.
<form name="InvGenPayDonation" onsubmit="return validateForm();" method="POST">
<input type='text' name='DonationAmount' value="0.00">
In honor of <span style="color: #FF0000"><br />
<input type='text' name='TransDesc' id='TransDesc' value="" >
<input type="submit" value="Next">
</form>
<script type="text/javascript">
document.forms.InvGenPayDonation.action = PostURL;
</script>
P.S. As Jeremy J Starcher pointed out, your form name is wrong inside validateForm.
I added a stylish alert box to my page, resource is here . But problem is after clicking ok, confirmsubmit.jsp is not opening. Also in that alert cancel button is not appearing why?
javascript
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
<!--
function confirmation() {
var answer = csscody.alert("Confirm submit?")// added csscody here for alert but after clicking ok nothing happens
if (answer){
window.location = "confirmsubmit.jsp";
}
else{
return false;// here cancel button is not coming
}
}
//-->
</script>
</form>
html
<input type="text" name="textboxname"/>
<input type="submit" onclick="return confirmation()"/>
</form>
UPDATE
View below code ,it uses button instead of link
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
$().ready(function() {
$('#btn_submit').click(function(e) {
e.preventDefault();
var that = this;
var text = "si o no compa?";
csscody.confirm(text, {
onComplete: function(e) {
if (e) {
window.location = "confirmsubmit.jsp";
}
else {
return false;
}
}
})
});
});
</script>
<input type="text" name="textboxname"/>
<input type="submit" id="btn_submit" onclick="return confirmation()"/>
</form>
You willl have to use confirm instead of alert which will giv eyou both ok and cancel buttons which return true and false respectively. And also take off return from onclick
HTML
<form action = "confirmsubmit.jsp" method = "POST">
<input type = "text" name = "textboxname" />
<input type = "submit" onclick = "confirmation();" />
</form>
Javascript
function confirmation() {
var answer = confirm("Confirm submit?");
if (answer){
window.location = "confirmsubmit.jsp";
}
else{
return false;
}
}