Trying to copy one value from <input> field value to another using jQuery.
This works in JSFiddle But does not work when I try it on my local server.
what am I doing wrong?
https://jsfiddle.net/1emrxsLw/
JS:
$('#do').click(function() {
$('#three').val($('#one').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
Complete HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<title>Untitled 1</title>
</head>
<body>
<h1>Button Click</h1>
<form id="form1">
<input id='one' type='text' />
<input id='two' type='text' />
</form>
<form id="form2">
<input id='three' type='text' />
</form>
<input type='button' id="do" value="Copy" />
<h1>Insta-Copy(TM)</h1>
<form id="form1">
<input id='four' type='text' />
<input id='five' type='text' />
</form>
<form id="form2">
<input id='six' type='text' />
</form>
<h1>On Blur</h1>
<form id="form1">
<input id='seven' type='text' />
<input id='eight' type='text' />
</form>
<form id="form2">
<input id='nine' type='text' />
</form>
</body>
<script type="text/javascript">
$('#do').click(function() {
$('#pDate1').val($('#fdatea').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
</script>
</html>
First, id attributes in HTML page suppose to be unique to that page, you can't have multiple id values within the page, and you do have. for example:
<form id="form1">
<input id='four' type='text' />
<input id='five' type='text' />
</form>
and:
<form id="form1">
<input id='seven' type='text' />
<input id='eight' type='text' />
</form>
The forms have identical id values, and that's a bad practice.
Second, you posted to javascript files, which one are you actually using?
I tested for you the first js script:
$('#do').click(function() {
$('#three').val($('#one').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
That works fine.
However, the second js file that you posted at the bottom of the HTML page won't do the job because it refers to id values which don't exist, like: #pDate1 and #fdatea
Related
I am trying to do the if condition when requesting for reseting the form. When the condition is confirmed the form will be reset, if not it won't be reset.
<!DOCTYPE html>
<html>
<head>
<title>form events</title>
<meta charset="windows-1250">
</head>
<body>
<form onreset="FormReset()" name="form1">
<input type="text" name="T1" size="20" /><br />
<input type="reset" name="res1=" value="reset" /><br />
</form>
<script language="javascript">
function FormReset(){
if(confirm("Do you wish to reset your data?")){
return true;
}
else return false;
}
</script>
</body>
</html>
The below code should work:
<!DOCTYPE html>
<html>
<head>
<title>form events</title>
<meta charset="windows-1250" />
</head>
<body>
<form name="form1" id="myForm">
<input type="text" name="T1" size="20" /><br />
<input
type="button"
onclick="FormReset()"
name="res1="
value="reset"
/><br />
</form>
<script language="javascript">
function FormReset() {
if (confirm("Do you wish to reset your data?")) {
document.getElementById("myForm").reset();
}
}
</script>
</body>
</html>
Checkout Sample
I got this situation, this is my HTML page so far:
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<input type="text" id="campoA" class="fieldSet" style="width: 102px"/><label> Campo A</label>
<input type="text" id="campoB" class="fieldSet" style="width: 102px"/><label> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
On button click I need to send to another html page the content (value) of those two text input. I took a look to many solutions that i found online, but I'm very new to this and i can't accomplish my task. Can anyone provide me whit the right, step-by-step code in javascript/jquery?
Thanks in advance
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#send").click(function(){
$.post("demo_test_post.asp",
{
campoA: $('#campoA').val(),
campoB: $('#campoB').val()
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<input type="text" id="campoA" class="fieldSet" style="width: 102px"/><label> Campo A</label>
<input type="text" id="campoB" class="fieldSet" style="width: 102px"/><label> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
</body>
</html>
You need a server tecnology, this is an example using PHP on server.
Page land.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.php">
<h1>DATI</h1>
<label class="label" for="campoA">
<label> <input type="text" id="campoA" name="campoA" class="fieldSet" style="width: 102px"/> Campo A</label>
<label> <input type="text" id="campoB" name="campoB" class="fieldSet" style="width: 102px"/> Campo B</label>
<input type="submit" id="send" value="Trasmetti" class="fieldSet"/>
</form>
</body>
</html>
Page land.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
CampoA: <?php echo $_POST['campoA'] ?><br/>
Or <br />
<?php echo $_REQUEST['campoA'] ?><br/>
</div>
<div>
CampoB: <?php echo $_POST['campoB'] ?><br/>
Or <br />
<?php echo $_REQUEST['campoB'] ?><br/>
</div>
</body>
</html>
You could use JQueries AJAX like below:
$("#send").click(function(e){
e.preventDefault;
var val1 = $("campoA").val();
var val2 = $("campoB").val();
$.ajax({
method: "POST",
url: "url",
data: { value1: val1, value2: val2 }
}).done(function(){
// do something
});
});
Try this:
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<label> <input type="text" id="campoA" name="campoA" class="fieldSet" style="width: 102px"/> Campo A</label>
<label> <input type="text" id="campoB" name="campoB" class="fieldSet" style="width: 102px"/> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
$('#send').click(function(evt) {
evt.preventDefault();
evt.stopPropagation();
$.ajax({
url: "./proba.html",
method: "POST",
data: $('#Form').serialize(),
success: function(html) {
console.log(html);
}
});
});
});
</script>
I have four form like form-1 , form-2 , form-3 , form-4 and three Buttons as Button-1, Button-2 , Button-3.
When first jsp page load it has form elements which will display on the screen.
Now my question is when i click to button-2 it should display form-2 and disable other three forms (form-1 , form-3 , form-4 ).Same case with the others two buttons.
Please provide me proper solution using javascript or jquery.
I am using jsp page for html form design.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
});
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
});
$("#b3").click(function(){
alert("jj");
$("#f1,#f2,#f4").hide();
$("#f3").show();
});
</script>
<style type="text/css">
#f2,#f3,#f4{
display: none;
}
</style>
</head>
<body >
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
</body>
</html>
I have done the coding as per above answer but i am not able to get the different form when i click. I check with alert message also the click is not working . Please tell me where i am doing wrong.
here is the sample.
live Demo : http://jsfiddle.net/a6NJk/626/
Html
You need four forms and three buttons for this:
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
Jquery
When you will click in the button you need to show corresponding form and hide all other form.
see jquery api : http://api.jquery.com/
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
})
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
})
$("#b3").click(function(){
$("#f1,#f2,#f4").hide();
$("#f3").show();
})
CSS
#f2,#f3,#f4{
display: none;
}
If you wanted to use anchor tag instead of button then change your html :
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<a href="javascript:void(0)" id="b1" > b1</a >
<a href="javascript:void(0)" id="b2" > b2</a>
<a href="javascript:void(0)" id="b3" > b3</a >
Demo : http://jsfiddle.net/a6NJk/627/
update 0
got this error message: Uncaught ReferenceError: $ is not defined
update 0
update 1 newest Source
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Reservations</title>
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<center><h1>Reservations</h1></center>
<div class="wrapper">
<p> You can start over at the beginning here. </p>
<big>Reserve some courts online </big> <br />
<script type="text/javascript" language="JavaScript">
$( document ).keypress(function() {
$("#timeStamp span").text("Timestamp is no-longer correct");
});
</script>
<form action="" method="post" >
<input type="hidden" name="ID" value="Rogers"></input>
<input type="hidden" name="weekday" value="Tuesday"></input>
<input type="hidden" name="nowweekday" value="1"></input>
<input type="hidden" name="month" value="September"></input>
<input type="hidden" name="nowmonth" value="9"></input>
<input type="hidden" name="day" value="18"></input>
<input type="hidden" name="year" value="2012"></input>
<input type="hidden" name="startTime" value="[15, 0]"></input>
<input type="hidden" name="endTime" value="[20L, 0L]"></input>
<input type="hidden" name="court" value="court1"></input>
<input type="hidden" name="court" value="court2"></input>
<h1>Tuesday, September 18, 2012 at Rogers Neighborhood Club</h1>
<div class="timeStamp" ><h1 id="timeStamp">15:07:24.657430<span></span></h1></div> <br />
update 1 newest Source
I have a timestamp on a page that is created on page load.
I want to alter the adjoining text label of the time stamp to indicate that the timestamp is no longer correct when there is a keyDown anywhere in the window.
Can that be done easily with javascript?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Reservations</title>
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<center><h1>Reservations</h1></center>
<div class="wrapper">
<p> You can start over at the beginning here. </p>
<big>Reserve some courts online </big> <br />
<script type="text/javascript" language="JavaScript">
$("*").keypress(function() {
$("#timeStamp").text("Modified");
});
</script>
<form action="" method="post" >
<input type="hidden" name="ID" value="Rogers"></input>
<input type="hidden" name="weekday" value="Tuesday"></input>
<input type="hidden" name="nowweekday" value="1"></input>
<input type="hidden" name="month" value="September"></input>
<input type="hidden" name="nowmonth" value="9"></input>
<input type="hidden" name="day" value="18"></input>
<input type="hidden" name="year" value="2012"></input>
<input type="hidden" name="startTime" value="[14, 30]"></input>
<input type="hidden" name="endTime" value="[20L, 0L]"></input>
<input type="hidden" name="court" value="court1"></input>
<input type="hidden" name="court" value="court2"></input>
<h1>Tuesday, September 18, 2012 at Rogers Neighborhood Club</h1>
<div class="timeStamp" id="timeStamp"><h1>text14:49:30.274646</h1></div> <br />
Yes, like so:
Assuming you're using jQuery and have the timestamp HTML like this:
<p id="timeStamp">2012-09-18 20:08 <span></span></p>
<!-- the span is where the message will be inserted -->
...and the jQuery code itself:
$( document ).keypress(function() {
$("#timeStamp span").text("Timestamp is no-longer correct");
});
Change your body element like this : <body onload="document.body.focus()" onkeyup="key()">... It will execute the key function everytime a key is pressed. Do everything you want there..
Here I have a some HTML code and I need to 1st. load url source code then type xpath and as a result get a some text from that URL based on xPath... How to do that... with jquery, ajax ... ???
http://jsfiddle.net/cHtWq/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<label>Enter URL address here:
<input name="textfield" type="text" value="http://www." />
</label>
<label>
<input type="submit" name="Submit" value="Submit" />
<br />
<br />
Enter xpath location of element:
<input type="text" name="textfield2" />
<input type="submit" name="Submit2" value="Submit" />
<br />
<br />
Selected element is: </label>
<p> </p>
</body>
</html>
You cannot do this in JavaScript because of the Same Origin Policy you will need some back end scripting to do this.