Develop Reference

enabling a button when checkbox is checked?

I have a scenario on my UI where I need to enable a text box and a button on checking a checkbox and disable both text box and the button when the checkbox is un-checked. Below is the screenshot of what I have:
Below is the code in my jsp:
<tr>
<td>
<stripes:checkbox name="locationselect" onclick="handleDisable(document.forms['dealerTransactionForm'].elements['locationselect'],document.forms['dealerTransactionForm'].elements['locationId'])"/>
<stripes:label for="locationId"/>
</td>
<td>
<stripes:text name="locationId" />
<fmt:message var="tooltip" key="/DealerTransactionReport.action.lookUpLocation"/>
<stripes:submit name="lookUpLocation" class="button" title="${tooltip}" style="width: auto"/>
</td>
</tr>
Below is the handleDisable function which I wrote:
function handleDisable(checkbox, item) {
if(checkbox.checked == true)
item.disabled = false;
else
item.disabled = true;
}
Currently I'm able to enable only the text box when the checkbox is checked, what change should i make so as to enable both the text box and the button?.

You need to pass in a third parameter to the function for your button. You are only passing in the checkbox and the text box.
HTML:
<stripes:checkbox name="locationselect" onclick="handleDisable(document.forms['dealerTransactionForm'].elements['locationselect'],document.forms['dealerTransactionForm'].elements['locationId'], document.forms['dealerTransactionForm'].elements['lookUpLocation'])"/>
JavaScript:
function handleDisable(checkbox, text, button)
{
if(checkbox.checked == true) {
text.disabled = false;
button.disabled = false;
}
else {
text.disabled = true;
button.disabled = true;
}
}
But that makes the html too busy, in my opinion. I would opt for something like this.
HTML:
<stripes:checkbox name="locationselect" onclick="handleDisable(this)"/>
JavaScript:
function handleDisable(checkbox)
{
var text = document.getElementsByName("locationId")[0]
var button = document.getElementsByName("lookupLocation")[0]
if(checkbox.checked == true) {
text.disabled = false;
button.disabled = false;
}
else {
text.disabled = true;
button.disabled = true;
}
}

Using jQuery you can do it like following.
$('name="locationselect"').change(function() {
$('name="locationId"').prop('disabled', !this.checked);
});
UPDATE: Since the jQuery tag is removed
<script>
function handleDisable(elm) {
document.getElementsByName('locationId')[0].disabled = !elm.checked;
document.getElementsByName('lookUpLocation')[0].disabled = !elm.checked;
}
</script>
<input type="checkbox" name="locationselect" onclick="handleDisable(this)" />
<input type="text" name="locationId" disabled>
<input type="submit" value="Submit" name="lookUpLocation" disabled>

How to Disable input text on form?

I want to disable and enable input text if action add input text enable And if action edit input text disable
thanks

You can achieve this using the jQuery function prop() :
Javscript
var value = $('input').val();
if (value == null) {
$("input").prop('disabled', false);
} else {
$("input").prop('disabled', true);
}
Here is a demo: JsFiddle

Since you have not provided any snippet, I tried to replicate it witll following codes.
HTML
<input type = "text" id ="demoI">
<input type = "button" value = "Add" id = "_add">
<input type = "button" value = "Edit" id = "_edit">
JS
window.onload=function(){
var _getInput=document.getElementById("demoI");
var _getAdd = document.getElementById("_add");
var _getEdit = document.getElementById("_edit");
_getAdd.addEventListener('click',function(event){
_getInput.disabled = true;
})
_getEdit.addEventListener('click',function(event){
_getInput.disabled = false;
})
}
Check this jsFiddle

You can do this in your view.
if( $this->uri->segment(3) == 'add' ) {
<input type="text" name="myfield" disabled />
} else {
<input type="text" name="myfield" />
}

Try this code:
you can do this with java script only, there is no need to use jQuery
window.onload = function(){
var fname = document.getElementById("fname").value;
if(fname == '')
{
document.getElementById("fname").disabled = false;
}
else
{
document.getElementById("fname").disabled = true;
}
}
First Name: <input type="text" name="fname" id="fname" >

Change button type to submit

