dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript Dynamic Form Validation Help

  1. #1
    Join Date
    Jul 2011
    Posts
    2

    Red face Javascript Dynamic Form Validation Help

    Hi. I am need of assistance regarding dynamic form validation with Javascript. I am trying to create a quiz using Javascript. I have three questions with three radio button answer choices each. I have made it so that each question appears individually with their corresponding radio button answer choices at random times. I originally tried to make the radio buttons in the HTML code, but I was having a hard time trying to display one question at a time with their answer choices in a random order. Then, I was able to create these radio buttons in the Javascript Code, inserting it into a Switch statement. The case consists of random numbers 1 to 3. Each case shows a different question and its answer choices. I now need to validate these radio buttons to see if the user has submitted the form without selecting the answer, and then check to see if the answer they have chosen is the correct.

    I am new to programming, so can anyone please suggest what I should do?

  2. #2
    Join Date
    Jul 2011
    Posts
    2
    Here is a copy of my code. Right now, my main problem is being able to replace the Show Question Button with the random radio button answers. I also need to make the radio buttons on the main page disappear, because they are already used in a different place.

    <!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=utf-8" />
    <title>Abbasid Muslims</title>


    <script type="text/javascript">
    function textValidation()
    {

    if ( !document.studentInfo.studentName.value )
    {
    alert("Please type in your NAME");
    document.forms.studentInfo.studentName.focus();
    return false;
    }
    if ( !document.studentInfo.studentEmail.value )
    {
    alert("Please type in your WEBB EMAIL ADDRESS");
    document.forms.studentInfo.studentEmail.focus();
    return false;
    }
    }
    </script>
    <script type="text/javascript">

    function answerValidation()
    {
    var question1 = document.forms.quiz1.elements.answer1;
    for ( i=0;i<question1.length;i++)
    {
    if (question[i].checked)
    {
    return true;
    }
    }
    else
    {
    alert("Please choose an answer");
    return false;
    }
    }
    </script>
    <script type="text/javascript">
    function quizQuestion1()
    {
    var answer1 = document.getElementById("answerQuiz1").innerHTML;
    document.write("<b><i><big>" + "The library has one main book on the Abbasid Muslims. What chapter is focused on the Abbasid Court Culture?" + "</big></i></b>");
    document.write(answer1);
    document.write(submit);
    }
    function quizQuestion2()
    {
    var answer2 = document.getElementById("answerQuiz2").innerHTML;
    document.write("<b><i><big>" + "Where did the Abbasid capital move after it left Baghdad?" + "</big></i></b>");
    document.write(answer2);
    }
    function quizQuestion3()
    {
    var answer3 = document.getElementById("answerQuiz3").innerHTML;
    document.write("<b><i><big>" + "An Abbasid mechanical horseman that could raise and lower a lance was on top of the ______ Dome in Baghdad." + "</big></i></b>");
    document.write(answer3);
    }
    function showQuiz()
    {
    var random = Math.ceil(Math.random() * 3);
    switch (random)
    {
    case 1:
    document.getElementById("showAllQuestions").innerHTML=quizQuestion1();
    break;
    case 2:
    document.getElementById("showAllQuestions").innerHTML=quizQuestion2();
    break;
    default:
    document.getElementById("showAllQuestions").innerHTML=quizQuestion3();
    }
    }

    </script>
    </head>


    <body>
    <!--Heading of Web page//-->
    <div id="AbbasidMuslims" style="width:1225px;height:600px;background-color:#FFCC33">
    <h1 style="text-align:center;font-size:24px;color:navy;">The Abbasid Muslims</h1>



    <!--Student information box: student name and webb email address//-->
    <div id="studentinfo">
    <fieldset>
    <legend>Student Information</legend>
    <form name="studentInfo">
    Student Name<input type="text" name="studentName"/><br/>
    Student Webb Email<input type="text" name="studentEmail"/><br/>
    </form>
    </fieldset>
    </div>

    <div id="showAllQuestions">
    <form name="all_questions" >
    <input type="button" value="Show Question" onfocus="textValidation()" onclick="showQuiz()"/>
    </form>
    </div>

    <br /><br /><br /><br /><br /><br /><br />

    <div id="answerQuiz1">
    <form name="quiz1">
    <input type="radio" name="answer1" value="a" />a) Nine<br/>
    <input type="radio" name="answer1" value="b" />b) Six<br/>
    <input type="radio" name="answer1" value="c" />c) Eight<br/>
    </form>
    </div>

    <br/>

    <div id="answerQuiz2">
    <form name="quiz2">
    <input type="radio" name="answer2" value="a" />a) Damascus<br/>
    <input type="radio" name="answer2" value="b" />b) Samarra<br/>
    <input type="radio" name="answer2" value="c" />c) Trick Question. The Abbasid never left Baghdad.<br/>
    </form>
    </div>

    <br/>

    <div id="answerQuiz3">
    <form name="quiz3">
    <input type="radio" name="answer3" value="a" />a) Bronze<br/>
    <input type="radio" name="answer3" value="b" />b) Green<br/>
    <input type="radio" name="answer3" value="c" />c) Rock<br/>
    </form>
    </div>


    </div>
    </body>

    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles