pratteek shaurya pratteek shaurya -4 years ago 111
HTML Question

how to take value from input and pass it to a object of plugin used in jquery

I have used a plugin to make a percentage loader circle.
following is the js used after initializing that plugin:

$("#test-circle").circliful({
animation: 1,
animationStep: 5,
foregroundBorderWidth: 15,
backgroundBorderWidth: 15,
percent: 35,
textSize: 28,
textStyle: 'font-size: 12px;',
textColor: '#666',
multiPercentage: 1,
percentages: [10, 20, 30]
});


I want the user to change the value of percent. For this i have used:

$("#submit").click(function(){
var deg = ("#input").val();
var degree = deg;
});


Now I have the value from user , but i don't know how to pass it to plugin.
I am very new to jquery, and having a some trouble in doing this,

Answer Source

You can override some options of circliful in your click handler:

  var options = {  
    percent: 39
  };
  $("#test-circle").circliful(options);

  $('#submit').on('click', function() {
    var deg = $('#input').val();
    options.percent = deg;
    $("#test-circle").find('svg').remove();
    $("#test-circle").circliful(options);
  });

Example

P.S.: You are using the ID submit in you click handler, if this element is a submit button and you are submitting a form, you have to work around the reload triggered by the form submit. Either use e.prevenDefault in the click handler and submit the form e.g. via ajax or save the percentage and apply it after form submit. If this applies to you of course.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download