如何在JavaScript中的单个警报消息中显示表单值

Question

This is my Form Validation it was working perfect and what my problem is i need to display the form values within a single alert message so please provide a suggestion for me 这是我的表单验证，它工作正常，我的问题是我需要在单个警报消息中显示表单值，所以请给我一个建议

<!DOCTYPE html>
<html>
    <head>
        <title>1.Form ValidationM</title>
        <link rel="stylesheet" href="css/form.css">
    </head>
    <body>
    <div class="Wrapper">
        <header>
            <h1 class="logo">Header</h1>

            <nav class="navdesktop">
                <ul class="menu-item">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Category</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div class="RegHead"><h1>Registration Form</h1></div>

        <div class="Form-Wrapper">
        <div class="Divstyle">
        <!--<h1>Form Validation</h1>-->
            <form name="myForm" onsubmit="return myFunction()">
               <label>FirstName:</label><input type="text" class="TagColor" name="fname"/><br><span class="Required"></span><br>
                <label>LastName:</label><input type="text" class="TagColor" name="lname"/><br><span class="Required"></span><br>
                <label>Phone No:</label><input type="text" class="TagColor" name="phno"/><br><span class="Required"></span><br>
                <label>Email-Id :</label><input type="email" class="TagColor" name="email"/><br><span class="Required"></span><br>




                <label>Gender: </label><br>
                <label>Male:</label><input type="radio" name="gender" value="male"/>
                <label>Female:</label><input type="radio" name="gender" value="female"/><br><span id="WrongMsg"></span><br><br>

                <label>Please choose Yes or No option for Select Country:</label><br>
                <label>Yes</label><input type="radio" name="option" id="YesOp" onclick="DropRad()"> 
                <label>No</label><input type="radio" name="option" id="NoOp" onclick="DropRad()"><br><br>

                <div id="Pass">
                <label>Select Country</label>
                <select id="mySelect">
                    <option value="0">Select Country</option>
                    <option value="1">INDIA</option>
                    <option value="2">PAKISTAN</option>
                    <option value="3">AUSTRALLIA</option>
                    <option value="4">AMERICA</option>
                </select><br><br><span id="DropRequired"></span><br>
                </div>

                <label>Language: </label><br>
                <label>Tamil:</label><input type="checkbox" name="check" value="Tamil"><br><br>
                <label>English:</label><input type="checkbox" name="check" value="English"><br><br>
                <label>Telugu:</label><input type="checkbox" name="check" value="Telugu"><br><br>
                <label>Kannada:</label><input type="checkbox" name="check" value="Kannada"><br><br>
                <label>Malayalam:</label><input type="checkbox" name="check" value="Malayalam"><br><span id="ErrorMsg"></span><br><br>

                <input type="submit" value="submit" name="submit">
       </form>
        </div>
        </div>
    </div>

    <script>
    document.getElementById("Pass").style.display = 'none';


    function myFunction()
    {
    var res = document.forms.myForm.length;
    flag = true;

  for (var i = 0; i < res; i++) 
  {
    if ((document.forms.myForm[i].className) == 'TagColor') 
    {
      var x = document.forms.myForm[i].value;
      if (x == "" || x == null) 
      {
        document.getElementsByClassName("Required")[i].innerHTML = "required";
        document.getElementsByClassName("Required")[i].style.color = "red";
        document.getElementsByClassName("TagColor")[i].style.border = "1px solid red";
        document.getElementsByClassName("TagColor")[i].style.background = "lightblue";

        flag=false;
      } 
      else
      {
        document.getElementsByClassName("Required")[i].innerHTML = "";
        document.getElementsByClassName("Required")[i].style.color = "white";
        document.getElementsByClassName("TagColor")[i].style.border = "1px solid black";
        document.getElementsByClassName("TagColor")[i].style.background = "white";

        var txt = document.getElementsByClassName("TagColor");
        var sad = " ";
        for(var j=0;j<txt.length;j++)
        {
                var dispp = txt[j].value;
                sad += " ," + dispp;
        }
        alert(sad);
      }
    }
  }

  var gen = document.getElementsByName("gender");
  for(var i=0;i<gen.length;i++)
  {
    if(gen[i].checked == false)
    {
        document.getElementById("WrongMsg").innerHTML = "required";
        document.getElementById("WrongMsg").style.color = "red";
        flag = false;
    }
    else
    {
        document.getElementById("WrongMsg").innerHTML = "";
        var disp = " ";
        var Radd = document.getElementsByName("gender");
        for(var i=0;i<Radd.length;i++)
        {
            if(Radd[i].checked)
            {
                disp = Radd[i].value;
                alert(disp);
                flag = true;
            }
        }
    }
  }



  var c = document.getElementsByName("check");
  for(var i=0;i<c.length;i++)
  {
    if(c[i].checked == false)
    {
        document.getElementById("ErrorMsg").innerHTML = "required";
        document.getElementById("ErrorMsg").style.color = "red";
        flag = false;
    }
    else
   {
    document.getElementById("ErrorMsg").innerHTML = "";
    var display = "";
    var chk = document.getElementsByName("check");
    for(var i=0;i<chk.length;i++)
    {
        if(chk[i].checked)
        {
            display += "," + chk[i].value;
        }
    }

    alert(display);

  }
  }

  return flag;

  }

    function DropRad()
    {
        var YesRadio = document.getElementById("YesOp");
        var NoRadio = document.getElementById("NoOp");
        Pass.style.display = YesOp.checked ? "block" : "none";

            var e = document.getElementById("mySelect");
            var optionSelIndex = e.options[e.selectedIndex].value;
            var optionSelectedText = e.options[e.selectedIndex].text;
            if (optionSelIndex == 0) 
            {
                document.getElementById("DropRequired").innerHTML = "Required";
                document.getElementById("DropRequired").style.color = "red";
            }
            else 
            {
                document.getElementById("DropRequired").innerHTML = "";
                document.getElementById("DropRequired").style.color = "white";
                alert("Your Country is: " + optionSelectedText);
            }
    }



    </script>
    </body>
</html>

Answer 1

<form onchange="serialize(this)">
<select name="status">
     <option value="*">All</option>
     <option value="1">Active</option>
     <option value="0">Inactive</option>
</select>
<select name="size">
      <option value="*">All</option>
      <option value="small">Small</option>
      <option value="big">Big</option>
</select>

check here 在这里检查

如何在JavaScript中的单个警报消息中显示表单值

问题描述

1 个解决方案

解决方案1
0 2016-07-15 07:02:02

如何在JavaScript中的单个警报消息中显示表单值

问题描述

1 个解决方案

解决方案1 0 2016-07-15 07:02:02

解决方案1
0 2016-07-15 07:02:02