Je travaille sur un formulaire (voici le violon ) qui est conçu via html / php.
Les extraits du code html / php appartenant au formulaire sont:
Title (EN): Good Morning. Title (FR): Bonjour Description (EN): Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Description (FR): Dans la bibliothèque des composants se trouvent le composant Texte modèle qui vous pouvez faire glisser sur le plan de dessin. Program: ABC (ID#6)
Dans le code ci-dessus et dans le fiddle , il y a le bouton Insérer ABC sur la 1ère ligne. En cliquant sur ce bouton, le formulaire doit automatiquement prendre les données génériques comme suit:
echo '<table class="table table-striped"><thead class="thead-dark"><tr><th scope="col"><a class="btn btn-primary" style="float:right;" role="button">Insert ABC</a></th></tr></thead><tbody><tr><td width="*" valign="top">';
echo '<form action="add.php" id="myform" method="post">'; // Form START
echo '<input name="wdate" type="hidden" id="wdate" value="'.$this_date.'">';
echo '<div class="form-row">';
// Titles
echo '<div class="form-group col-md-6"><label for="title_en">Title (EN)</label><input name="title_en" type="text" id="title_en" value="" class="form-control"></div>';
echo '<div class="form-group col-md-6"><label for="title_fr">Title (FR)</label><input name="title_fr" type="text" id="title_fr" value="" class="form-control"></div>';
echo '</div>';
echo '<div class="form-row">';
// Descriptions
echo '<div class="form-group col-md-6"><label for="description_en">Description (EN)</label><textarea rows="3" name="description_en" id="description_en" class="form-control"></textarea></div>';
echo '<div class="form-group col-md-6"><label for="description_fr">Description (FR)</label><textarea rows="3" name="description_fr" id="description_fr" class="form-control"></textarea></div>';
echo '</div>';
echo '<div class="form-row">';
// Program
echo '<div class="form-group col-md-6"><label for="program_id">Program</label><select class="form-control" id="program_id" name="program_id">';
$programs_list = programList();
foreach($programs_list as $prog){
echo '<option value="'.$prog['program_id'].'">'.$prog['title_en'].' (ID#'.$prog['program_id'].')</option>';
}
echo '</select></div>';
echo '</div>';
echo '<div class="form-row">';
// Time selection
date_default_timezone_set('America/Toronto');
$time = date('H:i');
echo '<div class="form-group col-md-3 bootstrap-timepicker timepicker"><label for="air_date">Air Date (24 hr)</label><input id="air_date" name="air_date" type="text" class="form-control input-small" value="'.$time.'"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>';
?>
'
'
'
'
'
echo '</form>' // Form END
Énoncé du problème:
Je me demande quels changements je devrais apporter dans le code php ci-dessus afin qu'en appuyant sur le bouton Insérer ABC, les valeurs suivantes soient remplies.
5 Réponses :
Vous devez utiliser JavaScript pour cela.
Ajoutez un «onClick» au bouton qui appelle une fonction. Dans la fonction, définissez la valeur de ces entrées.
Ça à l'air bon. Il semble qu'il échoue sur jsfiddle à cause d'une erreur jquery, je ne sais pas pourquoi mais cela semble être un problème jsfiddle. Voici le code dans un Codepen: codepen.io/anon/pen/YgYevX?editors= 1010 La seule modification que j'ai apportée a été de modifier votre bouton pour utiliser un élément "button" au lieu d'un "a" (et supprimé "role = 'button'")
J'ai encore une question < / a>. Ce n'est pas pareil. Je me demande si vous pouvez y jeter un œil.
Si votre sortie provient de PHP, ajoutez simplement cette ligne supplémentaire dans une balise script . Comme ceci:
<a class="btn btn-primary ABC-Fill" style="float:right;" role="button">Insert ABC</a>
Aussi, donnez à votre bouton une classe spécifique pour travailler avec lui (Ex. Class = "ABC-Fill") comme ceci:
<script>
document.getElementsByClassName("ABC-Fill")[0].addEventListener("click",function(){
let yourForm = document.getElementById("myform");
yourForm.title_en.value = "Good morning.";
yourForm.title_fr.value = "Bonjour";
yourForm.description_en.value = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.";
yourForm.description_fr.value = "Dans la bibliothèque des composants se trouvent le composant Texte modèle qui vous pouvez faire glisser sur le plan de dessin.";
yourForm.program_id.value = 6;
});
</script>
Peut-être que vous pouvez générer les attributs data-x, puis remplir les valeurs d'entrée avec ces données
HTML:
function fill(){
$(".put-def").each(function(){
$(this).val($(this).data('default'));
});
}
JS, avec JQuery par exemple:
<form> First: <input data-default="First def" class="put-def" type="text"/> Second: <input data-default="Second def" class="put-def" type="text"/> </form> <button onClick="fill();"> Fill! </button>
J'aime l'idée de donner la valeur par défaut à chaque ligne dans un attribut de données, mais je recommande d'utiliser le même attribut de données pour le sélecteur jquery. Ma règle d'or est la suivante: les classes css servent à appliquer des styles, les identifiants et les attributs de données servent à appliquer des fonctionnalités ie $ ("[data-default]"). Each (...)
Peut-être: P Je ne suis pas très bon front-end publicitaire, donc c'est aussi un bon conseil pour moi.
Dans votre jsfiddle , vous avez utilisé document.getElementsByName et il renvoie NodeList [] pas l'élément. Vous devrez peut-être utiliser document.getElementById pour faire fonctionner ce code.
function myFunction() {
document.getElementById("title_en").value="Good Morning";
document.getElementById("title_fr").value="Bonjour";
document.getElementById("description_en").value="Bonjour";
document.getElementById("description_fr").value="Bonjour";
document.getElementById("program_id").value="6";
}
Vérifiez mon violon mis à jour dans la réponse d'Alan P.. J'ai envoyé ça il y a 25 minutes.
Ok, j'ai vu le violon. En théorie , cela devrait fonctionner. Le problème est que JS Fiddle encapsule le code js dans une portée où votre formulaire ne peut pas le trouver.
Si vous ouvrez la console, vous verrez le message "function myFunction does not exist". Et si vous voyez comment JS Fiddle a rendu votre code, vous verrez que la function myFunction () est à l'intérieur d'une autre fonction, ce qui ne la place PAS dans la portée globale, inaccessible à tout élément html. P >
Si vous voulez une recommandation, je changerais un peu le html. comme ceci:
Supprimez le onclick = "myFunction ()" du html et ajoutez à la place un identifiant à ce bouton
$(document).on("click", "#btn-to-apply-defaults", function () {
// here go the contents of the original myFunction()
});
Restructurez la fonction pour qu'elle ressemble à ceci:
document.getElementById("btn-to-apply-defaults").addEventHandler("click", function () {
// here go the contents of the original myFunction()
});
C'est ce que certains appelleraient js "discret", ce qui signifie que le js n'est pas lié aux éléments directement dans le html lui-même, à la place, vous liez l'événement par la suite.
Si cela ne fonctionne toujours pas, c'est parce que le bouton peut ne pas encore exister dans le DOM lorsque vous exécutez le code getElementById >. En effet, JS Fiddle insère le script au-dessus du html. Vous avez deux options:
<button id="btn-to-apply-defaults">...
L'événement est lié au document lui-même, qui est sûr d'exister à ce stade, mais uniquement déclenché lorsque le "currentTarget" est # btn-to-apply-defaults