Develop Reference

Javascript Function Date Range Modification

I want to make my input type loggerTxt in date('F Y'); but I can't modify this log(data.dateFrom). I want to ask if it is possible to change it since I am a newbie.
<div class="wrapper">
<h3>Range</h3>
<input type="text" id="daterange">
<input type="text" id="range-from">
<input type="text" id="range-to">
<input type="text" id="loggerTxt">
</div>
</div>
<script type="text/javascript" src="../dist/duDatepicker.js"></script>
<script type="text/javascript">
function log (message) {
document.querySelector('#loggerTxt').value = message
}
document.addEventListener("DOMContentLoaded", function() {
duDatepicker.defaults({ auto: true, theme: 'dark', format: 'mmmm d, yyyy' });
duDatepicker('#daterange', {
range: true, outFormat: 'yyyy-mm-dd', fromTarget: '#range-from', toTarget: '#range-to',
clearBtn: true, theme: 'blue',
events: {
dateChanged: function (data) {
console.log('new date', data)
log(data.dateFrom)
}
}
})
})
</script>

jQuery UI Dialog Buttons won't hide

Somehow this code doesn't work properly.
All Buttons are shown, only the "Generate" Button hides after the sucessful link generation. On the same site I have another dialog, implement the same way, which is working fine.
$("#guest-link-dialog").dialog({
autoOpen: false,
resizable: false,
height: 300,
width: 510,
modal: true,
draggable: false,
closeOnEscape: false,
open: function() {
$("#closeButton").hide();
},
buttons: [{
id: 'generateButton',
text: 'Generieren',
click: function() {
$('#generatedlink').html('<img src="<?php echo Yii::app()->request->baseUrl; ?>/images/icons/32x32/loading.gif" alt="loading" style="padding-left:215px;padding-top:40px;" />');
$.getJSON('<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=ajax/guestlink&fileid=' + $(this).data('fileid') + '&count=' + $('#inputcount').val())
.done(function(json) {
if (json.status == "SUCESS") {
$('#generatedlink').html('<a href="' + json.url + '" >' + json.url + '</a>');
$('#generateButton').hide();
$('#cancelButton').hide();
$('#closeButton').show();
} else if (json.status == "ERROR") {
$("#message").css('color', 'red');
}
$("#message").text(json.message);
})
.fail(function(json) {
$("#message").css('color', 'red');
$("#message").text('Fehler');
});
}
}, {
id: 'closeButton',
text: 'Schliessen',
click: function() {
$(this).dialog('close');
}
}, {
id: 'cancelButton',
text: 'Abbrechen',
click: function() {
$(this).dialog("close");
}
}],
close: function() {
$("#message").css('color', '');
$('#generatedlink').html('');
$('#generateButton').show();
$('#cancelButton').show();
$('#closeButton').hide();
}
});
Edit:
<div id="guest-link-dialog" title="Gast Link erstellen">
<form>
<fieldset style="border:1;">
<label for="count">Anzahl mögliche Downloads</label>
<input type="text" name="count" id="inputcount" class="text ui-widget-content ui-corner-all" size="1" value="1" maxlength="1" />
</fieldset>
</form>
<div id="generatedlink" style="width:100%"></div>
</div>

The problem was, the Button IDs were already used by the other Dialog.
Giving them other IDs solves the problem.

validations using jquery in codeigniter using xajax

The validation is mot working, please specify the answer.
there is no validations working, the form is submitting without validations,
I am using the xajax in codeigniter
this is my view or form
<form name="frmcontact" id="frmcontact" class="contact-form" action="">
<input type="text" name="name" id="name" placeholder="Name">
<input type="text" name="email" id="email" placeholder="E-mail">
<input type="text" name="mobile" id="mobile" placeholder="Mobile">
<textarea class="message1" placeholder="Message" name="message" id="message"></textarea>
<span class="error"> </span>
<input type="submit" value="Submit" >
</form>
and my javascript is
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.validate.js"></script>
<script type="text/javascript">
;(function($) {
$(document).ready(function() {
$("#frmcontact").submit(function(e){
e.preventDefault();
}).validate({
rules: {
name: {
required: true,
number:false
},
email: {
required: true,
email:true
},
mobile: {
required: true,
number:true,
minlength:10,
maxlength:10
},
message: {
required: true
}
},errorElement: "span",
messages: {
},
errorPlacement: function(error, element) {
error.insertAfter(element);
},
submitHandler: function(){
xajax_contactsubmit(xajax.getFormValues('frmcontact'));
}
});
});
})(jQuery);
</script>

try this
jQuery(document).ready(function($) {
$("#frmcontact").validate({
rules: {
name: {
required: true,
number:false
},
email: {
required: true,
email:true
},
mobile: {
required: true,
number:true,
minlength:10,
maxlength:10
},
message: {
required: true
}
},errorElement: "span",
messages: {
},
errorPlacement: function(error, element) {
error.insertAfter(element);
},
submitHandler: function(){
xajax_contactsubmit(xajax.getFormValues('frmcontact'));
}
});
});
no need to handle and stop submit, the validate plugin will manage it by it self

How to perform validation using jquery.validate?

I am trying to use jquery.validate to validate some fields in a jquery modal dialog. To practice I thought I would create a simple JSFiddle to make sure my syntax is correct. I'm missing something, hopefully someone can help.
Here is my simple form:
<form id="myform" method="post" action="#">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="submit" />
</form>
Here is my jquery:
$("#submitEdit").click(function (event) {
event.preventDefault();
Validate();
});
function Validate()
{
$("#frmEdit").validate({
rules: {
QtyOnHand: {
required: true
}
},
messages: {
QtyOnHand: {
required: 'Qty Required'
}
}
});
}

Working Fiddle Demo
Just keep
$("#frmEdit").validate({//this will validate you don't need call validate function
rules: {
QtyOnHand: {
required: true
}
},
messages: {
QtyOnHand: {
required: 'Qty Required'
}
}
});
Remove
$("#submitEdit").click(function (event) {
event.preventDefault();//stopping validation to occur
}
Problem Fiddle

<form id="myform" method="post" action="#">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="submit" />
</form>
JS:
$("#myForm").validate({
rules: {
field1: {
required: true
},
field2: {
required: true
}
},
messages: {
field1: {
required: 'field1 Required'
},
field2: {
required: 'field2 Required'
}
}
});
check
Fiddle

button into tooltip using qtip plugin doesn't work

I wrote this code below used qtip plugin for html link :
$(document).ready(function() {
$('#login').qtip({
content: '<table><tr><td>Username</td><td><INPUT type="text" value="" name="username" title="Enter Username" class="txtbx"/></td>' +
'<td>Password</td><td><INPUT type="password" value="" name="password" title="Enter password" class="txtbx"/></td>' +
'<td><button id="loginbtn" type="submit" >login</button></td></tr></table>',
show: { when: { event: 'click' },
effect: { type: 'fade', length: 200 }
},
hide: { when: { event: 'unfocus' },
effect: { type: 'fade', length: 430 }
},
position: {
adjust: { resize: true
},
corner: {
target: 'bottomLeft',
tooltip: 'topLeft'
}
},
style: {
name: 'dark',
width: { max: 700 }
}
});
});
but the submit button doesn't work !!!!??? any help here !!

Does replacing <button id="loginbtn" type="submit" >login</button> with
<input name="loginbtn" id="loginbtn" type="submit" value="login" />
work?
Also, I don't see a form element anywhere with an action or method attribute wrapping all of your form inputs. Hence, I don't think the browser knows what to do when you submit the form.