javascript - text ouptut in form validation running out of the output message box -
i have form after submission displays result in box, when enter information (text) in text box (textarea) runs out of box in output. solution thought work, modify style of id="output" @ bottom of page width:450px, didn't work.... there other suggestions? here's link form
here's code
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta content="computer repair, laptop repair, wireless installation, printer installation, printer repair, system administration, website design, web administration, logo design, web application development, computer repair miami fl, web design miami fl, system administration miami fl" name="keywords"> <meta name="computer soloution small business , home users, miami, florida" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>contact us</title> <!-- bootstrap core css --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- font awesome --> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <!-- font mfizz --> <link rel="stylesheet" href="path/to/font-mfizz/font-mfizz.css"> <link rel="stylesheet" href="icons/flaticon.css"> <!-- debugging purposes. don't copy these 2 lines! --> <!--[if lt ie 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="../../assets/js/ie-emulation-modes-warning.js"></script> <!-- custome css style sheet --> <link href="carosel_style.css" rel="stylesheet"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- custom styles template --> <link href="carousel.css" rel="stylesheet"> <!-- google analytics code --> <script> (function(i,s,o,g,r,a,m){i['googleanalyticsobject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new date();a=s.createelement(o), m=s.getelementsbytagname(o)[0];a.async=1;a.src=g;m.parentnode.insertbefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'ua-61593038-1', 'auto'); ga('send', 'pageview'); //form validation , submition function validateform() { var fullname = document.forms['myform']['name'].value; var emailadd = document.forms['myform']['email'].value; var subject = document.forms['myform']['subject'].value; var message = document.forms['myform']['message'].value; var outputmsg = ""; var emailreg = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; //validating form fields if(fullname == null || fullname == "") { outputmsg += "name field can not empty!\n"; } if(emailadd == null || emailadd == "") { outputmsg += "email field can not empty!\n"; } //if email field not empty check valid email add if(emailadd != "" && !emailreg.test(emailadd)) { outputmsg += "enter valid email address!\n"; } if(message == null || message == "") { outputmsg += "text field can not empty!\n"; } if(outputmsg != "") { alert(outputmsg); return false; } //sending data fields php form var params = "name="+fullname+"&email="+emailadd+"&subject="+subject+"&message="+message; var xmlhttp; if (window.xmlhttprequest) {// code ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.open("post", "contact.php", true); xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded"); xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("output").innerhtml=xmlhttp.responsetext; } } xmlhttp.send(params); //change style of "ouput" id document.getelementbyid("output").style.border = "solid 1px #5a5a5a"; document.getelementbyid("output").style.padding = "10px"; document.getelementbyid("output").style.width = "450px"; } </script> </head> <!-- navbar ================================================== --> <body> <div class="navbar-wrapper"> <div class="container"> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img id="main-logo" src="img/title_logo1.png"> </a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="#"><a href="index.html">home</a></li> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li> <li><a target="_blank" href="http://pctechtips.org">blog</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">services <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="index.html#computer">comuter repair</a></li> <li><a href="index.html#system">system administration</a></li> <li><a href="index.html#webdesign">website design</a></li> </ul> </li> </ul> </div> </div> </nav> </div> </div> <!-- carousel ================================================== --> <div id="mycarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/computer-keyboard-closeup-header.jpg" alt="first slide"> <div class="container"> <div class="carousel-caption"> <h1>computer solutions home , small business.</h1> <p>professional support home office, , small bussiness. computer repair, printer repair, network suport, system administration, , web design</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">get quote</a></p> </div> </div> </div> </div> </div> <!-- /.carousel --> <!-- marketing messaging , featurettes ================================================== --> <!-- wrap rest of page in container center content. --> <div class="container marketing"> <div class="hero-unit" style="padding:20px 100px"> <h1>contact us</h1> <p>please send description of computer problems , in touch possible quote:</p> </div> <div class="row"> <div class="col-sm-6"> <div class="my-form"> <form class="form-horizontal" name="myform" > <div class="form-group"> <label for="inputemail3" class="col-sm-2 control-label">name:</label> <div class="col-sm-8"> <input type="name" name="name" class="form-control" id="inputemail3" placeholder="name"> </div> </div> <div class="form-group"> <label for="inputpassword3" class="col-sm-2 control-label">email:</label> <div class="col-sm-8"> <input type="email" name="email" class="form-control" id="inputpassword3" placeholder="email"> </div> </div> <div class="form-group"> <label for="inputpassword3" class="col-sm-2 control-label">subject:</label> <div class="col-sm-8"> <input type="text" name="subject" class="form-control" placeholder="subject"> </div> </div> <div class="form-group"> <label for="inputpassword3" class="col-sm-2 control-label">text:</label> <div class="col-sm-8"> <textarea name="message" class="form-control" rows="7" placeholder="text"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="button" class="btn btn-default" onclick="validateform()">send</button> </div> </div> </div> </form> </div> <div class="col-sm-6"> <img id="google-img" src="https://maps.googleapis.com/maps/api/staticmap?center=miami+downtown,miami,fl&zoom=13&size=500x350&maptype=roadmap&markers=color:red%7cmiami+downtown,miami,fl"> </div> </div><!-- /.row --> <div class="row"> <!-- output message rown --> <div class="col-sm-6" > <!-- display form result message here! --> <p id="output" > </p> </div> <div class="col-sm-6"> <!--nothing goes here!--> </div> </div> <!-- footer --> <footer> <p class="pull-right"><a href="#">back top</a></p> <p>© 2015 jorge l. vazquez ·<a href="#">privacy</a> · <a href="#">terms</a></p> </footer> </div> </div><!-- /.container --> <!-- bootstrap core javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="bootstrap/assets/js/docs.min.js"></script> <!-- ie10 viewport hack surface/desktop windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html>
the p element 'output' has content needs
#output{ word-wrap:break-word; } break-word allows words break , wrap next line
Comments
Post a Comment