How to pass value to previous html page - javascript

I have a HTML page with a textbox. On clicking the textbox, a pop-up shows up and upon clicking the OK button the pop-up has to close and the textbox in the first html page has to be filled with value given in the second HTML.
I tried something like this,
one.html
<form name="form1" >
<input type="text" name="source" onclick="window.open('second.html')" />
</form>
second.html
<input type="button" onclick="{document.form1.source.value='hello';window.close()}" />

in your first.html
<form name="form1" >
<input type="text" id="txt1" name="source" onclick="window.open('second.html')" />
</form>
<script type="text/javascript" >
function setvalue(args)
{
document.getElementByid('txt1').value=args;
}
</script>
second.html
<input type="button" onclick="settoparent()" />
<script type="javascript">
function settoparent()
{
if(window.opener.setvalue!=undefined)
{
setvalue("textboxvaluefromHTML2");
}
window.close()
}
</script>

You have to use
window.opener.$("#yourtextfieldid").val(value);
to achieve this
In Your vanila JS
window.opener.document.yourelementID.fieldname.value="Any value";

Related

click function is not working on button

i am trying to make a list and submit button and the user enters the list size and then after clicking on a button the form is submitted (list size is sent to the servlet ) and an alert should appear .. but the alert is not working .. here is my code
<body>
<form action="ServerSide" method="post">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
alert("anything");
});
});
</script>
</body>
You can try this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Also read this document DOCS
First of all make sure you are including/referencing JQuery Libray before you use JQuery. it should work.
Secondly you can use this
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="button" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").on('click',(function(){
alert("anything");
}));
});
</script>
</body>
I also notice that you had used input type submit it will submit form instead of calling click function. you should change type to button
if you want to do something on form submission you have to use onsubmit event
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(){
alert("anything");
});
});
</script>
</body>
For this you don't need to add click listener on the submit button. once you submit form it will show you alert.

Show a javascript variable on html textbox

All I have to do is to show a number in a textbox and a button which add 10 every time I press it, here's my code (it doesn't work).
<head>
<script type="text/javascript">
var n=parseInt(ocument.forms["formNum"]["numero"].value);
document.getElementById("numero").value=n;
function sumar() {
n=document.forms["formNum"]["numero"].value+10;
document.forms["formNum"]["numero"].value=n;
}
function inicializar() {
n=document.forms["formNum"]["numero"].value=0;
}
</script>
</head>
<body>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" />
</p>
<p>
<input type="button" name="sumar" value="Sumar" onclick="sumar()" />
<input type="button" name="inicializar" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
<body>
<script type="text/javascript">
function sumar(){
document.getElementById("numero").value = parseInt(document.getElementById("numero").value)+10;
}
function inicializar(){
document.getElementById("numero").value=0;
}
</script>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" value="0" />
</p>
<p>
<input type="button" value="Sumar" onclick="sumar()" />
<input type="button" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
Five suggestions.
It is always better to give unique ids to your html elements.
Never name your HTML elements and javascript functions the same.
If you want to access the html element from javascript, if you know the id, use getElementById.
Use Firebug or Developer tools from the browser, to debug.
If you want to access your elements with the hierarchy, use elements in the form like this document.forms["formNum"].elements["numero"].value. Check this example
Demo: http://jsfiddle.net/DPJCR/
This code should work:
<input type="text" id="mytext">
<script type="text/javascript">
var elem = document.getElementById("mytext");
elem.value = "My default value";
</script>
See: Set the value of an input field
Maybe you are getting an exception from the parseInt that prevents the value from changing.
If it is an option to use jQuery, try this:
function sumar(){
$("#numero").attr("value", parseInt($("#numero").attr("value"), 10)+10);
}
Try this this will help you
var count=10;
$('#btnSumar').click(function(){
if($('#numero').val()=='')
{
$('#numero').val(count);
}else
$('#numero').val(eval($('#numero').val())+count);
});
$('#btnInc').click(function(){
$('#numero').val('');});
Fiddle here

In which TextBox is the cursor.?

I have 4 textboxes and a submit button in my web page.
Suppose the user enters data in 2 fields and then clicks the submit button.
I now want to know in which textbox the cursor was located just before the submit button was clicked.
Any idea on how to do this in Javascript?
You're looking for document.activeElement, which returns the currently focused element.
Your question does specifically say in javascript, but FWIW here is another option in jQuery:
Working jsFiddle here
HTML:
<input id="in1" type="text" /><br />
<input id="in2" type="text" /><br />
<input id="in3" type="text" /><br />
<input id="in4" type="text" /><br />
<input type="button" id="mybutt" value="Submit" />
jQuery:
var inFocus = false;
$('input, textarea').focus(function() {
inFocus = $(this).attr('id');
});
$('#mybutt').click(function() {
alert('Cursor was last in element id: ' + inFocus);
});
you can use document.activeElement
here is the simple example for the same.
<head>
<script type="text/javascript">
function GetActive () {
if (document.activeElement) {
var output = document.getElementById ("output");
output.innerHTML = document.activeElement.tagName;
}
}
</script>
</head>
<body onclick="GetActive ();">
Click anywhere on the page to get the active element
<input id="myInput" value="input field" />
<button>Sample button</button>
<div id="output"></div>
</body>

Making a button appear when a number is entered into the form

From this topic: how do i make an invisible text input box visible on hover?
I read this problem and it helps me a lot and I came with this code:
HTML:
<div id="box1">
<form action="">
<input type="string" name="amount" />
</form>
</div>
CSS:
#box1 {
width:100px;
height:30px;
}
#box1:hover input {
display:block;
padding:3px;
}
#input {
display:none;
}
My problem is that once I input the amount, I want the confirm button to show up. Is this possible?
Thanks in advance.
This should accomplish what you are after:
<!-- In the head of your document: -->
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').hide();
$('#amount').keyup(function() {
if ($(this).val() == '') {
$('#submit').hide();
}
else {
$('#submit').show();
}
});
});
</script>
<!-- For your form in the body: -->
<div id="box1">
<form action="">
<input type="string" name="amount" id="amount" />
<input type="submit" name="submit" id="submit" />
</form>
</div>
Based on your question I am guessing you are looking to make the confirm button appear as soon as a key is pressed in the text box. JQuery is a very helpful library for handling browser events, you should look into using that.
html:
<div id="box1">
<input type="text" id="txtAmount" />
<input type="button" id="btnConfirm" value="Confirm"/>
</div>
​
javascript/jquery:
//self invoking javascript function
$(function() {
//hide the button on page load
$('#btnConfirm').hide();
//listen for a keypress event
$('#txtAmount').on('keypress', function() {
$('#btnConfirm').show();
});
});​
here is the jsfiddle if you would like to try it http://jsfiddle.net/49Dhc/5/
Actually make the "confirm" button.
<div id="box1">
<form action="">
<input type="string" name="amount" />
<input type="submit" value="confirm" id="submit" style="display:none"/>
</form>
</div>
Anytime the element with name "amount" is changed or a key is pressed (onchange for backspaces) if the value is not "" or nothing then it'll display the submit button using inline css.
<script>
amount.onchange=amount.onkeyup=function(){
document.getElementById("submit").style.display=this.value==""?"none":"block";
}
</script>

Why does this code not add another field when clicking on the `add another field` input button?

Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});​​

Categories