javascript - Issue with obtaining input form for chat system -
currently having issues making chat system. it's been long day, brain has been half off when trying code this. in short, i'm trying make chat system using php , jquery framework javascript. after discovering solely using php wouldn't work, read use ajax prevent reloading page when trying send message (reloading page results in chat username being reset). i've written code, , i've tried obtaining value input form in main code, believe issue here. portion of code i'm affecting follows:
<!-- chat box --> <div class="content" style="width:700px;"> <div class="container" style="height:500px;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom:0px solid black;overflow-y:scroll;"> <script type="text/javascript"> var msgdisp = new xmlhttprequest(); msgdisp.open("get","chatlog/log.txt"); var lines = msgdisp.result.split('\n'); for(var line = 0; line < lines.length; line++) { document.write(line); } </script> </div> <form> <input name="chateroo" placeholder="chat" style="width:678px;height:8px;text-align:left;padding:10px;border-radius:0px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;border:1px solid grey;"/> </form> <script type="text/javascript"> var message = (username + ": "+document.getelementbyname("chateroo").value()); $.ajax({ url: "include/chatsvs.php", data: {chat: message}, type: 'post', success: alert('successfully sent message'); }); </script> </div> the variable 'username' created earlier on in code creating username php , echoing value javascript variable used later on. in case it's important, section set username.
<?php //setting username echo("<div id=\"inputmessage\" style=\"padding:10px;width:500px;background-color:white;position:relative;display:inline-block;margin-top:20px;\">"); if(isset($_post['name_input'])) { $chatname = $_post['name_input']; echo("<h2>chatting $chatname</h2>"); } else { echo("<h2>set username:</h2>"); } echo("<form method=\"post\">"); if(isset($chatname)) { echo("<input name=\"name_input\" id=\"nameipt\" type=\"text\" placeholder=\"change username\" style=\"text-align:left;background-color:#e3e3e3;color:black;border-radius:1px;\">"); } else { echo("<input name=\"name_input\" type=\"text\" placeholder=\"set username\" style=\"text-align:left;background-color:#e3e3e3;color:black;border-radius:1px;\">"); } echo("</form></div>"); if(isset($chatname)) { echo("<script type=\"text/javascript\"> var nameset = true; var username = $chatname; </script>"); } ?> i have external php file logs message text file read container, else should fix.
if can me this, appreciate it. keep in mind i'm computer science student. lot of technical vocabulary might go on head, extremely advanced code. i'm not bad, not expert.
i've learnt html, css, php, , understand fundamental basics of jquery.
thanks!
dont include jquery code in middle of html not coding practice.
<!-- chat box --> <div class="content" style="width:700px;"> <div class="container" style="height:500px;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom:0px solid black;overflow-y:scroll;"> </div> <form> <input name="chateroo" id="chateroo" placeholder="chat" style="width:678px;height:8px;text-align:left;padding:10px;border-radius:0px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;border:1px solid grey;"/> </form> </div> <!-- juery code--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> var msgdisp = new xmlhttprequest(); msgdisp.open("get","chatlog/log.txt"); var lines = msgdisp.result.split('\n'); for(var line = 0; line < lines.length; line++) { document.write(line); } var chatmsg=$("#chateroo").val(); var message = ("username" + ":"+ chatmsg); $.ajax({ url: "include/chatsvs.php", data: {chat: message}, type: 'post', success: alert('successfully sent message'); });
Comments
Post a Comment