locodude0001 Posted October 1, 2013 Share Posted October 1, 2013 I'm new to PHP entirely and I've spent the past 3 days trying to figure this out. Basically, I'm just trying to make a text area say "Howdy" after you press a button. Once I can figure this out, I'm sure I could do the rest of what I want to do. My php file is called clothingvar.php and only has echo "Howdy!" in it. My HTML is mostly copy/pasted from a tutorial in the header ... <html> <head> <script language="Javascript"> function clothing(form) { clothingname = form.order.options[form.order.selectedIndex].text; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=clothing() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("recap").value=xmlhttp.responseText; } } xmlhttp.open("GET","clothingvar.php?q="+clothingname,true); xmlhttp.send(); } </script> </head> <body> <textarea id="recap" rows="10" readonly><br /> <form><select name="order" id="selection"> <option>Shirt <option>Shoes <option>Pants </select><br /> <td colspan=2><button onClick="clothing(this.form)">Select</button></form> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/282611-setting-text-area-to-equal-value/ Share on other sites More sharing options...
Ch0cu3r Posted October 1, 2013 Share Posted October 1, 2013 (edited) First make sure your form has valid html <textarea id="recap" rows="10" readonly></textarea><br /> <form> <select name="order" id="selection"> <option>Shirt</option> <option>Shoes</option> <option>Pants</option> </select><br /> <input type="submit" value="Select"> </form> Then change the <form> tag to <form onsubmit="return clothing(this)"> Now add return false; after xmlhttp.send(); change xmlhttp.onreadystatechange = create() to xmlhttp.onreadystatechange = function() Edited October 1, 2013 by Ch0cu3r Quote Link to comment https://forums.phpfreaks.com/topic/282611-setting-text-area-to-equal-value/#findComment-1452079 Share on other sites More sharing options...
Psycho Posted October 1, 2013 Share Posted October 1, 2013 (edited) << Moving topic to AJAX forum >> 1. Your textarea tag is not properly formed. A textarea has an opening and a closing tag. <textarea>Context goes here</textarea>. I can't believe you don't see this as it completely corrupts the page. 2. The "onreadystatechange" action is recursively calling the clothing function or it is redefining the clothing function. Either way it is wrong. Either create a seaparate function for that process and call that function or don't name the function process. 3. The button is submitting the form (at least it is in FF). Not sure why since it is not a submit button. So even if everything else was working correctly, the value would only populate the textarea briefly until the form is submitted. Then the page would be recreated and the field would be empty again. You can put a "return false" after the function call in the onClick call to prevent this. 4. You should really be using something like JQuery for AJAX since it has been used by thousands across different Browsers and Versions. By creating your own you will need to test all those different configurations. <html> <head> <script language="Javascript"> function clothing(form) { clothingname = form.order.options[form.order.selectedIndex].text; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("recap").value = xmlhttp.responseText; } } xmlhttp.open("GET","clothingvar.php?q="+clothingname, true); xmlhttp.send(); return false; } </script> </head> <body> <textarea id="recap" rows="10" readonly></textarea><br /> <form><select name="order" id="selection"> <option>Shirt <option>Shoes <option>Pants </select><br /> <td colspan=2><button onClick="clothing(this.form);return false;">Select</button></form> </body> </html> Edited October 1, 2013 by Psycho Quote Link to comment https://forums.phpfreaks.com/topic/282611-setting-text-area-to-equal-value/#findComment-1452081 Share on other sites More sharing options...
locodude0001 Posted October 1, 2013 Author Share Posted October 1, 2013 << Moving topic to AJAX forum >> 1. Your textarea tag is not properly formed. A textarea has an opening and a closing tag. <textarea>Context goes here</textarea>. I can't believe you don't see this as it completely corrupts the page. 2. The "onreadystatechange" action is recursively calling the clothing function or it is redefining the clothing function. Either way it is wrong. Either create a seaparate function for that process and call that function or don't name the function process. 3. The button is submitting the form (at least it is in FF). Not sure why since it is not a submit button. So even if everything else was working correctly, the value would only populate the textarea briefly until the form is submitted. Then the page would be recreated and the field would be empty again. You can put a "return false" after the function call in the onClick call to prevent this. 4. You should really be using something like JQuery for AJAX since it has been used by thousands across different Browsers and Versions. By creating your own you will need to test all those different configurations. 1. Oh, sorry about that. Yeah, I didn't just directly copy/paste from my html file. Just the parts that related. Must have accidentally left out the </textarea> 2. That was probably me messing around with the copy/paste after awhile just to do it. I know I did that change some time late yesterday, so I didn't have it like that the entire time. It was originally function() 3. Thanks. I'm pretty new to HTML also, but I've at least worked with it for about 5 weeks in a class. 4. I started with trying to learn AJAX, but I saw that the same results could be done in PHP and tried doing that instead for whatever reason. I might look more into AJAX now, because I know someone else suggested it. First make sure your form has valid html <textarea id="recap" rows="10" readonly></textarea><br /> <form> <select name="order" id="selection"> <option>Shirt</option> <option>Shoes</option> <option>Pants</option> </select><br /> <input type="submit" value="Select"> </form> Then change the <form> tag to <form onsubmit="return clothing(this)"> Now add return false; after xmlhttp.send(); change xmlhttp.onreadystatechange = create() to xmlhttp.onreadystatechange = function() Thanks, it works now. Quote Link to comment https://forums.phpfreaks.com/topic/282611-setting-text-area-to-equal-value/#findComment-1452096 Share on other sites More sharing options...
Psycho Posted October 2, 2013 Share Posted October 2, 2013 (edited) 4. I started with trying to learn AJAX, but I saw that the same results could be done in PHP and tried doing that instead for whatever reason. I might look more into AJAX now, because I know someone else suggested it. Well, it's not entirely clear what you are trying to accomplish. If you want something to dynamically display in the browser with data from the server without a page refresh, then AJAX is what you want. But, your specific example seems to be an 'odd' implementation, so I assume you have something else in mind. Edited October 2, 2013 by Psycho Quote Link to comment https://forums.phpfreaks.com/topic/282611-setting-text-area-to-equal-value/#findComment-1452121 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.