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>
Related
The following script does not work ... does anyone know what is the error? I am trying to jump focus to the next form field when input reaches the max length limit.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>SECURITY</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$('#focus1,#focus2,#focus3').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength'))
$(this).next(':input').focus()
})
})
</script>
</head>
<body>
<div class="container">
<form id="contact" action="" method="post">
<h3SECURITY</h3>
<fieldset>
<input id="focus1" placeholder="Barcode" type="text" tabindex="1" maxlength="1" size="1" required>
</fieldset>
<fieldset>
<input id="focus2" placeholder="Identification Number" type="text" tabindex="2" maxlength="1" size="1" required>
</fieldset>
<input id="focus3" placeholder="Truck Number" type="text" tabindex="3" maxlength="1" size="1" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</body>
</html>
Here is a version that works:
$(function() {
$('#focus1,#focus2,#focus3').keyup(function(e) {
if ($(this).val().length >= $(this).attr('maxlength')) {
$(this).parent().next('fieldset').find('input').focus();
}
});
});
and a demo of it.
Move your script section just before the ending body tag '</body>'.
<script type="text/javascript">
$(function(){
$('#focus1,#focus2,#focus3').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength'))
$(this).next(':input').focus()
})
})
</script>
</body>
This question already has answers here:
jQuery serializeArray doesn't include the submit button that was clicked
(5 answers)
Closed 6 years ago.
I have a series of input fields and I would like them to post their values to a php page for processing then return some data without reloading the page. Here is the what I have so far, however no data appears to be passing.
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("form").submit(function(form) {
$.ajax({
type:"POST",
url:"catch.php",
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
console.log(data);
}
});
form.preventDefault();
});
});
</script>
</head>
<body>
<form method="post" name="form">
<input type="submit" name="event" value="1" />
<input type="submit" name="event" value="2" />
<input type="submit" name="event" value="3" />
<input type="submit" name="event" value="4" />
</form>
<div id="result"></div>
</body>
</html>
PHP:
<?php
if(isset($_POST["event"]))
{
echo $_POST["event"];
}
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.event').on('click', function(){
$('#event').val($(this).val());
$('#event_form').submit();
});
$("form").submit(function(form) {
$.ajax({
type:"POST",
url:"catch.php",
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
console.log(data);
}
});
form.preventDefault();
});
});
</script>
</head>
<body>
<form method="post" name="form" id="event_form">
<input name="event" id="event" value="" type="hidden">
<input type="button" class="event" value="1" />
<input type="button" class="event" value="2" />
<input type="button" class="event" value="3" />
<input type="button" class="event" value="4" />
</form>
<div id="result"></div>
</body>
</html>
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
My final goal is to make a form that creates csv files. I'm trying to figure out how filesaver.js works . I tried the code below but can't get it working. Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script async="" src="FileSaver.js"/>
<script async="" src="Blob.js"/>
<script async="" src="FileSaver.min.js"/>
<script type="text/javascript">
function Write()
{
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");
}
</script>
</head>
<body>
<div id="container">
<h2>Palaces</h2>
<form NAME="userform" onsubmit="return Write();">
<p class="submit"><button type="submit" value="Save">Signup</button></p>
</form>
</div>
</body>
</html>
It seems that FileSaver.js doesn't work with onsubmit. Here is my workaround:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="FileSaver.js"></script>
<script>
window.onload = function() {
document.form1.action = download();
}
function download(){
var data = [nomen.value, image.value, X.value, Y.value, message.value]
dataString = data.join(",");
var blob = new Blob([dataString],{type:"text/plain;charset=utf-8"});
saveAs(blob,"helloworld.csv");
}
</script>
</head>
<body>
<div id="container">
<h2>Palaces</h2>
<form NAME="form1" onsubmit="return download();return false">
<fieldset><legend>CSV input</legend>
<p class="first">
<label for="nodename">Name of information</label>
<input type="text" name="nomen" id="nomen" size="30">
</p>
<p>
<label for="image">image file name</label>
<input type="text" name="image" id="image" size="30" />
</p>
<p>
<label for="X">Point X axis</label>
<input type="number" name="X" id="X" size="30" />
</p>
<p>
<label for="Y">Point Y axis</label>
<input type="number" name="Y" id="Y" size="30" />
</p>
<p>
<label for="message">message<b>written in HTML</b></label><br>
<textarea cols="50" rows="4" name="message" id="message" placeholder="Once upon a time..."></textarea>
</p>
</fieldset>
<input type="button" value="download" onclick="return download();return false"/>
</form>
</div>
</body>
</html>
I face problem that my div.hide is not working, because it just shows and whenever I click back link "reply" it's does not hide.
JavaScript
<script type="text/javascript">
$('body').on('click','a.btnGG',function(){
var va=$(this).data('comment_id');
$("#parent_id").val(va);
$("#formReply").attr("va",$("#formReply").attr("va") + va);
$(".formms").hide();
$(this).after('<div class="formms">'+$(".gg").html()+'</div>');
$("#hides").onclick(function (){
$(".gg").css("display","block");
});
</script>
tpl
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
I'm beginner programmer.
It's hard to tell what you are doing with your code. If you simply want to display div or hide clicking on reply button, there's a complete code (TPL file):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
<script type="text/javascript">
$('body').on('click','a.btnGG',function() {
$(".gg").toggle();
});
</script>
</body>
</html>
<a href="javascript;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
// Code
</div>
Change it to something like
<a href="#" id="hides" class="btnGG" > reply</a>
<div class="gg" id="testid" style="display:none;">
// Code
</div>
and use script like
$(document).ready(function(){
$("#hides").onclick(function(){
$("#testid").toggle("show");
});
});