1

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

FabioEnne
  • 732
  • 1
  • 14
  • 43
  • 1
    Can you please clarify the question, you need to send the values of input filed to another HTML page or PHP page? – ibondoc22 Mar 13 '15 at 11:25
  • 1
    Your inputs should have `name` properties – markpsmith Mar 13 '15 at 11:25
  • If you are using POST, you need to be handling the data server-side, in PHP for example. If you are using GET, you can get the input values with Javascript. Make your choice :-) – ascx Mar 13 '15 at 11:26
  • @markpsmith, no, if he will use ajax, it is not mandatory... – sinisake Mar 13 '15 at 11:27
  • it seems like the OP want to post/get the input field to another HTML, as far as I know this can not be done (correct me if I'm wrong please), as you need server side language (e.g. PHP) to process this. – ibondoc22 Mar 13 '15 at 11:31
  • @Maion yes, the imput fiels values to another html page in order to visualize them in a div. – FabioEnne Mar 13 '15 at 11:33
  • Then you can post/get this fields in server side language like PHP then redirect to another land.html with the response. – ibondoc22 Mar 13 '15 at 11:37
  • You could also use [localStorage](http://www.w3schools.com/html/html5_webstorage.asp), I think. I added a - not particular aesthetic - solution to a comparable problem: [click](http://stackoverflow.com/questions/28237695/update-two-html-files-at-the-same-time-using-javascript/28484839#28484839) – Cleb Mar 13 '15 at 11:58

4 Answers4

1
    <!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>
Stanislav
  • 11
  • 1
1

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>
vifito
  • 177
  • 4
0

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
    });
});
Matthew North
  • 553
  • 5
  • 20
  • They would need to be added to the page on the server. If you mean you have two pages open from the site on different tabs or something, you would need to store the results on the server, the other page would then either need refreshing so the new data can be returned with the page or you could have some ajax on the page checking for new data every minute or so. – Matthew North Mar 13 '15 at 11:44
0

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>
vifito
  • 177
  • 4