html onclick javascript function call to show something - javascript

I want to call gettotal function to get value from textbox and * 3 and show the result in other textbox , code does not work
where is the problem!?
<html>
<head>
<script type="text/javascript" language="javascript">
function gettotal()
{
var x=0;
x=document.getElementById("pop").value*3;
document.getElementById("pop1").innerHTML="<b>"+x+"</b>";
}
</script>
<title>hello</title>
</head>
<body>
<form name="form1">
<input type="button" id="btn" name="btn" value="get" OnClick="gettotal()"/>
<input type="text" id="pop" name="pop" size="3"/>
<br/>
<br/>
<input type="text" id="pop1" name="pop1" size="5" value="val"/>
</form>
</body>
</html>


<html>
<head>
<script type="text/javascript" language="javascript">
function gettotal()
{
var x=0;
x=document.getElementById("pop").value*3;
document.getElementById("pop1").value=x;
}
</script>
<title>hello</title>
</head>
<body>
<form name="form1">
<input type="button" id="btn" name="btn" value="get" OnClick="gettotal()"/>
<input type="text" id="pop" name="pop" size="3"/>
<br/>
<br/>
<input type="text" id="pop1" name="pop1" size="5" value="val"/>
</form>
</body>
</html>


Instead of .innerHTML() (used to asign HTML tags to element) use .value to assign value to an input field like #Azzi mentioned in his answer :
function gettotal()
{
var x=0;
x=document.getElementById("pop").value*3;
document.getElementById("pop1").value=x;
}
<form name="form1">
<input type="button" id="btn" name="btn" value="get" onClick="gettotal()"/>
<input type="text" id="pop" name="pop" size="3"/>
<input type="text" id="pop1" name="pop1" size="5" value="val"/>
</form>
Hope this helps.

Related

Javascript get value from popup input radio class

Is there any possible way to get an input radio value information (externaly), from a class?
I did a million attempts...
Here is the code im stucked to:
Parent.htm
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="txtName" readonly="readonly" />
<input type="button" value="Select Name" onclick="SelectName()" />
<script type="text/javascript">
var popup;
function SelectName() {
popup = window.open("Popup.htm", "Popup", "width=300,height=100");
popup.focus();
return false
}
</script>
</body>
</html>
And here is the page that i can't define to get the information that are on value.
Popup.htm
<html>
<body>
<form class="ddlNames">
<input type="radio" name="ddlNames" id="num" value="one">
<input type="radio" name="ddlNames" id="num" value="two">
<input type="radio" name="ddlNames" id="num" value="three">
</form>
<br />
<br />
<input type="button" value="Select" onclick="SetName();" />
<script type="text/javascript">
function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("txtName");
txtName.value = document.getElementsByClassName("ddlNames")[0].value;
}
window.close();
}
</script>
</body>
</html>
I tried this way too:
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="one">
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="two">
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="three">
To give each one the ddlNames class, but it's not working?

You can get the checked value using a query-selector
document.querySelector('input[name="ddlNames"]:checked').value;

Append radio button

How to append radio button using jquery or javascript to save into the databse?
I appended input types like text,textarea,checkbox,select with options.
My code is
<!DOCTYPE html>
<html lang="en">
<head>
<title>
apnd
</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var htmldata='<div>Name<input type="text" name="cname[]">Mobile Number<input type="text"name="mob[]">Gender<input type="radio" name="gender[]" value="M">Male<input type="radio" name="gender[]" value="F">FemaleAddress<textarea name="address[]"></textarea><input type="button" class="remove_field" value="remove"></div>';
$('.add_field').click(function(){
$('.wrapper').append(htmldata);
});
$('.wrapper').on('click','.remove_field',function(){
$(this).parent('div').remove();
});
});
</script>
</head>
<body>
<div class="container">
<form method="post" action="">
<div class="wrapper">
<div>
Name<input type="text" name="cname[]">
Mobile Number<input type="text" name="mob[]">
Gender<input type="radio" name="gender[]" value="M">Male
<input type="radio" name="gender[]" value="F">Female
Address<textarea name="address[]"></textarea>
<input type="button" class="add_field" value="Add">
</div>
</div>
<input type="submit" name="sub" value="Save">
</form>
</body>
</html>
using php I want to save the values to database.
$name=sc_sql_injection($_POST['cname']);
$mobile=sc_sql_injection($_POST['mob']);
$gender=sc_sql_injection($_POST['gender']);
$address=sc_sql_injection($_POST['address']);
$count=count($_POST['cname']);
for($i=0;$i<$count;$i++)
{
$sql="insert into t2(name,mobile,gender,address) values('$name[$i]','$mobile[$i]','$gender[$i]','$address[$i]')";
sc_exec_sql($sql,$con);
}
Update

