I have one form with input fields. After the first part there are 2 buttons (external, internal) the external redirects you somewhere else the internal button should show (set visible) more input fields.
like
<form action="servlet_link" method="post">
<table class="ui-widget">
<colgroup width="350" span="2"></colgroup>
<tbody>
<tr>
<td>
<p class="form">
Familyname
</p><td>
<input class="ui-widget-content ui-state-default ui-corner-all" name="familyname" type="text"">
</td>
</tr>
<tr>
<td>
<p class="form">
Givenname
</p></td>
<td>
<input class="ui-widget-content ui-state-default ui-corner-all" name="ustid" type="text">
</td>
</tr>
</tbody>
</table>
<div class="center">
<!-- Buttons -->
<table align="center">
<tr>
<td>
<!-- sends data post and redirects u -->
External
</td>
<td>
<!-- shows more input fields and sets both buttons invisible -->
<a href="???" class="btn" name="intern" >Internal</a>
</td>
</tr>
</table>
</div>
<!-- part 2 should be shown -->
<table class="ui-widget">
<colgroup width="350" span="2"></colgroup>
<tbody>
<tr>
<td>
<p class="form">
Companyname
</p><td>
<input class="ui-widget-content ui-state-default ui-corner-all" name="companyname" type="text"">
</td>
</tr>
<tr>
<td>
<p class="form">
address
</p></td>
<td>
<input class="ui-widget-content ui-state-default ui-corner-all" name="address" type="text">
</td>
</tr>
</tbody>
</table>
<div class="center">
<!-- Buttons -->
<table align="center">
<tr>
<td>
<!-- sends data post and redirects u -->
External
</td>
</tr>
</table>
</div>
</form>
Do i have to give all elements a id tag and set it invisible through:
JS:
function invisbleForm() {
document.getElementById("companynameText").style.display ="block";
}
Is there better solution to do that ?
thx for any help :)
UPDATE 1
Ok to set it visible and invisible is not the problem put i have a big white block on my page how can i dynamically resize it?
Well you could do this:
Assing an id to your form then add a class 'myFields' to the input fields you wish to show.
Then try this:
var myForm = document.getElementById('FormId');
var ipnutFieldsToShow = myForm.getElementsByClassName('myFields');
for(var i = 0; i < inputFieldsToShow.length; i++) {
inputFieldsToShow[i].style.display ="block";
}
You could add a class name to each element you want to show and the use the native method "document.getElementsByClassName".
Take a look at: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName
Related
I have a jsp page where i am displaying value from data base .
Now i need to edit the table value in click of that particular row and that selected row value should get set into respective input text .
My java script function is getting called but clicked value is not getting displayed into respective input type .
The java script function name is onRowClick
I am adding code for that .
Please suggest .
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script>
function onRowClick(){
var table = document.getElementById("hoteltable"),rIndex;
for(var i = 0; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
rIndex = this.rowIndex;
document.getElementByName("hId").value = this.cells[0].innerHTML;
document.getElementByName("hName").value = this.cells[1].innerHTML;
document.getElementByName("hArea").value = this.cells[2].innerHTML;
document.getElementByName("hNumOfRooms").value = this.cells[3].innerHTML;
document.getElementByName("hImgUrl").value = this.cells[4].innerHTML;
hideButton();
showDelete();
showEdit();
};
}
}
</script>
</head>
<body>
<h2>Welcome to Admin Page</h2>
<div id="sub-left">
<form:form action="hotelaction" method="post" modelAttribute="hotel">
<table>
<tr>
<td>hotelId</td>
<td><form:input name="hId" path="hotelId"></form:input></td>
<td><form:errors path="hotelId" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelName:</td>
<td><form:input name="hName" path="hotelName"></form:input></td>
<td><form:errors path="hotelName" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelArea:</td>
<td><form:select name="hArea" path="hotelArea">
<form:option value="Marthalli">Marathalli</form:option>
<form:option value="SilkBoard">SilkBoard</form:option>
</form:select></td>
<td><form:errors path="hotelArea" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelNumberOfRooms:</td>
<td><form:input name="hNumOfRooms" path="hotelNumOfRooms"></form:input></td>
<td><form:errors path="hotelNumOfRooms" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelImgUrl:</td>
<td><form:input name="hImgUrl" path="hotelImgUrl"></form:input></td>
<td><form:errors path="hotelImgUrl" cssClass="error"></form:errors></td>
</tr>
</table>
<div id="sub-right">
<input type="submit" value="Add" name="action" id="btn1" class="glass2"></input> <br> <br>
<input type="submit"value="Edit" name="action" id="btn2" class="glass2" /><br> <br>
<input type="submit" value="Delete" name="action" id="btn3" class="glass2"></input><br> <br>
<input type="reset"value="Reset" name="reset" onClick=showButton(); class="glass2" />
</div>
</form:form>
</div>
<div class="myTable">
<table id="hoteltable" border="1" width=100%>
<tr>
<td><h4>hotelId</h4></td>
<td><h4>hotelName</h4></td>
<td><h4>hotelArea</h4></td>
<td><h4>hotelNumOfRooms</h4></td>
<td><h4>hotelImageUrl</h4></td>
</tr>
<c:forEach var="hotels" items="${hotelList}">
<tr onclick="onRowClick()">
<td >${hotels.hotelId}</td>
<td>${hotels.hotelName}</td>
<td>${hotels.hotelArea}</td>
<td>${hotels.hotelNumOfRooms}</td>
<td>${hotels.hotelImgUrl}</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
If you look in the web console, you'll find an error message. There is no document.getElementByName function in the DOM. There's getElementsByName (plural), but not a singular, and that one wouldn't really help you since it would give you a collection of all of the elements with that name, anywhere on the page. (Although if the only ones with those names are the ones you want, you could use it and then use [0] to get the only entry in the resulting collection.)
There's a different problem, though: Your click="onRowClick()" doesn't pass on any information about which row was clicked, and the function itself just hooks up event handlers on the rows rather than actually doing what you want done on click.
Instead, hook click on the table, and check to see if the click passed throug a row; if it did, fill in the information in the first table. See comments:
// Hook click on the table, rather than individual rows
document.getElementById("hoteltable").addEventListener("click", function(e) {
// Make sure the click passed through a row in this table
var row = e.target.closest("tr");
if (!row || !this.contains(row)) {
return;
}
// Get the form we're filling in
var form = document.querySelector("form[action=hotelaction]");
// Fill in the various inputs
// Note: I'd recommend giving each cell a data-name attribute or something
// and using those rather than using `row.cells[0]` and such. That way
// when (not if ;-) ) you change the source table, the cell references
// aren't messed up
form.querySelector("[name=hId]").value = row.cells[0].innerHTML;
form.querySelector("[name=hName]").value = row.cells[1].innerHTML;
form.querySelector("[name=hArea]").value = row.cells[2].innerHTML;
form.querySelector("[name=hNumOfRooms]").value = row.cells[3].innerHTML;
form.querySelector("[name=hImgUrl]").value = row.cells[4].innerHTML;
/*
hideButton();
showDelete();
showEdit();
*/
});
<h2>Welcome to Admin Page</h2>
<div id="sub-left">
<form action="hotelaction" method="post" modelAttribute="hotel">
<table>
<tr>
<td>hotelId</td>
<td>
<input name="hId" path="hotelId">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelName:</td>
<td>
<input name="hName" path="hotelName">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelArea:</td>
<td>
<select name="hArea" path="hotelArea">
<option value="Marthalli">Marathalli</option>
<option value="SilkBoard">SilkBoard</option>
</select>
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelNumberOfRooms:</td>
<td>
<input name="hNumOfRooms" path="hotelNumOfRooms">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelImgUrl:</td>
<td>
<input name="hImgUrl" path="hotelImgUrl">
</td>
<td>
<span class="error"></span>
</td>
</tr>
</table>
<div id="sub-right">
<input type="submit" value="Add" name="action" id="btn1" class="glass2"><br> <br>
<input type="submit" value="Edit" name="action" id="btn2" class="glass2" /><br> <br>
<input type="submit" value="Delete" name="action" id="btn3" class="glass2"><br> <br>
<input type="reset" value="Reset" name="reset" onClick=showButton(); class="glass2" />
</div>
</form>
</div>
<div class="myTable">
<table id="hoteltable" border="1" width=100%>
<tr>
<td>
<h4>hotelId</h4>
</td>
<td>
<h4>hotelName</h4>
</td>
<td>
<h4>hotelArea</h4>
</td>
<td>
<h4>hotelNumOfRooms</h4>
</td>
<td>
<h4>hotelImageUrl</h4>
</td>
</tr>
<tr>
<td>1</td>
<td>Savoy</td>
<td>Marthalli</td>
<td>300</td>
<td>https://via.placeholder.com/150?text=Savoy</td>
</tr>
<tr>
<td>2</td>
<td>Marriott</td>
<td>SilkBoard</td>
<td>450</td>
<td>https://via.placeholder.com/150?text=Marriott</td>
</tr>
<tr>
<td>3</td>
<td>Premier Inn</td>
<td>Marthalli</td>
<td>150</td>
<td>https://via.placeholder.com/150?text=Premier+Inn</td>
</tr>
</table>
</div>
Note that I removed from JSP- or template-isms from the HTML in that, so it used standard form inputs. I assume what gets delivered to the browser uses standard form elements.
I open a div with a table inside by clicking a button. In this table there are a number of input fields. If all input fields are filled then button should change the colour.
I have a number of divs with table with input fields. One of them is working, but does not succeed with seccond div.
<p><br></p>
<!-- The Next Button Plates -->
<button id = "buttonP" onclick="showOrHide('Plates')" class="button1" name= "Plates" ><b>Plates</b></button>
<!-- Insert a table in a div, so this can be hide -->
<div id="Plates">
<br>
<div id="CompoundPlates_button">
<table style="width:20%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<!--<col style="background-color:yellow"> -->
</colgroup>
<tr>
<td width="20%"><input type="button" id = "button" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('CompoundPlates')">
</td>
<td width="40%"><b>CompoundPlates</></td>
<td width="15%"></td>
<td width="15%"></td>
<td width="10%"></td>
</tr>
</table>
</div> <!-- Close Div CompoundPlates_button -->
<!-- Insert a table in a div, so this can be hide -->
<div id="CompoundPlates">
<table style="width:50%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
</colgroup>
<tr>
<td width="10%">
</td>
<td width="20%">Number of Plates:</td>
<td width="30%"><input type="text" name="Number of plates" size="35"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
<tr>
<td>
</td>
<td>Plate/Tip type :</td>
<td><input type="text" name="Plate/Tip type" size="35"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td>Lid : </td>
<td><input type="text" name="Lid" size="35"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td>Storage device :</td>
<td><input type="text" name="Storage device" size="35"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td>Position :</td>
<td><input type="text" name="Position" size="35"></td>
<td></td>
<td></td>
</tr>
</table>
</div> <!-- Close div CompoundPlates -->
</div> <!-- Close div Plates -->
If input boxes are filled then color of button Compound plates should change from red to green. And if button Compound plates and button Assay plates is green then overlaying button Plates should also change from red to green
I think it's helpful for you
[1]: Change the button's color after fill out the form
$("input[type=text]").change(function() {
var filled = true;
$( "input[type=text]" ).each(function( index ) {
if($( this ).val() == ""){
filled = false;
});
if(filled === false){
//change color
}
});
Should do the trick.
What I did is I used Jquery to check and change the color of the button and for the input fields I used css because it was hard for me to change more than one input field. This is my fiddle
$("input[type='text'], textarea").on("input", function () { canChangeColor(); }); function canChangeColor(){ var can = true; $("input[type='text'], textarea").each(function(){ if($(this).val()==''){ can = false; } }); if(can){ $('.btn').css({background:'green'}) }else{ $('.btn').css({background:'red'}) } }
.form-control {
background-color: red;
}
.form-control:valid {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<input type="text" class="form-control" id="name" name="user_name" placeholder=" Full Name" required>
</div>
<div>
<input type="text" class="form-control" name="user_mail" placeholder=" Email Address" required>
</div>
<div>
<textarea type="text" class="form-control" name="user_message" id="message" cols="30" rows="10" placeholder=" Let me know what's on your mind" required></textarea>
</div>
</div>
<div class="sendButton">
<button class="btn" type="submit" disabled="disabled">Send</button>
</div>
Hope this works for you!
I just want to add this form as user click on add button.Every time user click on add button a new form expand befor add button and also when user click on delete button it will delete all the form one by one but except the parent one.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- dashboard-left end here-->
<div class="inner-aw-div">
<form name="internship" id="internship">
<table class="tbl">
<tr>
<td>Company / Institute*</td>
<td colspan="2"><input type="text" name="title" id="awtitle"></td>
</tr>
<tr>
<td>Location</td>
<td colspan="2" ><input type="text"></td>
</tr>
<tr>
<td>Duration</td>
<td class="select-td">
<select> <option value="" disabled selected>1</option>
</select>
<select><option value="" disabled selected>week<option>
</select>
</td>
<td class="select-td select-margin">
<span> Complete in Year </span>
<select> <option value="" disabled selected>Year</option>
</select>
</td>
<tr>
<td>Project Name/ Title</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td>Brief Description</td>
<td class="award-description" colspan="2"><textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td><label>Key Skill Used</label></td>
<td class="award-description" colspan="2"><textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" class="intern-img" id="training">Training/ Internship
<button id="plus">Add</button>
<button id="minus">delete</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
So,i dont know how to achieve this using javascript.
-try this one.
MY HTML
<script type="text/javascript" src="../js/jquery.min.js"></script>
<section id="main-content">
<section class="wrapper">
<!-- BASIC FORM ELELEMNTS -->
<div class="row mt">
<div class="col-lg-12">
<div class="form-panel">
<h4 class="mb"><i class="fa fa-angle-right"></i>Multi Picture</h4>
<form class="form-horizontal style-form" method="post" id="multi_image" enctype="multipart/form-data">
<input type="hidden" class="form-control" name="user_id" >
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Picture 1</label>
<div class="col-sm-10 upload_div">
<div style="float:left;width:30%;">
<input type="file" name="userfile[]">
</div>
<!-- <div style="width:70%;">
Add
Delete
</div> -->
</div>
</div>
<div class="other_files">
</div>
<div class="form-group">
<div class="col-sm-10">
Add
<button class="btn btn-primary" type="submit">Upload</button>
</div>
</div>
</form>
</div>
</div><!-- col-lg-12-->
</div><!-- /row -->
</section>
</section>
MY JS CODE:
<script type="text/javascript">
$(document).ready(function(){
var max_upload=5;
var addbutton=$('.add_btn');
var wrapper=$('.other_files');
var x=1;
$(addbutton).click(function(){
if(x < max_upload)
{
x++;
var new_html='<div class="form-group">';
new_html+='<label class="col-sm-2 col-sm-2 control-label">Picture ' + x + '</label>';
new_html+='<div class="col-sm-10 upload_div">';
new_html+='<div style="float:left;width:30%;">';
new_html+='<input type="file" name="userfile[]">';
new_html+='</div>';
new_html+='<div style="width:70%;">';
new_html+='Delete';
new_html+='</div>';
new_html+='</div>';
new_html+='</div>';
wrapper.append(new_html);
}
});
$(wrapper).on('click','.delete_class',function(e){
e.preventDefault();
$(this).parent().parent().parent().remove();
x--;
});
});
</script>
First of all remove delete from your original form so that you can preserve deleting of parent form. You can add it dynamically on cloned forms as below:
var id=0;
$(document).ready(function() {
//attach a click event to add button whose id begins with plus, since id's have
//to be unique in DOM, we will be generating new id as in plus1, plus2 etc.,
//when we clone the form and before we append it. So the below selector means
//attach click events to those buttons whose id begins with plus. ^= means begins with
$(document).on('click',"button[id^=plus]",function(e){
e.preventDefault(); //prevent default action
//create a delete button html
var deleteBtn=$('<button id="minus">delete</button>');
//clone the parent form which will be in first
var clonedForm=$('form:first').clone();
//you can also do var clonedForm=$("#internship").clone();
id++; //increment the global id
//loop through each element which contains id property and replace with a new one
//to maintain uniqueness
clonedForm.find('[id]').each(function(){
var $el=$(this); //get the reference to element
$el.attr('id',$el.attr('id')+id); //replace its id with new one
});
deleteBtn.attr('id',deleteBtn.attr('id')+id);//replace delete button's id
clonedForm.attr('id',clonedForm.attr('id')+id); //replace cloned form's id
//append deleteBtn to td where add exists
clonedForm.find("td[id^=training]").append(deleteBtn);
//append cloned form to inner-aw-div
clonedForm.appendTo(".inner-aw-div");
});
//delete event to delete the closest form
$(document).on('click',"[id^=minus]",function(){
$(this).closest('form').remove(); //just remove the parent form
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
<!-- dashboard-left end here-->
<div class="inner-aw-div">
<form name="internship" id="internship">
<table class="tbl">
<tr>
<td>Company / Institute*</td>
<td colspan="2">
<input type="text" name="title" id="awtitle">
</td>
</tr>
<tr>
<td>Location</td>
<td colspan="2">
<input type="text">
</td>
</tr>
<tr>
<td>Duration</td>
<td class="select-td">
<select>
<option value="" disabled selected>1</option>
</select>
<select>
<option value="" disabled selected>week
<option>
</select>
</td>
<td class="select-td select-margin">
<span> Complete in Year </span>
<select>
<option value="" disabled selected>Year</option>
</select>
</td>
<tr>
<td>Project Name/ Title</td>
<td colspan="2">
<input type="text">
</td>
</tr>
<tr>
<td>Brief Description</td>
<td class="award-description" colspan="2">
<textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td>
<label>Key Skill Used</label>
</td>
<td class="award-description" colspan="2">
<textarea id="awdescription" value="max 2000 characters"></textarea>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" class="intern-img" id="training">Training/ Internship
<button id="plus">Add</button>
</td>
</tr>
</table>
</form>
</div>
I want my site to display differently based on the size of the web browser. Based on the questions/answers from other users, I got this to work with JavaScript onload. But I can't get it to work dynamically -- that is to say, in real-time, as users are adjusting the window. They have to refresh to get the format of the webpage to change.
Here is my current code:
<table class="index_table" border="0">
<tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth > 900){
document.write('<td rowspan="3" class="index_article"></td>');
}
</script>
<!-- END OF JAVASCRIPT -->
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth < 900){
document.write('<tr><td class="index_article" style="height:200px;"></td></tr>');
}
</script>
<!-- END OF JAVASCRIPT -->
Note: I know I shouldn't be used tables, I should be using divs. But that's another issue... I started building this website before I knew that. I also know it's pretty sloppy. So just bear with me. I'm trying to just go with it until I have time to fix it up.
You shouldn't use JavaScript to make responsive web design. Use CSS instead, with media querys. So you write your HTML:
<table class="index_table" border="0">
<tr>
<!--This only will display on screen-width>900-->
<td id="big_device_index" rowspan="3" class="index_article"></td>
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--This only will display on screen-width<900-->
<tr id="small_device_index"><td class="index_article" style="height:200px;"></td></tr>
Use the following CSS:
#media all and (max-width: 899px) {
#big_device_index {
display: none;
}
#media all and (min-width: 900px) {
#small_device_index {
display: none;
}
You can find out more about media queries here
}
Add this outside of if (window.innerWidth > 900){.....
$(window).resize(function(){
if (window.innerWidth > 900){
$('.index_article').remove();
$('.index_table).find('tr:first').append('<td rowspan="3" class="index_article"></td>');
}
}
hope this will help you, make sure to include fisrt jquery.min.js
I've got a table with checkboxes. When the checkbox is checked there should be an twitter bootstrap popover with a form in it. This form is dependent to its checkbox. therefore i will render hidden forms and show them in an twitter popover.
But when I try to access the popover content with $(this).next(".my_class").html(); it's not working. When I render fixed content with return $("#my_id").html();
Here is an example (here as jsfiddle):
My html tables
<h4 class="hide">fixed form</h4>
<div id="popover-head" class="popover-head hide">fixed form</div>
<div id="popover-content" class="popover-content hide">
<form>
<!-- my form -->
</form>
</div>
<h4>table one working popover</h4>
<table class="table table-striped">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input title="" class="checkbox_cancel" id="checkbox1" type="checkbox">
</td>
</tr>
<tr>
<td>
<input title="" class="checkbox_cancel" id="checkbox1" type="checkbox">
</td>
</tr>
</tbody>
</table>
<h4>table two not working popover</h4>
<table class="table table-striped">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
</td>
<div id="popover-head" class="popover-head hide">dynamic form 1</div>
<div id="popover-content" class="popover-content hide">
<form>
<!-- my form -->
</form>
</div>
</tr>
<tr>
<td>
<input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
</td>
<div id="popover-head" class="popover-head hide">dynamic form 2</div>
<div id="popover-content" class="popover-content hide">
<form>
<!-- my form -->
</form>
</div>
</tr>
</tbody>
</table>
My javascript:
//working
$('.checkbox_cancel').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
//not working
$('.checkbox_cancel2').popover({
html : true,
title: function() {
return $(this).next(".popover-head").html();
},
content: function() {
return $(this).next(".popover-content").html();
}
});
How could I get this to work with dynamic selection?
Looks like your code should work but your html isn't correct (next is the next element) the following should work:
<tr>
<td>
<input title="" class="checkbox_cancel2" id="checkbox1" type="checkbox">
<div id="popover-head" class="popover-head hide">dynamic form 1</div>
<div id="popover-content" class="popover-content hide">
<form>
<!-- my form -->
</form>
</div>
</td>