jQuery несколько слайдеров на одной форме

Question

У меня есть несколько слайдеров на моей странице: one. Для одного он работает нормально, но для нескольких слайдеров формы значения столбца php возвращают пустой.

До сих пор у меня есть:

JQuery:

$(function() { 
    $(".slider").slider({ 
     value:0, 
     min: -1, 
     max: 1, 
     step: 0.01, 
     slide: function(event, ui) { 
      $(".amount").val("$" + ui.value); 
     } 
    }); 
    $(".amount").val("$" + $(".slider").slider("value")); 
}); 

Мой HTML:

<div class="demo"> 
    <form action="next.php" method="post"> 
     <p> 
      <label class="amount">How strong is your relationship with this person?</label> 
      <input type="hidden" name="first_question" /> 
     </p> 
     <div class="slider"></div> 
     <br/> 
     <p> 
      <label class="amount">How would you feel asking this friend to loan you $100 or more?</label> 
      <input type="hidden" name="second_question" /> 
     </p> 
     <input type="submit" value="Submit" /> 
    </form> 
</div> 

Как правильно передать пост значения?

Answer 1

Вы должны добавить div для каждого ползунка вы хотите и дать ползунки атрибут, который связывает их с input - Это пример с помощью HTML в качестве отправной точки:

<div class="demo"> 
    <form id="myform" action="next.php" method="post"> 
     <p> 
      <label class="amount">How strong is your relationship with this person?</label> 
      <input type="hidden" name="first_question"/> 
     </p> 
     <div class="slider" id="first"></div> 
     <br/> 
     <p> 
      <label class="amount">How would you feel asking this friend to loan you $100 or more?</label> 
      <input type="hidden" name="second_question"/> 
     </p> 
     <div class="slider" id="second"></div> 
     <br/> 
     <input type="submit" value="Submit" /> 
    </form> 
</div> 

Затем используйте следующую инициализацию ползунки:

$(".slider").slider({ 
    step: 1, 
    min: 0, 
    max: 10, 
    value: 5, 
    slide: function(event, ui) { 
     $("input[name=" + $(this).attr("id") + "_question]").val(ui.value); 
    } 
}); 

важной частью здесь является установка значения - это г rabs атрибут id из слайдера div добавляет _question к нему, а затем находит input с соответствующим атрибутом name.

Working example here

Примечание: Вы не имеют значений по умолчанию, заданные на input с так что если пользователь должен был представить не получите ничего, представленный (как вы будете делать в моем примере)

Answer 2

Просто измените

$(".amount").val("$" + ui.value); 
     } 
    }); 
    $("input[type="hidden"]" ).val("$" + $(".slider").slider("value")); 

в

$("input['text']").val("$" + ui.value); 
     } 
    }); 
    $("input[type="hidden"]").val("$" + $(".slider").slider("value")); 

Проверьте это, изменив скрытые поля на текст.