Append radio button
<!DOCTYPE html>
<html lang="en">
<head>
<title>
apnd
</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var i=1;
$('.add_field').click(function(){
var htmldata='<div>Name<input type="text" name="cname[]">Mobile Number<input type="text"name="mob[]"> Gender<input type="radio" name="gender['+i+']" value="M">Male<input type="radio" name="gender['+i+']" value="F">Female Address<textarea name="address[]"></textarea><input type="button" class="remove_field" value="remove"></div>';
i++;
$('.wrapper').append(htmldata);
});
$('.wrapper').on('click','.remove_field',function(){
$(this).parent('div').remove();
i--;
});
});
</script>
</head>
<body>
<div class="container">
<form method="post" action="">
<div class="wrapper">
<div>
Name<input type="text" name="cname[]">
Mobile Number<input type="text" name="mob[]">
Gender<input type="radio" name="gender[0]" value="M">Male
<input type="radio" name="gender[0]" value="F">Female
Address<textarea name="address[]"></textarea>
<input type="button" class="add_field" value="Add">
</div>
</div>
<input type="submit" name="sub" value="Save">
</form>
</body>
</html>
$(document).ready(function(){
var i=1;
$('.add_field').click(function(){
var htmldata='<div>Name<input type="text" name="cname[]">Mobile Number<input type="text"name="mob[]"> Gender<input type="radio" name="gender['+i+']" value="M">Male<input type="radio" name="gender['+i+']" value="F">Female Address<textarea name="address[]"></textarea><input type="button" class="remove_field" value="remove"></div>';
i++;
$('.wrapper').append(htmldata);
});
$('.wrapper').on('click','.remove_field',function(){
$(this).parent('div').remove();
i--;
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="">
<div class="wrapper">
<div>
Name<input type="text" name="cname[]">
Mobile Number<input type="text" name="mob[]">
Gender<input type="radio" name="gender[0]" value="M">Male
<input type="radio" name="gender[0]" value="F">Female
Address<textarea name="address[]"></textarea>
<input type="button" class="add_field" value="Add">
</div>
</div>
<input type="submit" name="sub" value="Save">
</form>
</body>
</html>

TinyMCE not initializing, but no JavaScript errors

I have a VERY simple email form (for a members-only page for a private club) to send email blasts. The code is simply:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../../tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
</head>
<body>
<h1>Email Blast</h1>
<form method="post">
<input type="hidden" name="from" value="blast#club.com" />
<input type="hidden" name="to" value="blast#club.com" />
<input type="hidden" name="reply" value="from#club.com" />
<input type="hidden" name="bcc" value="Tester <test#club.com>" />
<label for="subject">Subject</label><br/>
<input type="text" name="subject" id="subject" style="width: 600px" /><br/>
<label for="message">Message</label><br/>
<textarea id="message" name="message" rows="15" cols="100" class="tinymce"></textarea><br/>
<br/><input type="submit" value="Send Email" name="submit">
</form>
</body>
<script type="text/javascript">
jQuery(document).ready(function() {
tinymce.init({selector:"textarea.tinymce"});
});
</script>
For some reason the page simply isn't rendering the textarea.tinymce as I would expect, but there are no error messages in the JS Console and all the breakpoints are hit as I would expect.
What am I missing?

You should place your script tag inside the body tag, just before closing it.
If you put anything after closing your body tag, the browser will ignore it.
Look at the example below - if you place the script tag inside the body tag, it works like a charm:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.2.5/tinymce.jquery.min.js"></script>
</head>
<body>
<h1>Email Blast</h1>
<form method="post">
<input type="hidden" name="from" value="blast#club.com" />
<input type="hidden" name="to" value="blast#club.com" />
<input type="hidden" name="reply" value="from#club.com" />
<input type="hidden" name="bcc" value="Tester <test#club.com>" />
<label for="subject">Subject</label><br/>
<input type="text" name="subject" id="subject" style="width: 600px" /><br/>
<label for="message">Message</label><br/>
<textarea id="message" name="message" rows="15" cols="100" class="tinymce"></textarea><br/>
<br/><input type="submit" value="Send Email" name="submit">
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
tinymce.init({selector:"textarea.tinymce"});
});
</script>
</body>
</html>

How to get the other form details using javascript?

I have two forms namely form1 and form2 .
First I submit form1. It goes to the form2 page. Here I need form1 details. How do I do this?

try this code
the first way with php
form1:
<html>
<head>
<title>form1</title>
</head>
<body>
<form action="form2.php" method="post">
<input type="text" name="input1">
<input type="submit">
</form>
</body>
</html>
here this form now submit to form2.php:
<?php
if(isset($_POST)){
?>
<html>
<head>
<title>form2</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="input2" value="<?php echo $_POST['input1'];?>">
<input type="submit">
</form>
</body>
</html>
<?php
}
?>
so now the value of input in the form1
will be in the input value of form2
and if form1 is not submitted form2 wouldn't appear
the second way with jquery
$('#submit').click(function() {
var input1 = $('#input1').val();
$("#form1").hide();
$("#input2").val(input1);
$("#form2").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>title</title>
</head>
<body>
<form id='form1' action="form2.php" method="post">
<div>form1</div>
<input id='input1' type="text" name="input1">
<input id='submit' type="button" value="submit">
</form>
<form id='form2' action="" method="post" style='display:none'>
<div>form2</div>
<input id='input2' type="text" name="input2" value="">
<input type="submit">
</form>
</body>
</html>

Forwarding a textbox value into another hidden textbox in the same page

I have 2 textboxes , one of them is hidden . On clicking submit , the value entered in first textbox should pass on to the next textbox which is hidden .
Here is my code ,
<html>
<head>
<title>Contact Form</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" language="javascript"></script>
<script>
$(function(){
$('#textbox1').blur(function() {
$('input[name=textbox2]').($('#textbox1').val());
});
});
</script>
</head>
<body>
<form>
<input name="textbox1" type="text" class="inputext" value="" style="cursor: text" id="textbox1" />
<input name="textbox2" type="hidden" class="inputext" value="" style="cursor: text" id="textbox2" />
<input name="Add" type="button" value="Add" id="btn"/>
</form>
</body>
</html>
Any help would be much appreciated :)

update your code:
<html>
<head>
<title>Contact Form</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" language="javascript"></script>
<script>
$(function(){
$('#textbox1').blur(function() {
$('input[name=textbox2]').attr('value',$('#textbox2').val()+$('#textbox1').val());
console.log($('#textbox2').val());
});
});
</script>
</head>
<body>
<form>
<input name="textbox1" type="text" class="inputext" value="" style="cursor: text" id="textbox1" />
<input name="textbox2" type="hidden" class="inputext" value="" style="cursor: text" id="textbox2" />
<input name="Add" type="button" value="Add" id="btn"/>
</form>
</body>
</html>

<script>
$(document).ready(function() {
$('#btn').click(function() {
var textbox1=$("#textbox1").val();
$("#textbox2").val(textbox1);
}); });
</script>
<form>
<input name="textbox1" type="text" class="inputext" value="" style="cursor: text" id="textbox1" />
<input name="textbox2" type="text" class="inputext" value="" style="cursor: text" id="textbox2" />
<input name="Add" type="button" value="Add" id="btn"/>
</form>

you missed val() function
Sample
$('#textbox1').blur(function() {
$('#textbox2').val($(this).val());
});

Categories