I'm trying do something like this:
Initially, the user has button "Edit booking", but after clicking on it something activates and button becomes a submit button. When the user enters his info and clicks submit, this data goes to servlet.
It works partially, but the problem is that when the button changes, I don't have a moment when the user can enter their data.
Here is my current code:
<c:if test="${booking.status == 'Checking'}">
<form name="myForm" id="myForm">
<input type="button" value="Edit booking" id="editButton"
onclick="activate(); changeButton();">
</form>
<script>
function activate() {
var editButton = document.getElementById("editButton");
if (editButton.value == "Edit booking") {
document.getElementById("bookingDate").disabled = false;
document.getElementById("returnDate").disabled = false;
editButton.setAttribute('type','submit');
}
else {
document.getElementById(editButton).action = "/BookingUpdate";
document.getElementById("bookingDate").disabled = true;
document.getElementById("returnDate").disabled = true;
}
}
</script>
<script>
function changeButton() {
var editButton = document.getElementById("editButton");
if (editButton.value == "Edit booking") {
editButton.value = "Submit";
}
else {
editButton.value = "Edit booking";
editButton.setAttribute('type', 'button');
}
}
</script>
</c:if>

Actually, you can submit a form data by either using a submit button or calling a submit function document.getElementById("myForm").submit()directly in javascript code.
thus, you can try something like below:
<form name="myForm" id="myForm">
<input type="button" value="Edit booking" id="smartButton" onclick="doSomethingSmart();">
</form>
<script>
var smartButton = document.getElementById("smartButton");
var myForm = document.getElementById("myForm");
function doSomethingSmart() {
if(smartButton.value == "Edit booking") { // we gonna edit booking
document.getElementById("bookingDate").disabled = false;
document.getElementById("returnDate").disabled = false;
smartButton.value = "submit"; // let it in disguise as submit button
}
else { // we gonna submit
if( isUserInputValied() ) {
myForm.submit(); // submiiiiiiiiiiiiiiiiiit !
// restore everything as if nothing happened
document.getElementById("bookingDate").disabled = true;
document.getElementById("returnDate").disabled = true;
smartButton.value="Edit Booking";
}
else {
alert("please fill your form correctly!");
}
}
}
function isUserInputValid() {
// check whether the user input is valid
}
</script>

You need to prevent the default event if it's in edit mode so that it won't submit the form. You can always have your button type as submit no need to change it to button.
This should work:
var button = document.getElementById('editButton');
button.addEventListener('click', toggleButton);
function toggleButton(e){
var isEdit = button.value === 'Edit booking';
if(isEdit){
document.getElementById("bookingDate").disabled = false;
document.getElementById("returnDate").disabled = false;
button.value = 'Submit';
e.preventDefault();
}
}

Two Radio buttons, a textarea and a number box, how to check if textarea is filled when radio1 is Yes and/or 2 is no

