dungareez Posted December 8, 2008 Share Posted December 8, 2008 Hi, I have been trying to dynamically change a form element from a select dropdown box to a simple input. The idea here is if the value is not in the options of the select box the user can press a "new" anchor and an onclick event will convert the select field into an input field. Everything works fine from a user perspective except the new input field is not posted with the rest of the form, playing I have been able to get it to generate no errors but the value is still not posted). I will post the code below, but first I will state the entire form has been generated by php in an ajax call. Also I am using the prototype serialize function to process the form via another ajax call. code: javascript function to replace the select inside the span function setOption(selectName, inputName) { $(selectName).innerHTML = "<input type=\"text\" name= 'inputName' id= 'inputName' />" ; } the call to the function: <a href='javascript:;' onclick ='setOption(\"titleSpan\", \"title\");')>new</a> this is the error firebug generates: document.getElementById("title") is null onclick(click clientX=535, clientY=495)XLyEUgvn...x8w%3D%3D (line 2) [break on this error] formSend("updateContactForm", "d...document.getElementById("title").value); Any help would be greatly appreciated. Thanks Quote Link to comment Share on other sites More sharing options...
Psycho Posted December 8, 2008 Share Posted December 8, 2008 I think you're taking an overly complex approach here. Just create BOTH the select field AND the text field. Then use DHTML to determine which one to display. The server side code would also need to check which value to use from the POST. The way you explain how you want it to work, the server-side code would just need to check if the text field has a value - if so use it - otherwise use the select field. One very good benefit of this approach would be for users that do not have JS enabled. They would see both fields. Then, if they need a custom value, they would enter it in. Here's one solution <html> <head> <script type="text/javascript"> function displayCustom(selID, fieldID) { selObj = document.getElementById(selID); fieldObj = document.getElementById(fieldID); if (selObj.selectedIndex==0) { fieldObj.disabled = false; document.getElementById(fieldID+'_span').style.visibility = ''; } else { fieldObj.disabled = true; document.getElementById(fieldID+'_span').style.visibility = 'hidden'; } return; } window.onload = function() { displayCustom('category', 'custom_cat'); } </script> </head> <body> Category: <select name="category" id="category" onchange="displayCustom(this.id, 'custom_cat');"> <option value="">Custom</option> <option value="1" selected="selected">Category A</option> <option value="2">Category B</option> <option value="3">Category C</option> </select> <br /> <span id="custom_cat_span">Custom Category: <input type="text" name="custom_cat" id="custom_cat"></span> </body> </html> Quote Link to comment Share on other sites More sharing options...
dungareez Posted December 9, 2008 Author Share Posted December 9, 2008 Thank you mjdamato, You are right in the sense that I tend to find complicated solutions to what are perceived as easy problems by people much more competent than myself with programming languages. I used a more simplistic form of your solution. I appreciate your time in writing the sample code, it definitely helped. As for my final solution it was was this.... <script> function showSpan(id) { selObj = document.getElementById(id); selObj.style.visibility = "visible"; return; } </script> //created in a php file for an ajax call $returnValue .= <span id='title_span' name='title_span'><select type='text' name='title' id='title' value='$title'>"; $options = createOptions('crmContacts', 'title', $title);//this creates options from DB $returnValue .= $options." </select></span> <a href='javascript:;' onclick ='showSpan(\"customTitle_span\");'>new</a> <span id='customTitle_span' name ='customTitle_span'><input type=\"text\" name= 'customTitle' id= 'customTitle' /></span>"; May be a bit ugly , but works like a charm now. Thanks again Quote Link to comment 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.