I am trying to get my button selections to display in a table on my web application. Bellow you find the pieces of code that relate to my 1. My function which allows for the selections (may not even be relevant..), 2. the buttons which you can select in order to set the parameters, and 3 the table with class name and the rows where they will go. I've been struggling with this! Please Help!
My function:
function setClip(val)
{
clip=val;
}
function setZoom(val)
{
zoom=val;
}
function geoMap(val)
{
gmap=val;
}
function swap(imgNumber)
{
if(clip==true & zoom==false & gmap==false)
document.getElementById("default").src=imgNumber+"clip.jpg";
else if(clip==false & zoom==true & gmap==false)
document.getElementById("default").src=imgNumber+"zoom.jpg";
else if(clip==false & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"zoomp.jpg";
else if(clip==true & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"clipzoomp.jpg";
else if(clip==true & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"clipp.jpg";
else if(clip==true & zoom==true & gmap==false)
document.getElementById("default").src=imgNumber+"clipzoom.jpg";
else if(clip==false & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"p.jpg";
else
document.getElementById("default").src=imgNumber+".jpg";
}
My Buttons:
<input type ="button" id="button3" value="Apply Mask" onclick="setClip(true)">
<input type ="button" id="button3" value="No Mask" onclick="setClip(false)">
<input type="button" id="button3" value="Maintain Zoom In" onClick="setZoom(true)">
<input type="button" id="button3"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" id="button3" value="GeoMap On" onClick="geoMap(true)">
<input type="button" id="button3" value="GeoMap Off" onClick="geoMap(false)">
The table I would like my selections to be displayed in, basically I want the values of the selected buttons to but put in the table after they have been selected
<table class="status" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr>
</table>
I think your best bet here is using jQuery. It's far easier to manipulate than Javascript and was designed to easily manipulate objects. If you know CSS and a little Javascript, it's easy to pick up too. You don't even have to host it, as Google hosts it. All you need to do is add the following source code to the top where your scripts are:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var buttonCount=1;
$(document).ready(function() {
$("input[type='button']").click(function() {
if(buttonCount <= 3) {
//make sure that there are no duplicates
if($(this).get(0).className != "buttonUsed")
{
$(this).get(0).className = "buttonUsed";
var htmlString = $(this).attr('value');
$('#sel' + buttonCount).html(htmlString);
buttonCount++;
}
}
});
});
... The rest of your script
I notice that you have been using IDs like one might use classes. I would advise you to consider using the class attribute for things like "button" and make IDs more unique. It will make it easier to code with Javascript, as JS usually follows IDs and works best if it targets only one element per ID. In any case I did rename your IDs. If you have CSS you can rename your CSS classes. Just note that in my code I renamed a class so that you can't choose more than one. That might work for you anyway, because then your button that has been used can look different from the unused buttons.
Anyway, here is the HTML, adapted:
<table class="status" id="buttonStatus" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr><tr>
<td width="200" align="center" id="sel1"> </td>
<td width="200" align="center" id="sel2"> </td>
<td width="200" align="center" id="sel3"> </td>
</tr>
</table>
</body>
Let me know if this works.
Update
To edit as you desire, use this:
$(document).ready(function() {
$("input[type='button']").click(function() {
//make sure that there are no duplicates
var buttonClassName = $(this).get(0).className;
if(buttonClassName != "buttonUsed")
{
var buttonID = $(this).attr('id');
var firstPart = buttonID.substring(0,6);
var secondPart = buttonID.substring(6,7);
var thirdPart = buttonID.substring(7);
var newThirdPart;
switch(thirdPart)
{
case "a" : newThirdPart = "b"; break;
case "b" : newThirdPart = "a"; break;
}
$(this).get(0).className = "buttonUsed";
$("#" + firstPart + secondPart + newThirdPart).get(0).className = "button";
var htmlString = $(this).attr('value');
$('#sel' + secondPart).html(htmlString);
}
});
});
And the HTML
<body>
<input type ="button" class="button" id="button1a" value="Apply Mask" onclick="setClip(true)">
<input type ="button" class="button" id="button1b" value="No Mask" onclick="setClip(false)">
<input type="button" class="button" id="button2a" value="Maintain Zoom In" onClick="setZoom(true)">
<input type="button" class="button" id="button2b"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" class="button" id="button3a" value="GeoMap On" onClick="geoMap(true)">
<input type="button" class="button" id="button3b" value="GeoMap Off" onClick="geoMap(false)"><BR><BR><BR>
<table class="status" id="buttonStatus" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr><tr>
<td width="200" align="center" id="sel1"> </td>
<td width="200" align="center" id="sel2"> </td>
<td width="200" align="center" id="sel3"> </td>
</tr>
</table>
</body>
Note on CSS
This JQuery changes the classname of the active button to buttonUsed, which means you can create a CSS to make the button look highlighted. If you'd rather not do that, and would rather have everything stay as button, you don't actually need it in the new example (whereas in my initial stab at it, it was very necessary).
$(document).ready(function() {
$("input[type='button']").click(function() {
//make sure that there are no duplicates
var buttonID = $(this).attr('id');
var secondPart = buttonID.substring(6,7);
var htmlString = $(this).attr('value');
$('#sel' + secondPart).html(htmlString);
});
});
Much simpler, in fact. At least I showed you the sort of things jQuery is capable of. Whether you choose to use it or not is up to you. Happy coding!
Related
I have written the below code to display a selection of images within a tag when a certain button is clicked on a page. The Jquery to hide the elements on page load works, but the rest of the code does nothing. Can anyone help me figure this out please?
$(document).ready(function(){
//Create Array for images
var vanImgArr = new Array("<img src='img\yvr\coalharbour.jpg'>", "<img src='img\yvr\lgbridge.jpg'>", "<img src='img/yvr/yaletown.jpg'/>", "<img src='img\yvr\lgbridge2.jpg'>");
var sgpImgArr = new Array("<img src='img\sgp\elginbridge.jpg'>", "<img src='img\sgp\mbfc.jpg'>", "<img src='img\sgp\sgpdusk.jpg'>", "<img src='img\sgp\sgppano.jpg'>");
var aniImgArr = new Array("<img src='img\ani\cat1.jpg'>", "<img src='img\ani\cat2.jpg'>", "<img src='img\ani\dog1.jpg'>", "<img src='img\ani\tandd.jpg'>");
var absImgArr = new Array("<img src='img\abs\abs1.jpg'>", "<img src='img\abs\abs2.jpg'>", "<img src='img\abs\abs3.jpg'>", "<img src='img\abs\abs4.jpg'>");
var clickedId;
var idx = 0;
//to display images
function displayImgs(arr)
{
if(idx <= arr.length)
{
('#pic').hide();
('#pic').html(arr[idx]);
('#pic').fadeIn('slow');
if(idx > arr.length)
{
idx = 0;
}
else
{
idx++;
}
}; //button click close
}//displayImgs method close
//on page load
$('p').hide();
//More info Action
$('#more').hover(function(){
$('#info, #info2').fadeIn('slow');
});
//Button Click Action
$(':button').click(function(){
clickedId = this.id;
alert(clickedId); //testing
switch(clickedId)
{
case 'yvr':
displayImgs(vanImgArr);
break;
case 'sgp':
displayImgs(sgpImgArr);
break;
case 'ani':
displayImgs(aniImgArr);
break;
case 'abs':
displayImgs(absImgArr);
break;
}//switch/case close
});//button click close
});
Here is my HTML code to go with the above
<!DOCTYPE html>
<title>Ricky Deacon CSIS3380-001, Assignment 2, Summer 2017</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
<table class="t1">
<tr>
<th width="25%" rowspan="3"><img src="img\rick2.JPG" alt="RD portrait goes here"></th>
<th width="50%" colspan="2">Rick Deacon</th>
<th width="25%" rowspan="3"><img src="img\rick1.JPG" alt="RD portrait goes here"></th>
</tr>
<tr>
<td id="subtitle" colspan="2">Photography Showcase</td>
</tr>
<tr>
<td id="desc" colspan="2">Click the corresponding button to display images from your chosen category.</td>
</tr>
</table>
<br/>
<br/>
<table class="t2">
<tr>
<th>
<input id="van" type="button" name="submit" value="Show Vancouver Images"/>
</th>
<th>
<input id="sgp" type="button" name="submit" value="Show Singapore Images"/>
</th>
<th>
<input id="ani" type="button" name="submit" value="Show Animal Images"/>
</th>
<th>
<input id="abs" type="button" name="submit" value="Show Abstract Images"/>
</th>
</tr>
<tr>
<th>
<p id="info">Rick Deacon's Flickr</p>
</th>
<th colspan="2">
<h1 id="more">More Info and Portfolio Links</h1>
</th>
<th>
<p id="info2">Prints For Sale</p>
</th>
</tr>
</table>
<br/>
<br/>
<p id="pic" align="center">Image Goes Here</p>
I think you've forgotten about the $ sign on your code.
Your display function should be like this
function displayImgs(arr){
if(idx <= arr.length)
{
$('#pic').hide();
$('#pic').html(arr[idx]);
$('#pic').fadeIn('slow');
if(idx > arr.length)
{
idx = 0;
}
else
{
idx++;
}
}; //button click close
}//displayImgs
Also, shouldn't you use one idX for each array?
Your JavaScript refers to elements which don't exist in your markup.
First, there are no elements with the id of "more", so the "More Info" action will never run. Second, you are targeting a button element in your "Button Click" action, but I see no button elements either--just <input type="button" />, which you must specify using $(":button, input[type='button']") (Either one of those two selectors will work).
You are selecting button tag while there is no button tag in your html. You should select input tag using $('input[type="button"]')
but this might not be good practice at the time of debugging so you should assign input tag a name and then select them using
$('input[name="elementname"]').
Second .In "this.id" is not proper syntax you should use $(this).attr('id');
I have two yes no buttons that i wish to use at different stages of the program for different functions.
As they are linked to one function
<input type="button" value="Yes" class="yes" onclick="*choice1(1)*;" />
<input type="button" value="No" class="no" onclick="*choice1(0)*;" />
how can i make them useful for other functions as well, so i would not need more redundant buttons.
Im trying to create an interactive story. That at different stages there is a choice to make between two options. I am using an if else method, which makes it hard as far as i understand to designate a button to a function - because each function uses two options each time.
Here is the code (thank you very much:):
<script type="text/javascript">
var photo = "photo";
var edgar = "edgar"
var x;
function choice1(x){
if (x == 1)
{
document.getElementById("photo").src = "images/dragon1.jpg";
document.getElementById("stage1").innerHTML = "Once upon a time
there was a dragon";
setTimeout("choice2()",5*1000);
}
else if (x == 0)
{
document.getElementById("photo").src = "images/sea.jpg";
document.getElementById("stage1").innerHTML = "Would you like to
listen to some music?";
document.getElementById("edgar").play();
}
}
function choice2(x){
document.getElementById("photo").src = "images/dragon9.jpg";
document.getElementById("stage1").innerHTML = "Was he a friendly
dragon?";
if (x == 1)
{document.getElementById("photo").src = "images/dragon2.jpg";
document.getElementById("stage1").innerHTML = "He had many
friends and he liked to party";
}
else if (x == 0)
{ document.getElementByID ("photo").src = "images/dragon3.jpg";
document.getElementById("stage1").innerHTML = "He spent his days
thinking about the wrongs of the world";
}
}
</script>
</head>
<body>
<table align="center">
<tr>
<td colspan="2" align="center" width="800" height="300"><img
id="photo" width="800" height="300"></td>
</tr>
<tr>
<td colspan="2" align="center" width="800" height="100"><h1
id="stage1">Would you like to read a story?</h1></td>
</tr>
<tr>
<td align="center" width="400" height="200"><input type="button"
value="Yes" class="yes" onclick="choice1(1);" /></td>
<td align="center" width="400" height="200"><input type="button"
value="No" class="no" onclick="choice1(0);" /></td>
</tr>
</table>
</body>
</html>
I'm having a problem with style.display.
I want to show a submit box (which is inside a table) when I change a number and it's not working.
Here's the code:
<head>
<script>
function changedisp(Section){
if (Section.style.display=="none"){
Section.style.display=""
}
else{
Section.style.display="none"
}
}
function raisenumber(s,s1) {
var x;
x = document.getElementById(s).innerHTML;
document.getElementById(s).innerHTML = x*1 + 1;
changedisp(s1);
}
</script>
</head>
<body>
<table>
<tr>
<th><b>ID</b></th>
<th><b>number</b></th>
<th><b>buttoon</b></th>
<th><b>submit</b></th>
</tr>
<form action="modifica_inventario.php" method="post">
<tr>
<td> <b id="cell1A">item number1</b></td>
<td> <b id="cell2A">10</b></td>
<td> <button id="cell3A" type="button" onClick=raisenumber("cell2A","cell4A")>+1</button></td>
<td> <b id="cell4A" style="display: none;"> <input type="submit" value="submit"/></b>   </td>
</tr>
<tr>
<td> <b id="cell1B">item number1</b></td>
<td> <b id="cell2B">10</b></td>
<td> <button id="cell3B" type="button" onClick=raisenumber("cell2B","cell4B")>+1</button></td>
<td> <b id="cell4B" style="display: none;"> <input type="submit" value="submit"/></b>   </td>
</tr>
</form>
</table>
</body>
Well I don't know why it's not showing on and off the submit button every time a press the button...
I also tried replacing
changedisp(s1);
by
s1.style.display="";
Any comments about this?
You need to pass the actual element you are trying to hide and show to your changedisp function. In your code you are just passing the ID name of the element. Try this...
function raisenumber(s,s1) {
var x;
x = document.getElementById(s).innerHTML;
document.getElementById(s).innerHTML = x*1 + 1;
changedisp(document.getElementById(s1));
}
notice changedisp(document.getElementById(s1)); passes the actual element instead of just the ID.
You need to set it to a display type explicitly:
Section.style.display="inline";
Or inline-block, or block, or whatever you want.
A <B> is by default display:inline, so trying setting to "inline" not the empty string, "".
I am using a a href "Click Here" link in the page and if we click it will open a pop up contact form using javascript, here i need to get the value say like "id" into that popup from the a href so that i can manipulate the contact form,
Click Here
javascript function:
function showDiv(DisplayDiv) {
if (document.getElementById) { // DOM3 = IE5, NS6
if(document.getElementById("simpleMap"))
{
document.getElementById("simpleMap").style.visibility = 'hidden';
}
document.getElementById(DisplayDiv).style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.DisplayDiv.visibility = 'visible';
}
else { // IE 4
document.all.DisplayDiv.style.visibility = 'visible';
}
}
}
Popup Screen:
<div id="Showcase_10" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<form action='result.php' onSubmit="return valid()" method="post">
<input type="hidden" name="siteid" value="<? echo $_REQUEST['siteid']; ?>"> <table width="90%" bgcolor="#eff8ff" border="0" style="border:solid; border-width:1px; border-color:#ccc" align="center" cellpadding="2" cellspacing="3" class="small-content">
<tr><td width="6%"> </td>
<td colspan="2" align="left" class="subhead">Email Property Details</td>
</tr><tr><td width="6%"> </td><td class="cont">Request more information, make an appointment or ask a question. </td>
</tr>
<tr>
<td width="6%"> </td>
<td width="94%"><strong>Name</strong><br/>
<input name="name" type="text" class="field1" value=""/> <font color="#FF0000"><strong>*</strong></font></td></tr>
<tr>
<td width="6%"> </td>
<td width="94%"><strong>Your Email</strong><br />
<input name="email" type="text" class="field1" id="textfield2" value=''/> <font color="#FF0000"><strong>*</strong></font><br />
<font color="#FF0000" style="font-family: Verdana, sans-serif;font-size : 9pt;" class="form-list">
</font></td>
</tr>
<td colspan="2" align="center"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
In Javascript:
window.open ("path/to/my/new/html/page.html?id=3","mywindow");
Just like any other page, the get can be used to pass the data you need, you just may need to UrlEncode it first.
EDIT: Oh. You're referring to a modal dialog, not a popup window. Well in that case, since the data will need to be on the page fully once the page loads that way the ID can be present in the link, you have 2 basic options: 1) preload all data for all click links and store it locally in javascript, 2) break this method into an ajax call and update the modal dialog controls with the ajax data.
1) For storing it in javascript, you could easy prototype your own pseudo-class to hold all of the data for each row, allowing you to store them in an associative array by id.
function myDataItem(id, field1) {
this.id = id;
this.field1 = field1;
this.field2 = ""; // initialize a property called field2
this.getInfo = getDataItemIno;
}
function getDataItemIno() {
return this.field1 + ' ' + this.field2;
}
var items;
items[3] = new myDataItem(3, "datastring");
2) The ajax solution would be a little more complex, and I would recommend using jQuery to build/handle all of those methods in order to keep it streamlined and simple.
The easiest way is to pass the id in the url of the popup window
I have a problem that i want to access the normaltagCmt elements value:
<div id="random no">
<div id="normaltagdialog">
<table style="width:100%; height:100%" border="2px">
<tr style="width:100%; height:13%" align="left">
<td>
<label> {$LANG.TEXT}</label>
</td>
</tr>
<tr style="width:100%; height:59%; vertical-align:middle" align="center" >
<td>
<textarea id="normaltagCmt" style="width:90%; height:90%" ></textarea>
</td>
</tr>
<tr style="width:100%; height:13%">
<td>
<label> {$LANG.COLOR}</label>
</td>
</tr>
<tr style="width:100%; height:15%; ">
<td>
<table style="width:100%;height:100%" cellpadding="2" cellspacing="2">
<tr id="colorPad" align="center">
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
The script i have written above is a jquery dialog and this dialog opens many times.
i want to get the value of normaltagCmt for a particular div with a specific random id.
How can i get that in javascript?
Try $('#random_no #normaltagCmt').val().
i hope by "random no" you mean random number, you cant have a space in a ID and ill use ID14 instead of "random no".
$("#ID14 #normaltagdialog table tr td #normaltagCmt").val()
There can only be one of any ID in javascript, so you could just do $('#normaltagCmt') and it will always only return the one element.
However, if you want to check to make sure that it is a child of an element with a random id (a number that you do not know), then it will get a little trickier.
$("#normaltagCmt").filter(function() {
var valid_parent = false;
var numeric_re = /^\d+$/g;
for( var parent in $(this).parents("div") ) {
if( re.test(this.id) ) {
valid_parent = true;
break;
}
}
return valid_parent;
}
This bit of jQuery will test to make sure that the element with the specified id has a parent div with a numeric id. If it does not, then you will be left with an empty jQuery object.