Here are the radios and textarea etc.
if(mysql_num_rows($canview) > 0) { ?>
<!-- Questions on return send all this to database then to place where dept. heads can see it-->
<div id = "returnform" >
<form action="" method="post">
<h4>Are any of the item(s) missing?</h4>
Yes<input type ="radio" name ="missing" id = "missing1" value = "Yes" required>
No<input type ="radio" name ="missing" id = "missing2" value = "No" >
<div class = "lossnum">
<input type="number" name="lossnum" id = "lossnum" placeholder="0">
</div>
<h4>Was every item put back/plugged in correctly?</h4>
Yes<input type ="radio" name ="putback" id = "putback1" value = "Yes" required>
No<input type ="radio" name ="putback" id = "putback2" value = "No">
<div class = "returncomments">
<h4>what happened?</h4>
<textarea name="comments"></textarea>
</div>
</div>
<input name="item_id" type="hidden" value="<?php echo $item->get_id(); ?>" />
<h4>Are you sure you want to return these <?php echo $item->get_name(); ?>? </h4>
<input type="submit" id="submit" name="submit" value="Return" />
right now all i have to change this is this:
$(document).ready(function () {
$(".lossnum").hide();
$(".comments").hide();
$(".returncomments").hide();
$(".commentup").hide();
$("#missing1").click(function () {
$(".lossnum").show();
$(".comments").show();
$(".returncomments").show();
});
$("#missing2").click(function () {
$(".lossnum").hide();
if($('#putback2').is(':checked')){
$(".comments").show();
$(".returncomments").show();
}
else{
$(".comments").hide();
$(".returncomments").hide();
}
});
$("#putback2").click(function () {
$(".comments").show();
$(".returncomments").show();
});
$("#putback1").click(function () {
if($('#missing2').is(':checked')){
$(".comments").hide();
$(".returncomments").hide();
}
else{
$(".comments").show();
$(".returncomments").show();
}
});});
this makes it so the textarea opens if 1 is yes and/or 2 is no, the only problem is if you then change the radios to no1/yes2 (which should be the only way the textarea does not show) it stays there, how would i make it so that it only shows up when something other than yes for 1 and/or no for 2 is true, and if that is changed it goes away and if it is not true does not show up.
Next I would like to make is so that when either 1 = Yes or/and 2 = no , the textarea is required to be filled out
you can for the most part ignore lost num
here is a JSfiddle for it

var itemMissing = false
, itemPluggedIn = true;
function updateCommentsDisplay(itemMissing, itemPluggedIn) {
if(itemMissing || !itemPluggedIn) {
$('#comments').show();
} else {
$('#comments').hide();
}
}
$('#nb-of-missing-items-field').hide();
updateCommentsDisplay(itemMissing, itemPluggedIn);
$('#missing input[name="missing-items"]').on('change', function () {
if(this.value === 'Yes') {
$('#nb-of-missing-items-field').show();
itemMissing = true;
} else {
$('#nb-of-missing-items-field').hide();
itemMissing = false;
}
updateCommentsDisplay(itemMissing, itemPluggedIn);
});
$('#plugged-in input[name="plugged-in-items"]').on('change', function () {
if(this.value === 'Yes') {
itemPluggedIn = true;
} else {
itemPluggedIn = false;
}
updateCommentsDisplay(itemMissing, itemPluggedIn);
});
http://jsfiddle.net/L7et15du/7/
Is that what you want to achieve?

JavaScript Form Validation on submit

I have a simple form and am validating onchange and need a final validation onsubmit. I am displaying a message to the right of the inputbox on error. I'm trying to keep this at DOM 1 compatible.
HTML
<form id = "myForm" action = "" onsubmit = "return validateForm(this);">
<table class = "table-submit" border = "0">
<tr>
<td>
Username:
</td>
<td>
<input type = "text" id = "username"
size = "30" maxlength = "30"
onchange = "validateUsername(this, 'msgUsername')" />
</td>
<td id = "msgUsername">
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type = "password" id = "password"
size = "30" maxlength = "30"
onchange = "validatePassword(this, 'msgPassword')" />
</td>
<td id = "msgPassword">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear" />
</td>
</tr>
</table>
</form>
JavaScript
function validateUsername(myItem, myElement) {
var dom = document.getElementById(myElement);
if (myItem.value.length < 3) {
dom.innerHTML = " Username needs to be a minimum of 3 characters! ";
return false;
}
else {
dom.innerHTML = "";
return true;
}
}
function validatePassword(myItem, myElement) {
var dom = document.getElementById(myElement);
if (myItem.value.length < 5) {
dom.innerHTML = " Password needs to be a minimum of 5 characters! ";
return false;
}
else {
dom.innerHTML = "";
return true;
}
}
function validateForm (itm) {
// kind of stuck here...
}
As you may of noticed, I am a bit stuck on my validateForm() function.
The code validates on each inputbox onchange event.
Not sure what is the best way to go from here. I thought about doing an If for my both single input box validation, but I would need to send each parameters which is what i was trying to avoid by using this.
Would like some suggestions.

Separate concerns. Instead of having the validate functions not only validate but also report your painting your self into a corner. Instead have a validate function which only returns true/false and another that is your onChange event handler which calls the validate function and displays the error message if needed. Then your onSubmit handler can easily call the validation functions in an if/else block to allow or cancel the submit action.
function validateUsername(username) {
return username.length >= 3;
}
function validatePassword(password) {
return password.length >= 5;
}
function showErrorFn(divId, message) {
var div = document.getElementById(divId);
message = " " + message;
return function(message) {
div.innerHTML = message;
};
}
function makeChangeHandler(myItem, validationFn, errorFn) {
return function(e) {
if (validationFn(myItem.value)) {
return true;
} else {
errorFn();
return false;
}
};
}
function makeSubmitHandler(usernameEl, passwordEl) {
return function(e) {
if (validateUsername(usernameEl.value) && validatePassword(passwordEl.value)) {
return true;
} else {
e.preventDefault();
return false;
}
}
var usernameEl = document.getElementById("username");
var usernameErrorEl = document.getElementById("msgUsername");
usernameEl.addEventListener("change", makeChangeHandler(
usernameEl,
validateUsername,
showErrorFn("Username must be more then 3 characters")
);
var usernameEl = document.getElementById("password");
var usernameErrorEl = document.getElementById("msgPassword");
usernameEl.addEventListener("change", makeChangeHandler(
usernameEl,
validatePassword,
showErrorFn("Password must be more then 5 characters")
);
var formEl = document.getElementById("myForm");
formEl.addEventListener("submit", makeSubmitHandler(usernameEl, password));

You can try this...
function validateForm (itm) {
var flag = true;
flag = (validateUsername(itm.username, 'msgUsername') && flag);
flag = (validatePassword(itm.password, 'msgPassword') && flag);
return flag;
}