CODEWITHSUNDEEP
javascriptjqueryhtml
flatbreadcandycane
flatbreadcandycane

Reputation: 365

How do I transfer the form values of one html file and make it as a value in another?

I'm trying to use jQuery to do this. I have a 2 html files. One which has a form and 2 which doesn't. I want to transfer the form value like full name and make it as the next html file's full name.

I am attaching a part of the form in the first html file

$( document ).ready(function() 
{
$("#theme1").click(function(){
   
function testjs(){
  var name = jQuery("#fullname").val();
   jQuery.load("resume1.html",function(){
   jQuery("#name1").html(fullname);
    });
}

});


});
<form class="form1">
<h3><b>Full Name:</b></h3><br/>
  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" name="fullname"><br><br/>
<h3><b>Phone Number:</b></h3><br/>
 &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" name="phone"><br/><br/>
  <h3><b>E-Mail:</b></h3><br/>
  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" name="mail"><br/><br/>
<h3><b>Select Theme:</b></h3><ul>
  <li>Theme1&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="submit" class="size" id="theme1" name="theme1"></li><br/>
  <li>Theme2&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="submit" class="size" name="theme2"></li><br/><br/>
  </ul>
  
</form>

This is a part of the second html file.

<div class="yui-u first">
<h1 id="name1">full name</h1>
</div>

Upvotes: 0

Views: 61

Answers (2)

Jax Teller
Jax Teller

Reputation: 1467

If you haven't any server side, you can do it using localStorage.

Using your code :

page1.html :

<body>
<form class="form1">
<h3><b>Full Name:</b></h3><br/>
  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" id="fullname" name="fullname"><br><br/>
<h3><b>Phone Number:</b></h3><br/>
 &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" id="phone" name="phone"><br/><br/>
  <h3><b>E-Mail:</b></h3><br/>
  &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="text" class="size" id="mail" name="mail"><br/><br/>
<h3><b>Select Theme:</b></h3><ul>
  <li>Theme1&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="submit" class="size" id="theme1" name="theme1"></li><br/>
  <li>Theme2&#160;&#160;&#160;&#160;&#160;&#160;&#160;<input type="submit" class="size" id="theme2" name="theme2"></li><br/><br/>
  </ul>

</form>
  </body>

Script of page1.html :

  <script>
 $(document).ready(function() {
      localStorage.clear();

      $(".form1").submit(function(e) {
            e.preventDefault();
            console.log("in");
           localStorage.setItem("fullname", $("#fullname").val());
           localStorage.setItem("phone", $("#phone").val());
           localStorage.setItem("mail", $("#mail").val());

           window.location = "page2.html";
      })      
    }
  </script>

page2.html :

<body>
    <div class="yui-u first">
        <h1 id="name1"></h1>
        <h1 id="phone1"></h1>
        <h1 id="mail1"></h1>
    </div>
</body>

Script of page2.html :

 <script>
      $(document).ready(function() {
        var fullname = localStorage.getItem("fullname");
        var phone = localStorage.getItem("phone");
        var mail = localStorage.getItem("mail");

        $("#name1").append(fullname);
        $("#phone1").append(phone);
        $("#mail1").append(mail);

      })
  </script>

Hope it will help.

Upvotes: 1

Mystical
Mystical

Reputation: 2783

If you are trying to transfer data from one page to another then you should use jQuery ajax instead of $.load. Either the$.get function or the $.ajax function. You should google it for more info about AJAX (Asynchronous JavaScript and XML).

Hope this helps :)

Upvotes: 0

Related Questions