Jump to content

how to add/repeat

sandsquid

By sandsquid
in PHP Coding Help

 Share

Recommended Posts

sandsquid Newbie

sandsquid

Posted
Posted

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>";
?>

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

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.

Link to comment
Share on other sites
sandsquid Newbie

sandsquid

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

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.

Link to comment
Share on other sites
sandsquid Newbie

sandsquid

Posted
  • Author
Posted

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>

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

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.

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

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>

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

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>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.