Добавить все значения в форму и отобразить в отключенном вводе

0

У меня есть форма, в которой есть различные суммы денег, которые необходимо записать. Поскольку есть различные элементы, я отобразил их в коде с использованием data-* в JavaScript, в данном случае data-money="100".

Как я могу использовать JavaScript для добавления всех выбранных сумм и отображения их в отключенном вводе? Это позже будет введено в базу данных.

Я действительно понятия не имею, как подойти к этому и как сложно это будет нужно, иначе я бы что-то пробовал. Вот почему я спрашиваю.

Требуется ли JS на странице? В HTML? Или я могу контролировать все из моего файла JQuery?

Пример кода:

<div class="form-group">
            <label for="inscriptionPaid" class="col-sm-2 control-label">Enrolment paid</label>
            <div class="col-sm-10">
              <label class="radio-inline">
              <input type="radio" name="inscriptionPaid" id="inscriptionPaid" data-money="800" value="yes" > Yes 
            </label>
            <label class="radio-inline">
              <input type="radio" name="inscriptionPaid" id="inscriptionPaid" data-money="0" value="no" checked> No 
            </label>
            </div>
          </div>
<div class="form-group">
            <label for="paidFor" class="col-sm-2 control-label">Paid for</label>
            <div class="col-sm-10">
              <select id="paidFor" class="form-control">
                <option value="0">Choose Option</option>
                <option data-money="3600">IELTS - $3,600</option>
                <option disabled role="separator">---------------</option>
                <option data-money="3600">General English weekdays - $3,600</option>
                <option data-money="2800">General English Saturdays - $2,800 </option>
            </select>
            </div>
          </div>

EDIT Мне удалось это сделать, однако он не распознает количество data-money, я попытался изменить часть $(this)each.(function() но я не могу заставить ее забрать информацию.

$('*[data-money]').change(function(){
var sum = 0;
$(this).each(function() {
    sum += Number($(this).val());
});
 $("#totalPaid").val(sum);
});
  • 0
    Нет необходимости в отключенном входе. Просто используйте DIV и стилизуйте его так, как вы хотите.
  • 1
    Вы хотите суммировать все значения данных-денег?
Показать ещё 3 комментария
Теги:
math

3 ответа

1
Лучший ответ

Просто поместите это в свой jQuery где-нибудь:

totalPrice = 0;
$("[data-money]:selected, [data-money]:checked").each(function() {
    totalPrice += Number($(this).attr("data-money"));
});

Идея состоит в том, чтобы все элементы имели атрибут data-money. Затем все, что вам нужно сделать, это перебрать их и добавить значения их атрибута data-money к некоторой переменной. Надеюсь, это то, что вы искали. (JSFiddle в случае, если вы этого хотите)

Поделиться
  • 0
    Я скопировал ваш JSFiddle и немного отредактировал его, но он делает в значительной степени то, что я хотел. Спасибо
  • 0
    @AdamBrown Нет проблем, рад, что смог помочь!
1

Итерации по всем деньгам и помещению вывода в метку, вот скрипка http://jsfiddle.net/3mLjR/.

var sum = 0;
$("[data-money]").each(function(e){
sum +=$(this).data("money");
});
console.log(sum)
$("#output").text(sum);
Поделиться
  • 0
    Это здорово, но он добавляет все значения data-money даже если они не выбраны. Нужно ли добавить некоторые функции click ?
1

вы имеете в виду somethink как что просто сделано с jquery

 var sum=0;
    $("option").each(function() {

        if(parseInt($(this).attr("data-money"))&&$(this).attr("selected"))  
        sum=sum+parseInt($(this).attr("data-money") )


    });
    $("#test").val(sum) //this is the disabled input element
Поделиться
  • 0
    Это отлично, но как их включить, только если они выбраны? Это включает в себя все из них.
  • 0
    посмотрите, что редактирование ответа только что изменило if, с помощью parseInt($(this).attr("data-money"))&&$(this).attr("selected")

Ещё вопросы

Сообщество Overcoder
Наверх
Меню