Quick question regarding passing html form input values to jquery

[mannyson]

I found this js countdown code. It works except for one little problem.  

var newdate = $('.new-date').val();

$(".countdown").countdown({
  date: "2 October 2015 03:00:00", 
  format: "on"
});

I would like to know how can I pass my "newdate" variable to the "date"? So instead of "2 October 2015 03:00:00"", I want to have "newdate". How do I input it inside that?

 

Here is the full code.

<script>
		(function (e) {
		  e.fn.countdown = function (t, n) {
		  function i() {
			eventDate = Date.parse(r.date) / 1e3;
			currentDate = Math.floor(e.now() / 1e3);
			if (eventDate <= currentDate) {
			  n.call(this);
			  clearInterval(interval)
			}
			seconds = eventDate - currentDate;
			days = Math.floor(seconds / 86400);
			seconds -= days * 60 * 60 * 24;
			hours = Math.floor(seconds / 3600);
			seconds -= hours * 60 * 60;
			minutes = Math.floor(seconds / 60);
			seconds -= minutes * 60;
			days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days");
			hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours");
			minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes");
			seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds");
			if (r["format"] == "on") {
			  days = String(days).length >= 2 ? days : "0" + days;
			  hours = String(hours).length >= 2 ? hours : "0" + hours;
			  minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
			  seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
			}
			if (!isNaN(eventDate)) {
			  thisEl.find(".days").text(days);
			  thisEl.find(".hours").text(hours);
			  thisEl.find(".minutes").text(minutes);
			  thisEl.find(".seconds").text(seconds)
			} else {
			  alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");
			  clearInterval(interval)
			}
		  }
		  var thisEl = e(this);
		  var r = {
			date: null,
			format: null
		  };
		  t && e.extend(r, t);
		  i();
		  interval = setInterval(i, 1e3)
		  }
		  })(jQuery);
		  $(document).ready(function () {
		  function e() {
			var e = new Date;
			e.setDate(e.getDate() + 60);
			dd = e.getDate();
			mm = e.getMonth() + 1;
			y = e.getFullYear();
			futureFormattedDate = mm + "/" + dd + "/" + y;
			return futureFormattedDate
		  }
		  var newdate = $('.new-date').val();
		  $(".countdown").countdown({
			date: "2 October 2015 03:00:00", 
			format: "on"
		  });
		});	
		</script>

[hansford]

Just add some option settings. You can set some defaults then override them by passing in the options when calling the function on the element.

<script type="text/javascript">

	(function ( $ ) {

    $.fn.countdown = function(options) {

            var settings = $.extend({
                date: 'October 2 2015',
                format: 'off'
            }, options);
        }
    }( jQuery ));
	
var newdate = "November 2, 2015";	
$(".countdown").countdown({date: newdate, format: 'on'});
</script>

[mannyson]

 

Just add some option settings. You can set some defaults then override them by passing in the options when calling the function on the element.

<script type="text/javascript">

	(function ( $ ) {

    $.fn.countdown = function(options) {

            var settings = $.extend({
                date: 'October 2 2015',
                format: 'off'
            }, options);
        }
    }( jQuery ));
	
var newdate = "November 2, 2015";	
$(".countdown").countdown({date: newdate, format: 'on'});
</script>

 

 

You're code is kind of confusing.  Can you insert it into the full code I have, along with the "$('.new-date').val()"? 

[hansford]

Here is you code with with the addition of options.

<script type="text/javascript">

