Reveal fields if needed - javascript

I'm trying to make a contact-form in php. You can find it here.
I try to make the textbox with datepicker invisible until the visitor checks the radiobutton "ja", only then it needs to be visible.
Here's the code for the form:
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div class="reveal-if-active">
<tr>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

you use $('input[type="radio"]').click(function(){}) to detect you input change see code snippet.
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
/* this is the function to handle you need */
$(function(){
$('input[type="radio"]').click(function(){
if ($('input[type="radio"]#ja').is(':checked'))
{
$(".reveal-if-active").show();
}
else if('input[type="radio"]#nee'){
$(".reveal-if-active").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div >
<!-- make the tr the element to hide and show -->
<tr class="reveal-if-active" style="display:none">
<td ><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

Firstly, your markup is kinda messed up:
You shouldn't mix div tags with tr, only tr tags should be present on the same 'level' of nesting in table tag
Secondly, answering you actual question - add click event listeners on the radiobuttons, so that when YES is clicked, you make visible your "reveal-if-active" row:
var inputToHide = document.getElementsByClassName("reveal-if-active")[0];
var jaInput = document.getElementById("ja");
var neeInput = document.getElementById("nee");
function makeInputVisibleAgain() {
inputToHide.style.display = "block";
}
function hideInput() {
inputToHide.style.display = "none";
}
jaInput.addEventListener("click", makeInputVisibleAgain);
neeInput.addEventListener("click", hideInput);
Thirdly - don't use several ids with same name, better change your id="nospacing" to class

It is possible that you want something like this? Notice that it's very easy to do it in very few lines of code. Since you're a beginner I'll explain:
$( ... ); is jQuery's way to say "when the page is totally loaded, start executing what's inside". In case you didn't know, without this the scripts would start executing any time and could cause errors, mainly because of not finding the elements you work with.
$('input[name="reservatie"]').change(function(){ ... });: the radio buttons have name "reservatie", so when they are changed it will execute the function inside change().
$('#reveal').prop('hidden', !$('#ja').prop('checked'));: I identified the row of the table where the datepicker was as "reveal", because, maybe I'm wrong, but putting one row of it inside of a div didn't let my code go well, so I believe that was just wrong. I deleted the div and used the row instead. So, its attribute hidden will be the opposite of the checked property of "ja", which means, if "ja" is checked, the datepicker won't be hidden, and if it's not, it will.
Hope it helps you.
$(function(){
$('input[name="reservatie"]').change(function(){
$('#reveal').prop('hidden', !$('#ja').prop('checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<tr id="reveal" hidden>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

Related

How to customize jAutoCalc plugin

I have a simple question regarding jAutoCalc, my question can be answered in two ways:
1> How to customize the jAutoCalc plugin so that we can make it able to be used for input array names instead of just names.
my code is here:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/c17r/jAutoCalc/master/jAutoCalc.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
function autoCalcSetup() {
$('form[name=cart]').jAutoCalc('destroy');
$('form[name=cart] tr[name=line_items]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=cart]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=line_items]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
</script>
</head>
<body>
<form name="cart">
<table name="cart">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th> </th>
<th>Item Total</th>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>More Stuff</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>And More Stuff</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
Tax:
<select name="tax">
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td> </td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Total</td>
<td> </td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button name="add">Add Row</button></td>
</tr>
</table>
</form>
</body>
</html>
since the names are same for dynamically generated input's i want use input array. The problem is that if i do so then I'm unable to use the plugin features!
2> The question can be answered in second way by providing methods to use plugin while using input arrays
I know its an old post but maybe others may have same issue.
Try to open jautocalc.js find this function "getFieldSelector(field)" and edit this code.
return ':input[name="' + field + '"]';
to
return ':input[name="' + field + '[]"]';
I think the whole problem is with javascript
the javascript should be like
$(document).ready(function(){
$('.item_total').keyup(function(){
$('your result input name here).text($('.item_total').val() * 1.5);
});
});
this link will help you:
http://jsfiddle.net/7BDwP/
You will get idea from the above link what i am trying to say

After checked values is not getting unchecked

My requirement is once I click on checkbox and save/update textbox should be disabled and when I uncheck and save/update textbox should be enabled. During check latest_file value should be 1 and during uncheck its value should be 0. Here is my code which I tried:
function disableFileName() {
var latestFile = $("#latestFile").is(":checked");
if (latestFile) {
$("#fileName").attr("disabled", "disabled");
} else {
$("#fileName").removeAttr("disabled");
}
}
<table>
<tr>
<td>Process the latest file from the feed location </td>
<td>
<s:checkbox property="latestFile" styleId="latestFile" value="1" onclick="disableFileName();" tabindex="5" />
</td>
</tr>
<tr>
<td>File Name</td>
<td nowrap="true">
<s:text property="fileName" styleClass="textbox" styleId="fileName" style="{width:150}" tabindex="6" />
</td>
</tr>
</table>
javascript at Question returns expected result where disableFileName, #latestFile, #fileName are defined. To toggle value of #latestFile you can use $("#latestFile").val(1); at if, $("#latestFile").val(1); at else
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function disableFileName() {
var latestFile = $("#latestFile").is(":checked");
if (latestFile) {
$("#latestFile").val(1);
$("#fileName").attr("disabled", "disabled");
} else {
$("#latestFile").val(0);
$("#fileName").removeAttr("disabled");
}
console.log($("#latestFile").val());
}
</script>
<table>
<tr>
<td>Process the latest file from the feed location</td>
<td>
<input type="checkbox" property="latestFile" id="latestFile" value="1" onclick="disableFileName();" tabindex="5" />
</td>
</tr>
<tr>
<td>File Name</td>
<td nowrap="true">
<input type="text" property="fileName" class="textbox" id="fileName" style="width:150" tabindex="6" />
</td>
</tr>
</table>
Try using prop instead of attr to disable the checkbox as shown below:
$("#fileName").prop("disabled", "true");
HTML:
<table>
<tr>
<td>Process the latest file from the feed location </td>
<td>
<input type="checkbox" id="latestFile" value="1" onclick="disableFileName();" tabindex="5" />
</td>
</tr>
<tr>
<td>File Name</td>
<td nowrap="true">
<input type="textbox" name="fileName" styleClass="textbox" id="fileName" style="width:150" tabindex="6" />
</td>
</tr>
</table>
Javascript:
function disableFileName() {
var latestFile = $("#latestFile").is(":checked");
if (latestFile) {
$("#fileName").prop("disabled", "true");
$("#latestFile").attr("value", "1");
} else {
$("#fileName").removeAttr("disabled");
$("#latestFile").attr("value", "0");
}
}
Here is the demo: JSFiddle Demo

Jquery serialize() method is returning null

I am using serialize() method in my JSP page. But its returning null. Dont know what I am doing wrong
Please help.
jQuery Code :
$(document).ready(function() {
$("#addBtn").click(function() {
var offerData = $("#testForm").serialize();
alert(offerData);
}
});
HTML Code :
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td>
<input type="text" name="name" id="name" />
</td>
</tr>
<tr>
<td>Address :</td>
<td>
<input type="text" name="address" id="address" />
</td>
</tr>
<tr>
<input type="button" id="addBtn" />
</tr>
</table>
</form>
I posted relevant code only.
I think your javascript code is bad formatted, I tried this and it works fine...
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td>Address :</td>
<td><input type="text" name="address" id="address"/></td>
</tr>
<tr>
<input type="button" id="addBtn"/>
</tr>
</table>
</form>
There's an error in your javascript code. It should be:
<script type="text/javascript">
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
</script>
Notice the closing bracket and semicolon after your click method.
you forgot the close parenthesis, the code below works
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td>Address :</td>
<td><input type="text" name="address" id="address"/></td>
</tr>
<tr>
<input type="button" id="addBtn"/>
</tr>
</table>
</form>
Missing closing parenthesis for click event handler. Also in the HTML the last <tr> has no <td> included. Consider including your input element into <td colspan="2">
jQuery
$("#addBtn").click(function() {
var offerData = $("#testForm").serialize();
alert(offerData);
}); // <-- missing );
HTML
<tr>
<td colspan="2">
<input type="button" id="addBtn" />
</td>
</tr>

Disabling certain inputs in table on button press

I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.
Does anyone know of a good way to go about this?
<tr>
<td>Text A</td>
<td>Text B</td>
<td><input class="editable"></td>
<td>Text C</td>
<td><input class="editable></td>
<td>Text D</td>
<td><button class="disableInput">OK</button></td>
<tr>
I have ~40 rows like this
Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds
$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})
Since you are using jQuery, you can do something like this:
$(document).ready(function() {
$("table td .btn").click(function() {
if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
$(this).closest("tr").find("input").removeAttr("disabled", "disabled");
$(this).closest("tr").find("button").text("Disbale");
}
else{
$(this).closest("tr").find("input").attr("disabled", "disabled");
$(this).closest("tr").find("button").text("Enable");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
</tbody>
</table>
You can do this via traversing the DOM.
$('.disableInput').on('click',function(){
var input = $(this).closest('tr').find('input');
var currstatus = input.prop('disabled');
input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
</table>

Iterate through inputs inside of a div

I'am trying to iterate through all inputs which are placed on a specific div via jQuery, but there is no response. I can't see the values of inputs by using alert. What am I doing wrong ?
<form id="internshipStage2Form" method="POST" action="form2.php">
<center>
<table id="studentInformation" border="1">
<caption style="color:#f00;">Student(Trainee) Information</caption>
<tr>
<td valign="middle" align="center">
<label id="stuEmailLabel" for="stuEmailText">E-mail Address</label>
</td>
<td valign="middle" align="center"><?php echo $email; ?></td>
</tr>
<tr>
<td valign="middle" align="center">
<label id="stuPhoneLabel" for="stuPhoneText">Phone</label>
</td>
<td><input id="stuPhoneText" type="text" name="stuPhoneText"/></td>
</tr>
</table>
<div id="companyInfo">
<table id="companyInformation" border="1">
<caption style="color:#f00;">Company Information</caption>
<tr>
<td valign="middle" align="center">
<label id="companyNameLabel" for="companyNameText">Company Name</label>
</td>
<td><input id="companyNameText" type="text" name="companyNameText"/></td>
</tr>
<tr>
<td valign="middle" align="center">
<label id="companyAdressLabel" for="companyAdressText">Address</label>
</td>
<td><input id="companyAdressText" type="text" name="companyAdressText"/></td>
</tr>
<tr>
<td valign="middle" align="center">
<label id="companyPhoneLabel" for="companyPhoneText">Phone</label>
</td>
<td><input id="companyPhoneText" type="text" name="companyPhoneText"/></td>
</tr>
<tr>
<td valign="middle" align="center">
<label id="" for="">Did the any students work as trainees in the company in the previous years?</label>
</td>
<td valign="middle" align="center">
Yes<input id="g1Positive" type="radio" name="g1" value="YES"/>
No<input id="g1Negative" type="radio" name="g1" value="NO"/>
</td>
</tr>
</table>
</div>
<h4 style="color:#f00;">
I agree the terms.
</h4>
<input id="stuDecCheckBox" type="checkbox" name="stuDecCheckBox" /></br>
<input id="sendButton" type="submit" name="sendButton2" value="SEND FOR APPROVEMENT"/>
</center>
</form>
JS
$('#companyInfo').children('input').each(function () {
alert(this.value);
});
Any help would be appriciated.
Your inputs are not children of #companyInfo. Just do this:
$('#companyInfo input').each(function () {
alert(this.value);
});
You can use the find method, which looks for nested elements at any level:
$('#companyInfo').find('input').each(function () {
alert(this.value);
});
http://jsfiddle.net/geLq4/
The inputs are not immediate descendants of #companyInfo. Try this instead:
$('#companyInfo input').each(function () {
console.log($(this).val());
});
From the jQuery documentation:
The .children() method differs from .find() in that .children() only travels a single level down the DOM tree
Classes make a great way to implement multi-element operations quickly.
Yes<input class="radioInput" id="g1Positive" type="radio" name="g1" value="YES"/>
No<input class="radioInput" id="g1Negative" type="radio" name="g1" value="NO"/>
Then use .each to iterate by class:
$(document).ready(function() {
$('body').on('click', '#sendButton', function() {
$(' .radioInput ').each(function() {
alert(this.value);
});
});
});
And a jsfiddle for you. Good luck.
You can use this:
var baseInfosInputs = [];
$("#baseInfos :input, #baseInfos :selected").each(function() {
baseInfosInputs += this.value;
});
If you want push them into an array or an object use this:
baseInfosInputs.push(this.value);

Categories