as i am new in html, css, php so i am facing so many problems in completing a small project.So please don't mind. I've included a screen shot. Problem is that whenever i click radio button 'Yes' then only the input text fields of corresponding table should work. If i select the button 'No' then the text fields should be hidden i.e it will not take any input and i should be able to proceed without filling up the table. Thanks in advance.
.html
<body>
<form action="reg2.php" method="post">
<div id="formWrap">
<div class="row">
<div class="label1" style="color:#0000CC; text-align:center; font-size:30px">B.E. Degree Course Registration</div>
</div> <!-- end of 0th row -->
<div id="form">
<div class="row">
<div class="labelusn1">USN</div>
<div class="inputusn">
<input type="text" id="usn" required="required" class="usndetail" name="usn"/>
</div>
</div> <!-- end of 1st row -->
<h1 style="color:#FF0000; font-style:italic; margin-left:55px; font-size:18px">Courses Dropped/Withdrawn/Failed in Previous Year:</h1>
<div class="row>
<div class="inputradio1" style="margin-left:50px">
<input type="radio" id="radio" required="required" class="detailradio1" name="sex" Value="Yes" />Yes, I have course(s) dropped/withdrawn/failed in previous year<br/>
<input type="radio" id="sex" required="required" class="detailradio1" name="sex" value="No"/>No, I don't have course(s) dropped/withdrawn/failed in previous year<br/></div>
</div> <!-- end of row -->
<table width="719" border="1" align="center" style="margin-top:10px">
<tr bgcolor="#A7A7A7">
<td width="87"><div align="center" class="style1"> Course Code </div></td>
<td width="50"><div align="center" class="style2"> Credits</div></td>
<td width="87"><div align="center" class="style3"> Status(D/W/F)</div></td>
<td width="467"><div align="center" class="style4"> Remarks</div></td>
</tr>
<tr>
<td><input type="text" name="cc1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="c1" style="width:48px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="s1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="r1" style="width:465px;outline:none; border:hidden;margin:1px"/></td>
I left the rest part of the code...if necessary i will post
Your issue is solved, please check:
Simply add these scripts:
<!-- Importing jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!-- Applying Custom JS -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
// Disabling Text Fields by default
$("table input[type='text']").each(function () {
$(this).attr("disabled", "disabled");
});
$(".inputradio1 input[name=sex]").change(function () {
var val = $(this).val();
if (val == "No") {
$("table input[type='text']").each(function () {
$(this).attr("disabled", "disabled");
});
} else if (val == "Yes") {
$("table input[type='text']").each(function () {
$(this).removeAttr("disabled");
});
}
});
});
</script>
Or checkout the fiddle here http://jsfiddle.net/kDG5t/2/
something like that http://jsfiddle.net/Z8jU3/1/ ?
$('.detailradio1').change(function(){
if($(this).attr('id')=='sex' && $(this).is(':checked')){
$('table').hide();
}else{
$('table').show();
}
})
In html part I am just defining the ID's of input box.
HTML:-
<body>
<form action="reg2.php" method="post">
<div id="formWrap">
<div class="row">
<div class="label1" style="color:#0000CC; text-align:center; font-size:30px">B.E. Degree Course Registration</div>
</div> <!-- end of 0th row -->
<div id="form">
<div class="row">
<div class="labelusn1">USN</div>
<div class="inputusn">
<input type="text" id="usn" required="required" class="usndetail" name="usn"/>
</div>
</div> <!-- end of 1st row -->
<h1 style="color:#FF0000; font-style:italic; margin-left:55px; font-size:18px">Courses Dropped/Withdrawn/Failed in Previous Year:</h1>
<div class="row>
<div class="inputradio1" style="margin-left:50px">
<input type="radio" id="radio" required="required" class="detailradio1" name="sex" Value="Yes" />Yes, I have course(s) dropped/withdrawn/failed in previous year<br/>
<input type="radio" id="sex" required="required" class="detailradio1" name="sex" value="No"/>No, I don't have course(s) dropped/withdrawn/failed in previous year<br/></div>
</div> <!-- end of row -->
<table width="719" border="1" align="center" style="margin-top:10px">
<tr bgcolor="#A7A7A7">
<td width="87"><div align="center" class="style1"> Course Code </div></td>
<td width="50"><div align="center" class="style2"> Credits</div></td>
<td width="87"><div align="center" class="style3"> Status(D/W/F)</div></td>
<td width="467"><div align="center" class="style4"> Remarks</div></td>
</tr>
<tr>
<td><input type="text" id="course_code" name="cc1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="credits" name="c1" style="width:48px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="status" name="s1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="remarks" name="r1" style="width:465px;outline:none; border:hidden;margin:1px"/></td>
and jquery for this is :-
$('#radio').click(function()
{
$('#course_code').removeAttr("disabled");
$('#credits').removeAttr("disabled");
$('#status').removeAttr("disabled");
$('#remarks').removeAttr("disabled");
});
$('#sex').click(function()
{
$('#course_code').attr("disabled","disabled");
$('#credits').attr("disabled","disabled");
$('#status').attr("disabled","disabled");
$('#remarks').attr("disabled","disabled");
});
If you want that all input box to be disabled on initial page load then you have to mention disabled="disabled" in all input box like this:-
rest all is same ....
You could use CSS if you just want the whole section hidden.
If you have the radio(s) on the same DOM level as a container element like a div for example:
div.formContainer {
display: none;
}
input[type=radio]#yes:checked ~ div.formContainer {
display: block;
}
The HTML would basically have something along the lines of:
<input type="radio" name="yesno" id="yes" /><label for="yes">Yes</label>
<input type="radio" name="yesno" id="no" /><label for="no">No</label>
<div class="formContainer">
<input type="text" id="input1" name="input1" value="Hello World!" />
</div>
This SHOULD mean that if "yes" is the current choice then the text input field should be visible and if yes is not the current choice then the field will be invisible.
Related
The code in the woocommerce single product look like this (Astra theme):
<div class="summary entry-summary">
<h1 class="product_title entry-title">Woocommerce Product</h1><p class="price"><del><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">kr</span> 499</bdi></span></del> <ins><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">kr</span> 374</bdi></span></ins></p>
<form class="variations_form cart" action="https://www.mydomain.no/product/hoodie/" method="post">
<!-- I WANT TO MOVE IT UP HERE //-->
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label"><label for="pa_color">Color</label></td>
<td class="value">
<select id="pa_color" class="" name="attribute_pa_color"></select>
</td>
</tr>
<tr>
<td class="label"><label for="logo">Size</label></td>
<td class="value">
<select id="pa_color" class="" name="attribute_pa_size"></select>
</td>
</tr>
</tbody>
</table>
<div class="single_variation_wrap">
<div class="woocommerce-variation single_variation" style="display: none;"></div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled">
<!-- I WANT TO MOVE THIS PART //-->
<div class="quantity buttons_added">
-
<label class="screen-reader-text" for="quantity_5ff4ee9846565">Woocommerce Product quantity</label>
<input type="number" id="quantity_5ff4ee9846565" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Quantity" size="4" placeholder="" inputmode="numeric">
+
</div>
<!-- EOF -- I WANT TO MOVE THIS PART //-->
<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-selection-needed">Buy Now</button>
<input type="hidden" name="add-to-cart" value="81">
<input type="hidden" name="product_id" value="81">
<input type="hidden" name="variation_id" class="variation_id" value="0">
</div>
</div>
</form>
As you can see in my HTML comments, I want to separate the quantity input including the plus and minus buttons from the add-to-cart button, and then move that entire div to the first element of the form.
Is this at all possible using functions.php or jquery, or both - without changing the theme file?
Any suggestion will be appreciated.
Is it possible to create new row in 'td' after ngFor reaches 10 image repeats, now pics are shown all in one td and shrinking as it gets more and more?
<td *ngFor="let row of pics">
<div class="checkbox">
<label><input type="checkbox" [checked]="row.checked" value="{{row.url}}" (change)="addpic($event.target.checked, row.id)"></label>
</div>
<img src="{{picroute}}{{row.img}}>
</td>
<tr *ngFor="let page of [0,1,2,3,4,5,6,7,8,9,10,11,12].slice(0,pics/10)">
<td *ngFor="let row of pics.slice(page*10,(page+1)*10">
<div class="checkbox">
<label><input type="checkbox" [checked]="row.checked"
value="{{row.url}}" (change)="addpic($event.target.checked, row.id)">
</label>
</div>
<img src="{{picroute}}{{row.img}}>
</td>
</tr>
I think flex-box could be more useful, you can control the shrink ratio if you need, the most important, only an one dimension array is needed.
<td>
<tr ng-repeat="row in arrange(pics, 10)">
<td ng-repeat="pic in row">
<div class="checkbox">
<label>
<input type="checkbox"
[checked]="row.checked"
value="{{row.url}}"
(change)="addpic($event.target.checked, row.id)">
</label>
</div>
<img src="{{pic}}"
</td>
</tr>
</td>
arrange(pics, numberPerRow) {
var arrangedArray = [];
while (pics.length > numberPerRow) {
arrangedArray.push(arrangedArray.splice(0, numberPerRow));
}
arrangedArray.push(pics);
return arrangedArray;
}
This is a somewhat elegant solution imo, just replace variables accordingly.
I'm trying to build a settings for my WordPress plugin, I want my image to be displayed aside the table on the right, but it always goes to bottom can you guys help me to fix that ?
<form action="options.php" method="post">');
<div class="row">
<div class="col-md-8">
<table class="form-table">
<tbody>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="x'.$key.'" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="myinput" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
....
</tbody>
</table>
</div>
<div class="col-md-4">
<div id="special">
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
</div>
</div>
// outputs the WP submit button html
//#submit_button();
Add a div element with "container" or "container-fluid" class after form element( <form action="options.php" method="post"> )
like :<form action="options.php" method="post"><div class="container">
...............
</div></form>
OR
like :<form action="options.php" method="post"><div class="container-fluid">
...............
</div></form>
I have updated meteor project to 0.8.0 and have installed iron-router package. Did everything that is required but routing not happening. It is showing the front page i.e I am able to login into the application. But after that not able to go to any of the pages. My homepage have so many buttons as can be seen in header.html file. When I clicked on grumble link, in url it is displaying that "localhost:3000/grumble". But nothing is getting displayed on that form.
--> My router.js page is:
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function() {
this.route('issues', {path:'/'});
this.route('issues', {path:'/issues'});
this.route('closedIssues', {path:'/closedIssues'});
this.route('subscribedKeywords', {path:'/subscribedKeywords'});
//this.route('grumble');
//this.route('grumble2');
this.route('grumble', {path:'grumble'});
this.route('grumble2', {path:'grumble2'});
this.route('issuePage', {
path:'/issues/:_id',
data: function() {Session.set('currentIssueId', this.params); }
});
this.route('closedIssuePage', {
path:'/closedIssues/:_id',
data: function() { Session.set('currentClosedIssueId', this.params); }
});
});
var requireLogin = function() {
if ( Meteor.user())
this.render(this.params);
else if (Meteor.loggingIn())
this.render('loading');
else
this.render('accessDenied');
this.stop();
}
var clearErrors = function() {
clearErrors();
this.render(this.params);
this.stop();
}
Router.onBeforeAction(requireLogin, {only: 'grumble'});
Router.onBeforeAction(clearErrors);
--> Header.html file is from where grumble.html has been called meas href is present in this page to transfer the control:
<template name="header">
<header class="navbar">
<p>inside header.html</p>
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-coll
apse">
</a>
<a class="details btn" href="{{pathFor 'grumble'}}">Grumble</a>
{{#if currentUser}}
<a class="details btn" href="{{issuesPath}}">See Issues</a>
<a class="details btn" href="{{closedIssuesPath}}">Closed Issues</a>
<a class="details btn" href="{{subscribedKeywordsPath}}">Watchlist</a>
{{> notifications}}
{{/if}}
<span class="nav pull-right">
<li>{{> loginButtons}}</li> <!--should be {{> }} here in order to display login functionality-->
</span>
</div>
</header>
</template>
--> Grumble.html, the file to which control should be transferred means routing has been done for this page to get the control
<template name="grumble">
<p>inside form i.e. grumble.html</p>
<form class="main">
<fieldset>
<legend>New Grumble</legend>
<table border="0">
<tr>
<td>
<label class="control-label" for="shortdesc"><span style="color:red;">*</span> Description</label>
<input name="shortdesc" type="text" value="" placeholder="Radiator not working"/>
</td>
<td>
<label class="control-label" for="urgency">Urgency</label>
<select name="urgency" >
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="date">Date</label>
<input name="date" type="date" value="{{date}}" />
</td>
<td>
<label class="control-label" for="time">Time</label>
<input name="time" type="time" value="{{time}}" />
</td>
</tr>
<tr>
<td>
<label class="control-label" for="dept">Department/Building</label>
<input name="dept" type="text" value="" placeholder="Physiotherapy"/>
</td>
<td>
<label class="control-label" for="unit">Unit</label>
<input name="unit" type="text" value="" placeholder="Occupational Therapy"/>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="room">Room</label>
<input name="room" type="text" value="" placeholder="P2"/>
</td>
<td>
<label class="control-label" for="category">Category</label>
<input name="category" type="text" value="" placeholder="Utility"/>
</td>
</tr>
<tr>
<td>
<label class="control-label" for="details">Details</label>
<textarea name="details" value="" placeholder="Broken radiator next to vending machine."></textarea>
</td>
<td>
<label class="control-label" for="anonymous">Anonymity</label>
<select name="anonymous" >
<option value="anonymous">Anonymous</option>
<option value="identifiable">Identifiable</option>
</select>
</td>
</tr>
</table>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</fieldset>
</form>
</template>
<template name="grumble2">
<form class="main">
<fieldset>
<legend>New Grumble</legend>
<table border="0">
<tr>
<td>
<label class="control-label" for="details"><span style="color:red;">*</span> Description</label>
<textarea name="details" value="" placeholder="Broken radiator next to vending machine."></textarea>
</td>
</tr>
</table>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</fieldset>
</form>
</template>
Please help me where I am wrong as have read the article : http://www.manuel-schoebel.com/blog/iron-router-tutorial. And tried to make changes but not working. Any pointers please.
I think the route this.route('issues', {path:'/issues'}); overwrites the route this.route('issues', {path:'/'}); (they have the same name!), so you have no route for /. Try changing name on one of them, and see if that makes a different.
You're missing a "/" in front of your grumble route path. It should be this.route('grumble', {path:'/grumble'})
I'm doing my first piece of HTML & CSS today, and I'm having trouble trying to move a div. I read some tutorials on CSS and tried to replicate what I've seen. But for some reason I cannot get the div to move.
Can anybody set me straight as to what I've done wrong please?
CSS
#seax {
position:static;
top:400;
left:400;
}
HTML
<div id="seax">
<form autocomplete="off" method="post" action="/search.html">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</form>
</div>
Change position:static; to position:relative;. Static position displays the div in it's default position, which is as it'd appear in the document flow you see.
Add "px" to your CSS, and use absolute
#seax {
position:absolute;
top:100px;
left:100px;
}
http://jsfiddle.net/djwave28/tnvQz/
It really depends on how you want to position the div.
position: static; is definitely your issue, as static position (as #Omega noted) displays the div in it's default position. You mean to write either position: absolute or position: relative. The difference between the two is best outlined here but I'll give you a tl;dr.
position: absolute positions the div relative to the whole page, whereas position: relative positions it relative to the parent.
Also, you are missing px at the end of your top and left property values (i.e top:10px; and left:10px;)
Give the div a position of absolute
#seax {
position: absolute;
top:400;
left:400;
}
Try changing
<div id="seax"></div>
to
<div class="seax"></div>
and
#seax {
position:static;
top:400;
left:400;
}
to
.seax {
position:absolute;
top:400px;
left:400px;
}
if you want to use seax for multiple elements.
You could even try:
<form autocomplete="off" method="post" action="/search.html">
<div class="seax">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</div>
</form>
That should fix it. Otherwise your HTML document should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
.seax {
position:absolute;
top:400px;
left:400px;
}
</style>
<body>
<div class="seax">
<form autocomplete="off" method="post" action="/search.html">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-
autocomplete-input" autocomplete="off" role="textbox" aria-
autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif"
value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>