Javascript/jQuery: how to get data value from another class

问题

The issue is when I add more than 1 product in the Cart Page I want to get all product titles and quantities like this example: 1st Product Title, 3 - 2nd Product Title, 1 - ... but when I try with the code I'm sharing with you bellow I get only data of the first product but for other products I don't get any data, so I want to get class2 data because this class collect data of all products in the cart page (title + quantity of each product), hope I've explained it clearly

Form code:

<label class="title-form">Shipping Information</label>
<form class="form" id="form" target="_self" onsubmit="return postToGoogle();" action="" autocomplete="off">

<div class="data-form" style="">

<div class="field mb-2">
    <input placeholder="Name" id="nameField" name="entry.638007929" type="text" required>
</div>

<div class="field mb-2">
    <input placeholder="Phone" id="mobField" name="entry.1319098236" type="text" required>
</div>

<div class="field mb-2">
    <input placeholder="Address" id="addressField" name="entry.1908756447" type="text" required>
</div>

{% for line_item in cart.items %}
  <input type="hidden" name="entry.992799284" class="class1" value="{{line_item.product.title}}, {{line_item.quantity}} -">
  <span class="class2">{{line_item.product.title}}, {{line_item.quantity}} - </span>
{% endfor %}

</div>

<button class="button_get order_button btn btn-pink js_submit button__text orderButton" id="send" type="submit">
Confirm
</button>

</form>

Javascript code:

<script type="text/javascript">
function postToGoogle() {
var field1 = $("#nameField").val();
var field2 = $("#mobField").val();
var field3 = $("#addressField").val();
var field4 = $(".class1").val();

if(field1 == ""){
alert('');
document.getElementById("nameField").focus();
return false;
}
if(field2 == ""){
alert('');
document.getElementById("mobField").focus();
return false;
}
if(field3 == ""){
alert('');
document.getElementById("addressField").focus();
return false;
}
if(field4 == ""){
alert('');
document.getElementByClassName("class1").focus();
return false;
}

$.ajax({
url: "https://docs.google.com/forms/d/XXXXXXXXXX/formResponse?",
data: {"entry.638007929": field1, "entry.1319098236": field2, "entry.1908756447": field3, "entry.992799284": field4},
type: "POST",
dataType: "xml",
success: function(d){}
});

return false;
}

</script>

Thank you for any suggestions to make this function working!

回答1:

You can get data of all class2 span using jquery .each(), and with push save into array.

var arr=[];
$(".class2").each(function(){
 arr.push($(this).html());
});

console.log(arr); // log all the title
$(".class1").val(arr); // this will add all the class2 span data into hidden field

Now variable arr hold all class2 span content, and you can bind it to class1 hidden field.

回答2:

Not sure exactly what you mean, but this takes the text from class2 and inserts it as the value for the previous element (class1)

$.each($(".class2"), function() {
	$(this).prev(".class1").val($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" name="entry.992799284" class="class1" value="">
<span class="class2">3rd Product Title, 1 - </span>

<input type="hidden" name="entry.992799284" class="class1" value="">
<span class="class2">2nd Product Title, 1 - </span>

<input type="hidden" name="entry.992799284" class="class1" value="">
<span class="class2">1st Product Title, 1 - </span>

来源：https://stackoverflow.com/questions/62009705/javascript-jquery-how-to-get-data-value-from-another-class