Add dynamic fields in woocommerce - forms

Question

I try to add an input on the woocommerce billing-form., i want to use Ajax to render it dynamique.
It goes something like this :
One select input with for example :
choice 1
choice 2
Ie, when selecting "choice 1" another list with radio-boxes appear with choices in correlation with previous menu.
The function works perfectly without wordpress but when we add it on WP, it doesn't work. The function is duplicated and is not working properly
I added it to wp in function.php using require_once();
Can you help us to do this.
Thanks a lot
Le Conseil Informatique

Answer 1

my function work with like this (form_livraison.php):
<script type='text/javascript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('horaires').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST",'http://XX/ajax_livraison.php',true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id du site
sel = document.getElementById('site');
idsite = sel.options[sel.selectedIndex].value;
xhr.send("idSite="+idsite);
}
</script>
<label>Lieux du retrait :</label>
<select name='site' id='site' onchange='go()'>
<option value='-1'>Aucun</option>
<?php
$bdd = new PDO('mysql:host=XX', 'XX', 'XX'); //Connexion à la base
$req = $bdd->query('SELECT * FROM site ORDER BY ville');//Récupération des informations
while($row = $req->fetch()){
echo "<option value='".$row["id"]."'>".$row["ville"]."</option>";
}
?>
</select>
<div id='horaires'>
Horaires :<br/>
</div>
this one call this page (ajax_livraison.php)
<?php
setlocale (LC_TIME, 'fr_FR.utf8','fra'); //Mise en français de la date
echo "Horaires : <br/> Nous sommes le ".(strftime("%A %d %B"))."<br/>"; //Affichage de la date
$num_jour = date("N"); //Récupération du numéro du jour (Lundi 1 -> Dimanche 7)
if(isset($_POST["idSite"])){ //si un élément est sélectionné...
$bdd = new PDO('mysql:host=XX', 'XX', 'XX'); //Connexion à la base
//mysql_select_db("test");
//$res = mysql_query("SELECT * FROM horaires WHERE idSite=".$_POST["idSite"]); //Récupération des informations
$req = $bdd->prepare('SELECT * FROM horaires WHERE idSite = ?');
$req->execute(array($_POST['idSite']));
$resultfinal = array(); //Création d'un tableau
while($row = $req->fetch()){ //Boucle tant qu'il y a des résultats
$inter_jour = $num_jour - $row['id_jour']; //Calcul de l'intervalle entre le jour J et le jour de livraison
if ($inter_jour>=0){ //Si intervalle de livraison supérieur ou égale à 0
$compte_jour = date('d')+(7-$inter_jour); //Calcul jour livraison
}
else{
$compte_jour = date('d')-$inter_jour; //Sinon idem avant
}
$date_livraison = strftime("%A %d %B",mktime(0,0,0,date('m'),$compte_jour,date('Y'))); //Récupération de la date de livraison suite au calcul
$num_livraison = strftime("%d", mktime(0,0,0,date('m'),$compte_jour,date('Y'))); //Récupération numéro livraison suite au calcul
if((($num_jour+1) == $row["id_jour"]) && $row['idSite']==1){ //Si livraison = J+1 et site de livraison == Massy
$write = "<input type='radio' name='heures' id='".$row["id"]."' value='".$row["id"]."' checked><label for='".$row["id"]."'> ".$date_livraison." 16h00 - 20h00</label><br/>";
}
else{
$write = "<input type='radio' name='heures' id='".$row["id"]."' value='".$row["id"]."'><label for='".$row["id"]."'> ".$date_livraison." ".$row["am"]." ".$row["pm"]."</label><br/>";
}
$resultfinal[$num_livraison] = $write; //Ajout de la ligne en fin de tableau
}
ksort($resultfinal); //Trie du tableau par la clé
foreach ($resultfinal as $key => $value) { //Pour chaque ligne du tableau...
echo $value; //afficher le contenu
}
}
?>
so in function.php of wordpress i call it with require_once(form_livraison.php);
add_action( 'woocommerce_checkout_fields' , 'custom_store_pickup_field');
function custom_store_pickup_field($fields) {
require_once("form_livraison.php");
}
I hope you understand my function ^^
thanks for help