how to hide/show field by button for same parent only - javascript

I have the below code structure, how do I click the edit button to show/hide the 3 file input fields for that table only?
by default all those file input fields are hidden.
If I press the edit button inside the second table, only the 3 inputs inside second table will be display.
<table>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton"></span>
</table>
<table>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton"></span>
</table>
<table>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton"></span>
</table>
most of the examples I found online are using getElementbyID, so I am kind of stuck.
Thanks,
Pat

I think the best solution would be implemented using JQuery, rather than straight Javascript.
EDIT2: Okay, all completely solved! http://jsfiddle.net/3QYhQ/
The Jquery is here:
$(".editButton").click(function () {
var x = $(this).attr("group");
$('.' + x).css("visibility", "visible");
});
This says, that any time an .editButton is clicked, grab the attribute group and take it's value. Now go found anything that has a class name of whatever value that group had, and make it visible.
<input type="button" class="editButton" group="editGroup1" value="Edit" />
<input type="text" name="product" class="editGroup1 editGroup" />
<input type="text" name="color" class="editGroup1 editGroup" />
<input type="text" name="price" class="editGroup1 editGroup" />
<input type="button" class="editButton" group="editGroup2" value="Edit" />
<input type="text" name="product" class="editGroup2 editGroup" />
<input type="text" name="color" class="editGroup2 editGroup" />
<input type="text" name="price" class="editGroup2 editGroup" />
Here's the html. Essentially, all of your hidden inputs have two classes - one binding them to the edit button they'll need to use, and another generic class name that is used by CSS below:
.editGroup {
visibility:hidden;
}
I hope that helps!
If anyone can do something fancier with .child() or something like that (I'm not too well versed on using those), please feel free to share your answers!

Try this and see the demo
edit
<div>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton">edit</span>
</div>
<div>
<input type="file" name="product" class="editThis" />
<input type="file" name="color" class="editThis" />
<input type="file" name="price" class="editThis" />
<span class="editButton">edit</span>
</div>
$('.editButton').click(function()
{
$(this).siblings('.editThis').toggle();
});

I would recommend a different class name for each product group of inputs and the use the getElementsByClassName() function. I would also recommend using display:none to remove your input elements from the page and then use display:block to insert them.
Here is a pure JavaScript example (jsfiddle demo):
HTML:
<table width="100%">
<th>Product 2</th>
<tr>
<td id="product_2_edit_button" onclick="my_function()">edit</td>
<tr>
<td>
<input style="display:none" type="file" name="product" class="product_2_field" />
<input style="display:none" type="file" name="color" class="product_2_field" />
<input style="display:none" type="file" name="price" class="product_2_field" />
</td>
</tr>
JS:
function my_function() {
var testing = document.getElementsByClassName("product_2_field");
testing[0].style.cssText = "display:block";
testing[1].style.cssText = "display:block";
testing[2].style.cssText = "display:block";
}

Related

Javascript Tapestry Form Submit issue

So I've been sent some HTML to upload to our website, essentially it's a login form, however the Login button does nothing when pressed in the browser. I see that it's using a "javascript:tapestry.form.submit" to submit the form using a stylized button image (img src="images/submit.png" alt="submit") which I think may be the issue.
When I change it from this button to a standard button using (input type="submit" value="Login" /) it works fine. Is there a reason anyone can think of why this button could be causing an issue not the load in the browser? The form works if you type in your details and press return.
<div id="loginPanel">
<div class="text">
<p class="loginText">Welcome</p>
<p class="loginText">Log-in to place your order</p>
</div>
<form method="post" action="http://coreprint.net/aspire/Login,loginForm.sdirect" id="loginForm">
<div style="display:none;" id="loginFormhidden">
<input type="hidden" name="formids" value="If_0,If_2,username,password,loginButton,If_4" />
<input type="hidden" name="seedids" value="" />
<input type="hidden" name="submitmode" value="" />
<input type="hidden" name="submitname" value="" />
<input type="hidden" name="If_0" value="F" />
<input type="hidden" name="If_2" value="F" />
<input type="hidden" name="If_4" value="F" />
<input type="hidden" name="Hidden" id="Hidden" value="X" />
</div>
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" value="" id="username" size="30" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" value="" id="password" size="30" /></td>
</tr>
</table>
<a href="javascript:tapestry.form.submit('loginForm', 'loginButton');" id="loginButton" class="bLink">
<img src="images/submit.png" alt="submit">
</a>
<input type="submit" style="width:0;height:0;border:0"/>
</form>
</div>
Following on from the comments above, our real aim here is to change the way the submit button looks, rather than to add submit behaviour to an image. We can do this with CSS.
#loginForm > input[type="submit"] {
width:60px;
height:60px;
// transparent background colour
background-color: rgba(0,0,0,0);
// allows the background to resize when you change width/height
background-size:100% 100%;
// use your submit image
background-image: url("images/submit.png");
// remove default button border
border:none;
// make a nicy pointy cursor
cursor:pointer;
}
I have removed the anchor and image from the HTML, and added a blank value to the submit button so no text shows over our background image.
<div id="loginPanel">
<div class="text">
<p class="loginText">Welcome</p>
<p class="loginText">Log-in to place your order</p>
</div>
<form method="post" action="http://coreprint.net/aspire/Login,loginForm.sdirect" id="loginForm">
<div style="display:none;" id="loginFormhidden">
<input type="hidden" name="formids" value="If_0,If_2,username,password,loginButton,If_4" />
<input type="hidden" name="seedids" value="" />
<input type="hidden" name="submitmode" value="" />
<input type="hidden" name="submitname" value="" />
<input type="hidden" name="If_0" value="F" />
<input type="hidden" name="If_2" value="F" />
<input type="hidden" name="If_4" value="F" />
<input type="hidden" name="Hidden" id="Hidden" value="X" />
</div>
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" value="" id="username" size="30" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" value="" id="password" size="30" /></td>
</tr>
</table>
<input type="submit" value="" />
</form>
</div>
Working example here