(function(e) {

$.fn.countdown = function(t,n,options) {

        var settings = $.extend({
            date: 'October 2 2015',
            format: 'off',
        }, options);
//you can access any option using: settings.date, settings.format etc

//begin your code here
		  function i() {
				eventDate = Date.parse(r.date) / 1e3;
				currentDate = Math.floor(e.now() / 1e3);
				console.log(currentDate);
				if (eventDate <= currentDate) {
				  n.call(this);
				  clearInterval(interval)
				}
				seconds = eventDate - currentDate;
				days = Math.floor(seconds / 86400);
				seconds -= days * 60 * 60 * 24;
				hours = Math.floor(seconds / 3600);
				seconds -= hours * 60 * 60;
				minutes = Math.floor(seconds / 60);
				seconds -= minutes * 60;
				days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days");
				hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours");
				minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes");
				seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds");
				if (r["format"] == "on") {
				  days = String(days).length >= 2 ? days : "0" + days;
				  hours = String(hours).length >= 2 ? hours : "0" + hours;
				  minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
				  seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
				}
				if (!isNaN(eventDate)) {
				  thisEl.find(".days").text(days);
				  thisEl.find(".hours").text(hours);
				  thisEl.find(".minutes").text(minutes);
				  thisEl.find(".seconds").text(seconds)
				} else {
				  alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");
				  clearInterval(interval)
				}
			  }
			  var thisEl = e(this);
			  var r = {
				date: null,
				format: null
			  };
			  t && e.extend(r, t);
			  i();
			  interval = setInterval(i, 1e3);
	}

})( jQuery );

$(document).ready(function () {
	
	  function e() {
		var e = new Date;
		e.setDate(e.getDate() + 60);
		dd = e.getDate();
		mm = e.getMonth() + 1;
		y = e.getFullYear();
		futureFormattedDate = mm + "/" + dd + "/" + y;
		return futureFormattedDate;
	  }

	  var newdate = $('.new-date').val();
	  $(".countdown").countdown({date: newdate, format: "on"});
});

</script>

[mannyson]

 

Here is you code with with the addition of options.

<script type="text/javascript">

(function(e) {

$.fn.countdown = function(t,n,options) {

        var settings = $.extend({
            date: 'October 2 2015',
            format: 'off',
        }, options);
//you can access any option using: settings.date, settings.format etc

//begin your code here
		  function i() {
				eventDate = Date.parse(r.date) / 1e3;
				currentDate = Math.floor(e.now() / 1e3);
				console.log(currentDate);
				if (eventDate <= currentDate) {
				  n.call(this);
				  clearInterval(interval)
				}
				seconds = eventDate - currentDate;
				days = Math.floor(seconds / 86400);
				seconds -= days * 60 * 60 * 24;
				hours = Math.floor(seconds / 3600);
				seconds -= hours * 60 * 60;
				minutes = Math.floor(seconds / 60);
				seconds -= minutes * 60;
				days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days");
				hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours");
				minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes");
				seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds");
				if (r["format"] == "on") {
				  days = String(days).length >= 2 ? days : "0" + days;
				  hours = String(hours).length >= 2 ? hours : "0" + hours;
				  minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
				  seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
				}
				if (!isNaN(eventDate)) {
				  thisEl.find(".days").text(days);
				  thisEl.find(".hours").text(hours);
				  thisEl.find(".minutes").text(minutes);
				  thisEl.find(".seconds").text(seconds)
				} else {
				  alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");
				  clearInterval(interval)
				}
			  }
			  var thisEl = e(this);
			  var r = {
				date: null,
				format: null
			  };
			  t && e.extend(r, t);
			  i();
			  interval = setInterval(i, 1e3);
	}

})( jQuery );

$(document).ready(function () {
	
	  function e() {
		var e = new Date;
		e.setDate(e.getDate() + 60);
		dd = e.getDate();
		mm = e.getMonth() + 1;
		y = e.getFullYear();
		futureFormattedDate = mm + "/" + dd + "/" + y;
		return futureFormattedDate;
	  }

	  var newdate = $('.new-date').val();
	  $(".countdown").countdown({date: newdate, format: "on"});
});

</script>

 

 

I did try that exactly.  It gives me the alert error " alert("Invalid date. Example: 30 Tuesday 2013 15:50:00"); ". It's in the above function.  Even before it gave me this error when ever I tried to use an html input value variable for the newdate.

[hansford]

You need to change your code to actually use the date which was passed in.

eventDate = Date.parse(settings.date) / 1e3;