1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Rep Power

    Update a form with Javascript

    Hi everyone,

    I need help with a project I am currently working on. I am supposed to create a website that allows me to update the books that I have read, and the books I have not read. For this purpose, I have set up two web pages containing each a form containing information about a given book. One form on one page updates the book I have read, while the other form on the other page, updates the book I have yet to read.

    So far, I have set up my function with JavaScript, but I am having trouble displaying the information I entered on the form on the webpage I have used as my script.

    The following is Html and JavaScript code that updates a book I have read. I have used the name of another Html file named "booksread.html" as the script I am sending the form information to.

    <!doctype html>
    <meta charset="utf-8">
    <title>Linda's Bookshelf</title>
    <link href="css/screen.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    function validateForm() {
    if (documents.forms[0].myTitle.value == "") {
    	alert("Please enter the book's title");
    	return false;
    } // end if
    if (documents.forms[0].myAuthor.value == "") {
    	alert("Please enter the name of the author");
    	return false;
    } // end if
    if (documents.forms[0].myInformation.value == "") {
    	alert("Please enter the publishing information");
    	return false;
    } // end if
    return true;
    } // end function validateForm
    // -->
    <div id="content">
    <div id="header">
    <h1>Linda's BookShelf</h1>
    <div id="navigation">
    <a href="index.html">My Homepage</a>
    <a href="bookorder.html">My Books</a>
    <div id="left-float">
    <a href="css/booksread.html"><h3>Books I'Ve Read</h3></a>
    <a href="css/bookstoread.html"><h3>Books To Read</h3></a>
    <div id="right-float">
    <h2>What Book Did I Read Today?</h2>
    <form name="contactForm" method="get" onSubmit="return validateForm();" 
        id="contactForm" action="booksread.html">
    <legend>Here It Is</legend>
    <div id="form">
    <label for ="myTitle">Title:</label>
    <input type="text" name="myTitle" id="myTitle" size="40" required>
    <label for="myAuthor">Author:</label>
    <input type="text" name="myAuthor" id="myAuthor" size="40" required>
    <label for="myDate">Published Date</label>
    <input type="date" id="myDate" size="40" required>
    <label for="myInformation">Publisher Information:</label>
    <input type="text" id="myInformation" size="40" required>
    <div id="form2">	
    <input type="submit" value="Submit" name="mySubmit" id="mySubmit" size="15" required>
    My question, is how to display the information I have sent on the 'booksread.html' webpage?

    I hope that someone can help me.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Rep Power
    You can do this with JavaScript, but Server-Side code would be the best way to go with this; especially if your intending on permanently updating the books you have/have not read... and to do this, you need get some form of database involved. Although, if you just want to temporarily update a form with data, from another form; you can get the query string from your first form's submission, to the next form and break it up and insert the query string variable's text into each specific input field.

IMN logo majestic logo threadwatch logo seochat tools logo