How to make enable disable the required filed?

i have created one form in that form i have 2 hidden fields which are displaying after checking a radio button . the code is
<style>
.selectContainer{
display:none;
}
input[type=radio]:checked ~ .selectContainer {
display:block;
}
</style>
/html code/
<label for="name"> Any Accompanying Person ?:</label>
<input type="radio" name="yes" value="yes">Yes
<div class="selectContainer">
<label>Person Details</label>
<p>
<div style="padding-left:70px;">
<input type="button" value="Add Person" onClick="addRow('dataTable')" />
<input type="button" value="Remove Person" onClick="deleteRow('dataTable')" />
</div>
</p>
<table style="padding-left:50px;" id="dataTable" class="form" border="1" >
<tbody>
<tr>
<p>
<td><input type="checkbox" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" size="20" name="name[]" required>
</td>
<td>
<label>Age</label>
<input type="text" size="20" name="age[]" required>
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
</div>
</div>
<h3>Choose Your Payment Option</h3>
<h1>
<div style="padding-left:150px;">
<input type="radio" name="type" value="visa">VISA/MASTER CARD:<br />
<input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
<input type="radio" name="type" value="neft">NEFT<br /><br/>
</div>
<label></label>
<input type="submit" name="submit" value="submit"><br />
</form>
Here is my form .if user will check the "Any Accompanying Person ?" radio button then only name and age field will displaying that i am controlling throw style .
problem: when user submit the form without checking the "Any Accompanying Person ?" radio button then all so name and age fields are showing required .but i need those field required when the user clicks "Any Accompanying Person ?" radio button .
how to do this?
$('#person').change(function () {
$('#name').attr('required','required');
$('#age').attr('required','required');
});
give the id person to <input id="person" type="radio" name="yes" value="yes">Yes
give the id name and age to <input type="text" size="20" name="name[]" id="name">
give the id age to <input type="text" size="20" name="age[]" required>
According to your CSS
<style>
.selectContainer{
display:none;
}
input[type=radio]:checked ~ .selectContainer {
display:block;
}
</style>
The .selectContainer is not displayed and you are making it setting it displayed on selecting the radio button .In this case you cannot select the radio button as it is not visible due to your CSS.Set the visibilty for this selectContainer block so that you are able to select the radiobutton
and after that use ajax to check that whenever the button is checked that is
$('yourbutton').change(function () {
if($(this).is(':on') {
$('#name').attr('required');
$('#age').attr('required');
}
});
I hope this solves your problem.
<html>
<head>
<style>
.selectContainer{
display:none;
}
input[type=radio]:checked ~ .selectContainer {
display:block;
}
</style>
</head>
<body>
<form>
<label for="name"> Any Accompanying Person ?:</label>
<input type="radio" name="yes" value="yes">Yes
<div class="selectContainer">
<label>Person Details</label>
<p>
<div style="padding-left:70px;">
<input type="button" value="Add Person" onClick="addRow('dataTable')" />
<input type="button" value="Remove Person" onClick="deleteRow('dataTable')" />
</div>
</p>
<table style="padding-left:50px;" id="dataTable" class="form" border="1" >
<tbody>
<tr>
<p>
<td><input type="checkbox" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" size="20" name="name[]" required>
</td>
<td>
<label>Age</label>
<input type="text" size="20" name="age[]" required>
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
</div>
</div>
<h3>Choose Your Payment Option</h3>
<h1>
<div style="padding-left:150px;">
<input type="radio" name="type" value="visa">VISA/MASTER CARD:<br />
<input type="radio" name="type" value="cheque"> CHEQUE/DEMAND DRAFT<br />
<input type="radio" name="type" value="neft">NEFT<br /><br/>
</div>
<label></label>
<input type="submit" name="submit" value="submit"><br />
</form>
</body>
</html>
Use this code.this doesnot give any error. Then Add the ajax code or any scripting according to your requirement .

jQuery Change Input text upon selection of radio button having multiple forms in same page

Im looking to do something like #JCOC611 did here: https://stackoverflow.com/a/5099898/3223200
In which you can change the TEXT value depending on the RADIO BUTTON selection
Who ever, I would like to have several forms in the same page, how can this be done?
The original code is
<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Demo here: http://jsfiddle.net/jcoc611/rhcd2/1/
And I would like something like this:
<form action="hello.php" name="form01" method="post">
<input type="hidden" name="productid" value="01" />
<input type="radio" name="price" value="1000">
<input type="radio" name="price" value="2000">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form02" method="post">
<input type="hidden" name="productid" value="02" />
<input type="radio" name="price" value="6000">
<input type="radio" name="price" value="2400">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form03" method="post">
<input type="hidden" name="productid" value="03" />
<input type="radio" name="price" value="500">
<input type="radio" name="price" value="700">
<input type="text" id="it" name="pricevalue" value="">
</form>
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Using multiple forms in the same page, but to use the same function
How can this be done?
Use:
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
jsFiddle example
By using .closest() and .find() you can pick the text input element closest to the relative radio button selected.
Note that IDs must be unique.
A bit less code if you use siblings().
$(document).ready(function(){
$("input[type=radio]").click(function(){
$(this).siblings("input[type=text]").val(this.value);
});
});
jsFiddle example

Checkbox attributes in html and javascript

I'm trying to make a very basic calculator, and I want to have checkboxes to choose what operation to perform to the numbers. I am trying to make sure that when a box is checked all of the other boxes are unchecked. I am only testing this first, so thats's why Only one checkbox has the code for it. the function calculate is something I am not worried about, as I already tested it and it works. Thanks!
<form>
<input type="text" id="num1">
<input type="checkbox" value="+" onClick="calculate0();
document.getElementById("subtract").checked = "false"; ">
<input type="checkbox" value="-" id="subtract" onClick="calculate1()" checked="false">
<input type="checkbox" value="*" onClick="calculate2()">
<input type="checkbox" value="/" onClick="calculate3()">
<input type="text" id="num2">
<input type="text" id="answer" readonly>
</form>
Use radio buttons to choose the calculation mode and calculate it only with a "submit" button, or use submit - buttons instead. This is much more logical and looks better!
EDIT:
Use radio buttons like this:
<form>
<input type="radio" name="method" onclick="selectMethod('+');" />+ <br />
<input type="radio" name="method" onclick="selectMethod('-');" />- <br />
<input type="radio" name="method" onclick="selectMethod('*');" />* <br />
<input type="radio" name="method" onclick="selectMethod('/');" />/ <br />
</form>
<script>
var method = "+";
function selectMethod(m) {
method = m;
}
</script>
Or use submit-buttons like this (it's the easiest way):
<input type="submit" value="+" onclick="calculate0;" />
<input type="submit" value="-" onclick="calculate1;" />
<input type="submit" value="*" onclick="calculate2;" />
<input type="submit" value="/" onclick="calculate3;" />

HTML - I cannot write in some textboxes shown dynamically by javascript in internet explorer

I have 2 forms on my page.
The first one is always visible and the second one is hidden at first.
When the user clicks a specified radio option, the second form shows up.
In Chrome and Firefox, everything is fine, but in IE, the form shows, but I cannot write inside the textboxes fields.
The wierdest thing is that I can erase everything inside the textboxes but I cannot add anything.
Here is some code:
The first form:
<form name="calendar" action="" method="post">
<input type="text" name="n" />
<input type="radio" name="t" value="0" onclick="showSecondForm();" />Option 1
<input type="radio" name="t" value="1" onclick="showSecondForm();" />Option 2
<input type="radio" name="t" value="2" onclick="showSecondForm();" />Option 3
<input type="submit" name="submit" value="Submit" onclick="onSubmitAction();return false;">
</form>
The function showSecondForm() checks if option 3 is checked and if so, it shows the second form.
The second form is:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" />
<input type="text" name="b" />
<input type="text" name="c" />
<input type="text" name="d" />
<input type="text" name="e" />
</form>
</div>
The forms will never submit because everything I have to do is in javascript and I can reach both forms easilly. All my code is working fine except for the typing in textboxes in ie.
My javascript
<script type="text/javascript">
function showSecondForm()
{
if(document.calendar.t[2].checked)
{
document.getElementById('customForm').style.display = 'block';
}
else
{
document.getElementById('customForm').style.display = 'none';
}
}
</script>
In browsers like Google Chorme and Mozilla Firefox, when you put a maxlenght of 0 on a text input field, the textbox lenght is "unlimited". In Internet Explorer, it is really 0, so you cannot write anything in it.
So the code must be:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" maxlength="255" />
<input type="text" name="b" maxlength="255" />
<input type="text" name="c" maxlength="255" />
<input type="text" name="d" maxlength="255" />
<input type="text" name="e" maxlength="255" />
</form>
</div>
Try this:
<script type="text/javascript">
function showSecondForm() {
document.getElementById('customForm').style.display='block';
}
</script>

Categories