sandsquid Posted September 17, 2007 Share Posted September 17, 2007 I have a script that is connecting to mysql, runs the query diplays the results via html option tag, then eventually it will be submitted to the db for storage. However, I can't seem to figure out how to give my user the option to repeat the process using a radiobutton,checkbox whatever. So for example User: choose service user: choose country user: choose state Ask user; would you like to add another? y/n (just repeat the same query as above) you slected yes user: choose: service user: choose: country user: choose: state another? y/n etc <html> <head> <title>Where you lived</title> <SCRIPT language=JavaScript> function reload(form) { var val=form.service.options[form.service.options.selectedIndex].value; self.location='thisscript.php?service=' + val ; } function reload3(form) { var val=form.service.options[form.service.options.selectedIndex].value; var val2=form.country.options[form.country.options.selectedIndex].value; self.location='thisscript.php?service=' + val + '&country=' + val2; } </script> </head> <body> <table border=0> <? my db connect code here: $quer2=mysql_query("SELECT DISTINCT service FROM mydb"); $cat=$HTTP_GET_VARS['service']; if(isset($cat) and strlen($cat) > 0){ $quer=mysql_query("SELECT DISTINCT country FROM mydb WHERE service = '$service'"); }else{$quer=mysql_query("SELECT DISTINCT country FROM mydb WHERE service = '$service'"); } $cat3=$HTTP_GET_VARS['country']; if(isset($ca3) and strlen($cat3) > 0){ $quer3=mysql_query("SELECT DISTINCT state FROM mydb WHERE service = '$service' AND country = '$country' ORDER BY state"); }else{$quer3=mysql_query("SELECT DISTINCT state,city FROM mydb WHERE service = '$service' AND country = '$country' ORDER BY state"); } echo "<form method=post name=f1 action=''>"; echo "<tr><td>Please select a service:</td><td><select name='service' onchange=\"reload(this.form)\"><option value=''>Select one</option>"; while($noticia2 = mysql_fetch_array($quer2)) { if($noticia2['service']==@$cat){echo "<option selected value='$noticia2[service]'>$noticia2[service]</option>"."<BR>";} else{echo "<option value='$noticia2[service]'>$noticia2[service]</option>";} } echo "</select></td></tr><tr><td colspan=2></td></tr>"; if($service != "None"){ echo "<tr><td>Please selet a country:</td><td><select name='country' onchange=\"reload3(this.form)\"><option value=''>Select one</option>"; while($noticia = mysql_fetch_array($quer)) { if($noticia['country']==@$cat3){echo "<option selected value='$noticia[country]'>$noticia[country]</option>"."<BR>";} else{echo "<option value='$noticia[country]'>$noticia[country] </option>";} } echo "</select></td></tr><tr><td colspan=2></td></tr>"; }else{ echo "<p>Your all done! Thanks"; exit; } echo "<tr><td>Please select a state:</td><td><select name='state' ><option value=''>Select one</option>"; while($noticia1 = mysql_fetch_array($quer3)) { echo "<option value='$noticia1[state]'>$noticia1[state] $noticia1[city]</option>"; } echo "</select></td></tr><tr><td colspan=2></td></tr>"; echo "</form>"; ?> Quote Link to comment https://forums.phpfreaks.com/topic/69669-how-to-addrepeat/ Share on other sites More sharing options...
Psycho Posted September 17, 2007 Share Posted September 17, 2007 Are you wanting them to do this on one page? If so, you want to use Javascript. If not, then I think you want to have two submit buttons "Save" and "Save & Add Another". Then the processing page can determine which one was entere. If the Add nother option was selected then the processing page would redirect back to that page when complete. Quote Link to comment https://forums.phpfreaks.com/topic/69669-how-to-addrepeat/#findComment-350057 Share on other sites More sharing options...
sandsquid Posted September 17, 2007 Author Share Posted September 17, 2007 Are you wanting them to do this on one page? If so, you want to use Javascript. If not, then I think you want to have two submit buttons "Save" and "Save & Add Another". Then the processing page can determine which one was entere. If the Add nother option was selected then the processing page would redirect back to that page when complete. I would like to do it all on one page, so the user doesn't lose interest etc. I do have more questions to ask the user, however, these are the important ones for their bio, the other question ones will not be from a database. Quote Link to comment https://forums.phpfreaks.com/topic/69669-how-to-addrepeat/#findComment-350063 Share on other sites More sharing options...
Psycho Posted September 17, 2007 Share Posted September 17, 2007 This could definitely use some cleaning and tweaking, but it should get you on the right track <html> <body> <script type="text/javascript"> function addService () { serviceListObj = document.getElementById('serviceList'); var newID = 'service' + (serviceListObj.childNodes.length + 1); var newElement = document.createElement('<div id="'+newID+'"></div>'); document.all.serviceList.appendChild(newElement); document.getElementById(newID).innerHTML = serviceListObj.childNodes[0].innerHTML; } </script> <body id="myBody"> <div id="serviceList"> <div id="service1"> Service: <select name="service[]"> <option value="s1">Service 1</option> <option value="s2">Service 2</option> </select><br> Country: <select name="country[]"> <option value="c1">Country 1</option> <option value="c2">Country 2</option> </select><br> State: <select name="service[]"> <option value="s1">State 1</option> <option value="s2">State 2</option> </select> <br><br> </div> </div> <button onclick="addService();">Add Service</button> </body> </html> Personally I would go with a grid style if you think users will be adding many records. Quote Link to comment https://forums.phpfreaks.com/topic/69669-how-to-addrepeat/#findComment-350190 Share on other sites More sharing options...
sandsquid Posted September 18, 2007 Author Share Posted September 18, 2007 thanks for your help mjdamato! although this wasn't really what I was looking for exactly, I was able to make it so that I now have a add another, however, I am unsure how to get my php script to repeat the query's etc with out simply doing a copy and paste of all the code. Since there may be multipal "adds" I don't believe that would even work. I have an example on my site of the format, just have to be able to find out how to execute the php once the onclick button has been clicked. http://www.sandsquid.com/newserved2.php or the code <?php my dbconnect info here connecttodb($servername,$dbname,$dbusername,$dbpassword); function connecttodb($servername,$dbname,$dbuser,$dbpassword) { global $link; $link=mysql_connect ("$servername","$dbuser","$dbpassword"); if(!$link){die("Could not connect to MySQL");} mysql_select_db("$dbname",$link) or die ("could not open db".mysql_error()); } ?> <!doctype html public "-//w3c//dtd html 3.2//en"> <html> <head> <title>Where you lived</title> <SCRIPT language=JavaScript> function reload(form) { var val=form.service.options[form.service.options.selectedIndex].value; self.location='thisscript.php?service=' + val ; } function reload3(form) { var val=form.service.options[form.service.options.selectedIndex].value; var val2=form.country.options[form.country.options.selectedIndex].value; self.location='thisscript.php?service=' + val + '&country=' + val2; } </script> <script languaga="javascript"> <!-- function addEvent() { var ni = document.getElementById('myDiv'); var numi = document.getElementById('theValue'); var num = (document.getElementById("theValue").value -1)+ 2; numi.value = num; var divIdName = "my"+num+"Div"; var newdiv = document.createElement('div'); newdiv.setAttribute("id",divIdName); newdiv.innerHTML = "Location "+num+" has been added! <input type=button name=rm value=\"Remove This Location \" onclick=\"removeEven t(\'"+divIdName+"\')\">"; ni.appendChild(newdiv); } function removeEvent(divNum) { var d = document.getElementById('myDiv'); var olddiv = document.getElementById(divNum); d.removeChild(olddiv); } //--> </script> </head> <body> <table border=0> <? $quer2=mysql_query("SELECT DISTINCT service FROM mydb"); $cat=$HTTP_GET_VARS['service']; // This line is added to take care if your global variable is off if(isset($cat) and strlen($cat) > 0){ $quer=mysql_query("SELECT DISTINCT country FROM mydb WHERE service = '$service'"); }else{$quer=mysql_query("SELECT DISTINCT country FROM mydb WHERE service = '$service'"); } $cat3=$HTTP_GET_VARS['country']; // This line is added to take care if your global variable is off if(isset($ca3) and strlen($cat3) > 0){ $quer3=mysql_query("SELECT DISTINCT state FROM mydb WHERE service = '$service' AND country = '$country' ORDER BY state"); }else{$quer3=mysql_query("SELECT DISTINCT state,city FROM mydb WHERE service = '$service' AND country = '$country' ORDER BY state"); } echo "<form method=post name=f1 action=''>"; echo "<tr><td>Please select a service:</td><td><select name='service' onchange=\"reload(this.form)\"><option value=''>Select one</op tion>"; while($noticia2 = mysql_fetch_array($quer2)) { if($noticia2['service']==@$cat){echo "<option selected value='$noticia2[service]'>$noticia2[service]</option>"."<BR>";} else{echo "<option value='$noticia2[service]'>$noticia2[service]</option>";} } echo "</select></td></tr><tr><td colspan=2></td></tr>"; if($service != "None"){ echo "<tr><td>Please selet a country:</td><td><select name='country' onchange=\"reload3(this.form)\"><option value=''>Select one</op tion>"; while($noticia = mysql_fetch_array($quer)) { if($noticia['country']==@$cat3){echo "<option selected value='$noticia[country]'>$noticia[country]</option>"."<BR>";} else{echo "<option value='$noticia[country]'>$noticia[country] </option>";} } echo "</select></td></tr><tr><td colspan=2></td></tr>"; }else{ echo "<p>Your all done! Thanks"; exit; } echo "<tr><td>Please select a command:</td><td><select name='state' ><option value=''>Select one</option>"; while($noticia1 = mysql_fetch_array($quer3)) { echo "<option value='$noticia1[state]'>$noticia1[state] $noticia1[city]</option>"; } echo "</select></td></tr><tr><td colspan=2></td></tr>"; ?> </table> <input type="hidden" value="0" id="theValue" /> <p><input type=button name=addsomething value='Add another location' onclick="addEvent();"></p> <div id="myDiv"> </div> </form> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/69669-how-to-addrepeat/#findComment-350425 Share on other sites More sharing options...
Psycho Posted September 18, 2007 Share Posted September 18, 2007 I'm not sure I follow you when you state that "I am unsure how to get my php script to repeat the query's etc". If you are wanting to do this in your script then you would have to submit and refresh the page every time the user selects Add or Remove. You already stated that you did not want to do that. To do it without having to submit the page your only option is to use JavaScript. But, you have two options with that 1) Use only JavaScript or 2) Use JavaScript with PHP (AJAX). But, you already have the list options available within the browser so, what would be the purpose of using an AJAX request to do a new query to return back the same lists? Plus, you would still have to perform the same functions to create the new option group. So, there is no reason to re-query the server. Option #1 is the logical choice. Quote Link to comment https://forums.phpfreaks.com/topic/69669-how-to-addrepeat/#findComment-350589 Share on other sites More sharing options...
Psycho Posted September 18, 2007 Share Posted September 18, 2007 Ok, looking at your code a little closer I see you are reloading the page when the user changes a select list and sends the values on the query string. That is going to be very difficult to manage if you want to have several service lists. You need to handle those either with AJAX or completely within the javascript on the page. Not knowing what that functionality is doing, I'm not sure which path would make sense. You could have two submit buttons with something like "Save" and "Save and Add Another". Also, take a look at this rewrite: <!doctype html public "-//w3c//dtd html 3.2//en"> <html> <head> <title>Where you served - MyDutyStation.com</title> <SCRIPT language=JavaScript> function reload(form) { //var val=form.service.options[form.service.options.selectedIndex].value; //self.location='newserved2.php?service=' + val ; } function reload3(form) { //var val=form.service.options[form.service.options.selectedIndex].value; //var val2=form.country.options[form.country.options.selectedIndex].value; //self.location='newserved2.php?service=' + val + '&country=' + val2; } </script> <script languaga="javascript"> <!-- var serviceListTemplate; function createTemplateServiceList() { serviceListTemplate = document.getElementById('serviceList1').innerHTML; } function addEvent() { serviceListsDiv = document.getElementById('serviceLists'); var newListNum = (serviceListsDiv.childNodes.length + 1); var newListDivID = 'service' + newListNum; newListObj = document.createElement('<div id="'+newListDivID+'"></div>'); serviceListsDiv.appendChild(newListObj) var newListHTML = '<div>Service ' + newListNum + ':</div>'; newListHTML += '<div id="serviceList' + newListNum + '">' + serviceListTemplate + '</div>'; document.getElementById(newListDivID).innerHTML = newListHTML; document.getElementById('removeBTTN').style.display = ''; } function removeEvent(divNum) { serviceListsDiv = document.getElementById('serviceLists'); lastChild = serviceListsDiv.childNodes.length-1; serviceListsDiv.removeChild(serviceListsDiv.childNodes[lastChild]); if (serviceListsDiv.childNodes.length==1) { document.getElementById('removeBTTN').style.display = 'none'; } } //--> </script> </head> <body onload="createTemplateServiceList();"> <form method=post name=f1 action=''> <div id="serviceLists"> <div id="service1"> <div>Service 1:</div> <div id="serviceList1"> <table border="1"> <tr> <td>Please select a service:</td> <td><select name="service[]" onchange="reload(this.form)"> <option value=''>Select one</option> <option selected value='Army'>Army</option> <option value='Navy'>Navy</option> <option value='Air Force'>Air Force</option> <option value='Marine Corps'>Marine Corps</option> <option value='Coast Guard'>Coast Guard</option> <option value='None'>None</option></select> </td> </tr> <tr> <td>Please selet a country:</td> <td> <select name="country[]" onchange="reload3(this.form)"> <option value=''>Select one</option> <option value='United States'>United States</option> <option value='Belgium'>Belgium </option> <option value='Germany'>Germany </option> <option value='Italy'>Italy </option> <option value='Japan'>Japan </option> <option value='Korea'>Korea </option> <option value='Netherlands'>Netherlands </option> </select> </td> </tr> <tr> <td>Please select a command:</td> <td> <select name="command_name[]" > <option value=''>Select one</option> </select> </td> </tr> </table><br> </div> </div> </div> <div id=myDiv style="border-color:#006699; border-width:thin; border-style:solid; width: 100%"><input type=hidden value=0 id=theValue /> </div> <input type=button name=addsomething value='Add another duty station' onclick="addEvent('');"> <input type=button name=addsomething value='Remove duty station' onclick="removeEvent('');" id ="removeBTTN" style="display:none;"> </form> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/69669-how-to-addrepeat/#findComment-350626 Share on other sites More sharing options...
Psycho Posted September 18, 2007 Share Posted September 18, 2007 And here's an example using columnar format, just because I found this interesting: <html> <head><script> // Last updated 2006-02-21 function addRowToTable() { var tbl = document.getElementById('tblSample'); var lastRow = tbl.rows.length; // if there's no header row in the table, then iteration = lastRow + 1 var iteration = lastRow; var row = tbl.insertRow(lastRow); //Title var cellLeft = row.insertCell(0); var textNode = document.createTextNode('Service '+iteration+':'); cellLeft.appendChild(textNode); //Service var serviceCell = row.insertCell(1); serviceCell.appendChild(tbl.rows[1].cells[1].cloneNode(true)); //Country var countryCell = row.insertCell(2); countryCell.appendChild(tbl.rows[1].cells[2].cloneNode(true)); //Command var commandCell = row.insertCell(3); commandCell.appendChild(tbl.rows[1].cells[3].cloneNode(true)); } function removeRowFromTable() { var tbl = document.getElementById('tblSample'); var lastRow = tbl.rows.length; if (lastRow > 2) tbl.deleteRow(lastRow - 1); } </script> </head> <body> <form action="tableaddrow_nw.html" method="get"> <table border="1" id="tblSample"> <tr> <td> </td><td>Service</td><td>Country</td><td>Command</td> </tr> <tr> <td>Service 1:</td> <td> <select name="service[]"> <option value=''>Select one</option> <option selected value='Army'>Army1</option> <option value='Navy'>Navy</option> <option value='Air Force'>Air Force</option> <option value='Marine Corps'>Marine Corps</option> <option value='Coast Guard'>Coast Guard</option> <option value='None'>None</option></select> </td> <td> <select name="country[]" onchange="reload3(this.form)"> <option value=''>Select one</option> <option value='United States'>United States</option> <option value='Belgium'>Belgium </option> <option value='Germany'>Germany </option> <option value='Italy'>Italy </option> <option value='Japan'>Japan </option> <option value='Korea'>Korea </option> <option value='Netherlands'>Netherlands </option> </select> </td> <td> <select name="command_name[]" > <option value=''>Select one</option> </select> </td> </tr> </table> <input type="button" value="Add" onclick="addRowToTable();" /> <input type="button" value="Remove" onclick="removeRowFromTable();" /> </form> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/69669-how-to-addrepeat/#findComment-350659 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.