Comment stocker la valeur attr dans un formulaire

Question

Je souhaite soumettre ma valeur attr à un champ de saisie afin que je puisse soumettre les valeurs à la base de données lorsque le bouton Soumettre est cliqué.

Jquery Code

//active image setting 
    $('#allimg li:first').addClass('activeimg'); 
    //code for like and next image 
    $('.clickme').on('click', function() { 
     var tagname = $('.activeimg img').attr('name'); 
    $('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg'); 

    if (tagname) { 
    var result = $('#resultdiv'); 
    var text = result.text().trim(); 
    if (text) { 
     text += ','; 
    } 
    result.text(text + tagname); 
    } 
    }); 

    //code for next image only 

    $('.nextme').on('click', function() { 
     $('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg'); 
    }); 

code css

.menu_card ul { 
    list-style-type: none; 
} 
.menu_card ul li img{ 
    width: 200px; 
    height: 300px; 
} 
.menu_card ul li{ 
    list-style-type: none; 
    position: absolute; 
    display: none; 
} 
.menu_card ul li.activeimg{ 
    list-style-type: none; 
    position: absolute; 
    display: block; 
} 

code html

<form method="post" action=""> 
     <div class="row"> 
     <div class="col-12"> 
      <div class="menu_card"> 
      <ul id="allimg"> 
       <li><img name="one" src="imges/img1.jpg"></li> 
       <li><img name="two" src="imges/img2.jpg"></li> 
        <li><img name="three" src="imges/img3.jpg"></li> 
       <li><img name="four" src="imges/img4.jpg"></li> 
       <li><img name="five" src="imges/img5.jpg"></li> 
      </ul> 
      </div> 
     </div> 
     </div> 
     <div class="row"> 
      <!--- button/next button--> 
      <div class="col-1" style="margin-top: 350px;color:red"> 
       <div class="pull-right nextme"> 
        <i class="fa fa-thumbs-o-down fa-3x"></i> <br/> 
        Unike 
       </div> 
      </div> 
      <!---Like button/next button (one button for all image)--> 
      <div class="col-2" style="margin-top:350px;color:green"> 
       <div class="pull-right clickme"> 
        <i class="fa fa-thumbs-o-up fa-3x"></i> <br/> 
        Like 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
     <div class="col-12 text-center" id="resultdiv"> 
      <input type="hidden" value=""> 
     </div> 
     </div> 

     <br/> 
     <input type="submit" class="btn btn-success"> 
     </form> 

Dans ce code, je peux voir la valeurs attr Lorsque le bouton J'aime est cliqué, je veux que ces valeurs soient stockées dans le champ de saisie de sorte que lorsque je clique sur le bouton submit, il doit stocker les valeurs attr dans la base de données.

S'il vous plaît aidez-moi.

Answer 1

J'ai apporté quelques modifications à votre code. Si tu veux ça.

//active image setting 
 
var vals = ''; 
 
    $('#allimg li:first').addClass('activeimg'); 
 
    //code for like and next image 
 
    $('.clickme').on('click', function() { 
 
     var tagname = $('.activeimg img').attr('name'); 
 
    $('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg'); 
 

 
    if (tagname) { 
 
    vals += tagname+','; 
 
    $('.vals').val(vals); 
 
    
 
    // var result = $('#resultdiv'); 
 
    // var text = result.text().trim(); 
 
    //if (text) { 
 
    // text += ','; 
 
    //} 
 
    // result.text(text + tagname); 
 
    } 
 
    }); 
 

 
    //code for next image only 
 

 
    $('.nextme').on('click', function() { 
 
     $('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg'); 
 
    }); 
 
    $('.submitBTN').on('click', function() { 
 
     
 
     alert(vals); 
 
    });

.menu_card ul { 
 
    list-style-type: none; 
 
} 
 
.menu_card ul li img{ 
 
    width: 200px; 
 
    height: 300px; 
 
} 
 
.menu_card ul li{ 
 
    list-style-type: none; 
 
    position: absolute; 
 
    display: none; 
 
} 
 
.menu_card ul li.activeimg{ 
 
    list-style-type: none; 
 
    position: absolute; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" action=""> 
 
     <div class="row"> 
 
     <div class="col-12"> 
 
      <div class="menu_card"> 
 
      <ul id="allimg"> 
 
       <li><img name="one" src="https://dummyimage.com/600x400/555/fff"></li> 
 
       <li><img name="two" src="https://dummyimage.com/600x400/000/fff"></li> 
 
        <li><img name="three" src="https://dummyimage.com/600x400/536/fff"></li> 
 
       <li><img name="four" src="https://dummyimage.com/600x400/698/fff"></li> 
 
       <li><img name="five" src="https://dummyimage.com/600x400/742/fff"></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
      <!--- button/next button--> 
 
      <div class="col-1" style="margin-top: 350px;color:red"> 
 
       <div class="pull-right nextme"> 
 
        <i class="fa fa-thumbs-o-down fa-3x"></i> <br/> 
 
        Unike 
 
       </div> 
 
      </div> 
 
      <!---Like button/next button (one button for all image)--> 
 
      <div class="col-2" style="margin-top:350px;color:green"> 
 
       <div class="pull-right clickme"> 
 
        <i class="fa fa-thumbs-o-up fa-3x"></i> <br/> 
 
        Like 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-12 text-center" id="resultdiv"> 
 
       
 
     </div> 
 
     <input type="hidden" class="vals" value=''> 
 
     </div> 
 

 
     <br/> 
 
     <input type="submit" class="btn btn-success submitBTN"> 
 
     </form>

Answer 2

Ajouter un Id à l'entrée cachée <input id="data" type="hidden" value="">

Modifier cette

<script> 
if (tagname) { 
       var result = $('#data'); 
       var text = result.val(); 
       if (text) { 
         text += ','; 
        } 
       result.attr('value',text + tagname); 
</script>