I have an input text that has to be something in it for the form to work.
So I wish to add some functionality to the
Confirm
$(function mainListeners () {
"use strict";
var confirm = $('#addNewConfirm');
var cancel = $('#addNewCancel');
var eventBox = $('#eventname_input');
console.log("RUNS!!");
confirm.onclick = function (e) {
if (eventBox.val() == ''){
//so if we have an empty event
//recolor borders.
console.log("CHANGES!!");
eventBox.css('border-color','#d81919');
}else {
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yesno IFlexible">
<button id="addNewConfirm" >Confirm</button>
<button id="addNewCancel">Cancel</button>
</div>
<div >
<label>Event:</label>
<input id="eventname_input" type="text" />
</div>
RUNS!!
CHANGES!!
eventBox.val() == ''
Use JQuery click()
function instead of onclick like so:
$(document).ready(function() {
var confirm = $("#addNewConfirm");
var cancel = $("#addNewCancel");
var eventBox = $("#eventname_input");
console.log("RUNS!!");
confirm.click(function(e) {
if (!eventBox.val()) {
console.log("CHANGES!!");
eventBox.css("border-color", "#d81919");
} else {
eventBox.css("border-color", 'inherit');
// whatever you want
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yesno IFlexible">
<button id="addNewConfirm">Confirm</button>
<button id="addNewCancel">Cancel</button>
</div>
<div>
<label>Event:</label>
<input id="eventname_input" type="text" />
</div>