Calling PHP within Javascript

[Merdok]

Ok I know that JavaScript cannot execute php on the client side, however I've got a form which has a select input which I need to be able to connect to the database, pull out all product records and populate the select.

 

That part is easy, the problem i'm having is that I need to be able to have an 'add another' link which will duplicate the select x number of times and populate an array.

 

So far I've got this:

 

<script type="application/javascript">

function addAnother() { 

jQuery('#addprodbox').append('<select name="prodArray[]" id="prodArray[]">

                <?php

$prodlookup = "SELECT prodID, name FROM bolt_shop_prod";

$proddata = mysql_query($prodlookup) or die('Failed to return data: ' . mysql_error());

while($option = mysql_fetch_array($catdata)) {

  echo '<option value="' . $option['prodID']. '">' .$option['name'].'</option>';

  } ?>

    </select>');

}

</script>

 

However obviously this won't work as the php is inside the javascript... Is there a way to write it so that it will work?

 

[Merdok]

By the way I am using the jQuery library.

[RichardRotterdam]

You could use the clone function in jquery.

 

This is how i would do it.

 

1. create an select element with an id at the start.

2. then clone it after you cloned it remove the id attribute and inject it to your html

 

just a start up example

<script>
// wait for the dom to load
$(document).ready(function() {
// add event to hyperlink add 
$('#add_another').click(function(){
	var originalSelect=$('#my_select');
	var newSelect=originalSelect.clone();
	//script to remove the id and inject it into the html after this
});
});
</script>
<select id="my_select">
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
</select>
<a href=# id="add_another">add another</a>

[Merdok]

Thanks for the reply mate,

 

It didn't appear to work, here is what i've put:

 

In the header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script>
// wait for the dom to load
$(document).ready(function() {
   // add event to hyperlink add
   $('#addanother').click(function(){
      var originalSelect=$('#prodArray');
      var newSelect=originalSelect.clone();
      //script to remove the id and inject it into the html after this
   });
});
</script>

 

In the page:

   <select id="prodArray" name="prodArray[]">
                 <?php 
$prodlookup = "SELECT prodID, name FROM bolt_shop_prod";
$proddata = mysql_query($prodlookup) or die('Failed to return data: ' . mysql_error());
while($option = mysql_fetch_array($proddata)) {
  echo '<option value="' . $option['prodID']. '">' .$option['name'].'</option>';
  } ?>
    </select> <a href="#" id="addanother">add another</a>

 

In the Ghetto:

[Merdok]

I'm guessing I used it incorrectly but I don't really know anything about jQuery so I'm not sure what to do to correct it.

[Ken2k7]

Merdok, read what Dj Kat posted. The JavaScript (jQuery) he gave you is a start up example. It's not complete.

[Merdok]

I had a look at the clone function on jQuery but I don't really understand it... I tried to make a version using their description of it but it still didn't work.

[RichardRotterdam]

the clone function makes a duplicate from an element and its content.

let me give you an example.

 

if you have the following html

<div id="mydiv"><p>some text here</p></div>

 

you can make a copy using the clone like so

var mydivclone=$('#mydiv').clone();

 

the html of the div and it's content is now stored in the var mydivclone. similar to:

<script>
var mydivclone="<div id="mydiv"><p>some text here</p></div>";
<script>

however its more then just a string inside a var it's an object you can manipulate with ease without using string functions or regular expressions.

 

if you have firebug installed(which I highly recommend) you can use the console.log to see what's inside the var it like so

$(document).ready(function() {
    var mydivclone=$('#mydiv').clone();
    console.log(mydivclone);
});

you can also swap console.log for a simple alert but over time most will get annoyed with the alert sound and the fact that you need to click it away.

 

now back to your add select script.

 

try putting the select in a container like so(you will see why later on)

<div id="select_container">
    <select id="prodArray">
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
    </select>
</div>

You will need to know what the last select element is in this container because you want to add an x number of select elements

You can fetch last select element with the following:

var lastSelect=$("#select_container select:last");

 

now that you know what element is last inside this container you can use the jQuery function insertAfter to literally insert this cloned element after the lastSelect.

 

Hope that will help. Do note that you will still need to remove the id from the cloned element since an id needs to be unique.