I need the below code to be generated dynamically
<div class="app" style="display:none">
<input id="application" type="radio" name="choice" value="Albert">
<label>Albert</label>
<input id="application" type="radio" name="choice" value="Huston">
<label>Huston</label>
</div>
<div class="marks" style="display:none">
<input id="subject" type="radio" name="choice" value="ten">
<label>10</label>
<input id="subject" type="radio" name="choice" value="twelve">
<label>12</label>
</div>
The class, id, value and the string between the label are to be dynamically added. I will be getting these values from a for loop, which I am iterating over the rows in a table. Please help.
Maybe like this:
var first={
class:'app',
id:'application',
values:[['Albert', 'Albert'],['Huston', 'Huston']]
};
var second={
class:'marks',
id:'subject',
values:[['ten', 10],['twelve', 12]]
};
function add_dynamic_al(_obj){
var div=$('<div/>');
div.addClass(_obj.class);
//div.hide(); //if need display:none
var lbl1=$('<label/>');
var inp1=$('<input/>');
inp1.attr({'id':_obj.id, 'type':'radio', name:'choice',}).val(_obj.values[0][0]);
lbl1.append(inp1).append(_obj.values[0][1]); //for structure '<label><input />name</label>'
div.append(lbl1);
var lbl2=$('<label/>');
var inp2=$('<input/>');
inp2.attr({'id':_obj.id, 'type':'radio', name:'choice',}).val(_obj.values[1][0]);
lbl2.append(inp2).append(_obj.values[1][1]);
div.append(lbl2);
$('body').append(div);
}
div{
display:inline-block;
border-style:solid;
border-width:2px;
border-color:gray;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="add first element" onclick="add_dynamic_al(first);" />
<input type="button" value="add second element" onclick="add_dynamic_al(second);" />
Perhaps this is what you need:
var my_obj=[{
class:'app',
id:'application',
values:[['Albert', 'Albert'],['Huston', 'Huston']]
},{
class:'marks',
id:'subject',
values:[['ten', 10],['twelve', 12]]
}];
function create_dynamic_el_from_obj_arr(_obj_arr){
for(var key in _obj_arr){
var cur_el=_obj_arr[key];
var div=$('<div/>');
div.addClass(cur_el.class);
//div.hide(); //if need display:none
var cur_el_values=_obj_arr[key].values;
for(var kv in cur_el_values){
var lbl=$('<label/>');
var inp=$('<input/>');
inp.attr({'id':cur_el.id, 'type':'radio', name:'choice',}).val(cur_el_values[kv][0]);
lbl.append(inp).append(cur_el_values[kv][1]);
div.append(lbl);
}
$('body').append(div);
}
}
div{
display:inline-block;
border-style:solid;
border-width:2px;
border-color:gray;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" value="add all element" onclick="create_dynamic_el_from_obj_arr(my_obj);" /><br/>
Related
I am trying to make a quiz app with many questions and Yes or No answers.
So I made a design to make a radio button look like a button and for it to be checked if selected.
I also used javascript to make a slider for that questions.
So the problem is the checked design worked with the first question in the slider but would not work for the rest of the questions.
Here is my code, I don't think that the error in JS but I included it anyways.
const myslide = document.querySelectorAll('.myslide'),
dot = document.querySelectorAll('.dot');
let counter = 1;
slidefun(counter);
let timer = setInterval(autoSlide, 8000);
function plusSlides(n) {
counter += n;
slidefun(counter);
resetTimer();
}
function currentSlide(n) {
counter = n;
slidefun(counter);
resetTimer();
}
function resetTimer() {
clearInterval(timer);
timer = setInterval(autoSlide, 8000);
}
function slidefun(n) {
let i;
for(i = 0;i<myslide.length;i++){
myslide[i].style.display = "none";
}
for(i = 0;i<dot.length;i++) {
dot[i].className = dot[i].className.replace(' active', '');
}
if(n > myslide.length){
counter = 1;
}
if(n < 1){
counter = myslide.length;
}
myslide[counter - 1].style.display = "block";
dot[counter - 1].className += " active";
}
.txt input[type="radio"] {
opacity:0.011;
z-index:100;
}
.txt label {
padding:5px;
border:1px solid #000;
border-radius:10px;
cursor:pointer;
}
.txt label:hover {
background: rgb(238, 255, 5);
}
input[type="radio"]:checked + label {
background:yellow;
}
<div class="myslide fade">
<div class="txt">
<p>What is the question two ?</p>
<input id="yes" type='radio' name="result" value="yes">
<label for="yes">Yes</label>
<br>
<input id="no" type='radio' name="result" value="no">
<label for="no">No</label>
<br>
</div>
<img src="{% static 'img/img1.jpg'%}" style="width: 100%; height: 100%;">
</div>
<div class="myslide fade">
<div class="txt">
<p>What is the question one ?</p>
<input id="yes" type='radio' name="Question1" value="yes">
<label for="yes">Yes</label>
<br>
<input id="no" type='radio' name="Question1" value="no">
<label for="no">No</label>
<br>
</div>
<img src="{% static 'img/img1.jpg'%}" style="width: 100%; height: 100%;">
</div>
Thanks in advance
The problem is that your radio inputs can't have the same ids and have the labels target those same ids. Ids are supposed to be a unique occurrence in the DOM, and the labels are also supposed to reference those unique occurrences. So you need to change the id of the inputs and the for of the labels to correlate to each other specifically.
For example, changing them to "yes1 & no1, and yes2 & no2". This should solve your issue:
<p>What is the question one ?</p>
<input id="yes1" type='radio' name="Question1" value="yes">
<label for="yes1">Yes</label>
<br>
<input id="no1" type='radio' name="Question1" value="no">
<label for="no1">No</label>
and
<p>What is the question two ?</p>
<input id="yes2" type='radio' name="result" value="yes">
<label for="yes2">Yes</label>
<br>
<input id="no2" type='radio' name="result" value="no">
<label for="no2">No</label>
After click on submit button I get the result in innerhtml. I need to copy the results using the copy button. Please help me out....
Script mentioned below :enter link description here
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.form-row{
margin-bottom:18px;
}
div {
background-color: lightblue;
width: 650px;
padding: 35px;
}
<!--<div> I don't think that you really want this here -->
</style>
</head>
<body>
<script type="text/javascript">
function getDisplay(){
var items=document.getElementsByName('acs');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
}
function getclear(){
document.getElementById("display").innerHTML = "";
var items = document.getElementsByName('acs');
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox') items[i].checked = false;
}
}
</script>
<div id="whole">
<font size="4">Profile Edited :</font>
<p>
<input type="checkbox" name="acs" value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
<input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
<input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
<input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
</p>
<p>
<button onclick="getDisplay();" style="height:30px; width:100px" >Submit</button>
<button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
<button onclick="getCopy();" style=" height:30px; width:100px" >Copy</button>
</p>
</div>
<font size="5">Notes:</font>
<div id="display"></div>
</body>
</html>
It is a bit tricky, because as it is not a TextElement you can not select() it as a text.
So what we do here is to get the innerText of the div element, then we create a Textarea element an we append the value, then we can select() it and copy it to the clipboard, here you have the working code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.form-row{
margin-bottom:18px;
}
div {
background-color: lightblue;
width: 650px;
padding: 35px;
}
<!--<div> I don't think that you really want this here -->
</style>
</head>
<body>
<script type="text/javascript">
function getDisplay(){
var items=document.getElementsByName('acs');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
}
function getclear(){
document.getElementById("display").innerHTML = "";
var items = document.getElementsByName('acs');
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox') items[i].checked = false;
}
}
function copyToClipBoard() {
var str = document.getElementById('display').innerText;
var el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
</script>
<div id="whole">
<font size="4">Profile Edited :</font>
<p>
<input type="checkbox" name="acs" value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
<input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
<input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
<input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
</p>
<p>
<button onclick="getDisplay();" style="height:30px; width:100px" >Submit</button>
<button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
<button onclick="copyToClipBoard();" style=" height:30px; width:100px" >Copy</button>
</p>
</div>
<font size="5">Notes:</font>
<div id="display"></div>
</body>
</html>
Ok, I think this is what you want...
Javascript:
function copyToClipboard() {
document.querySelector('#display').select();
document.execCommand('copy');
}
And I couldn't figure out how to take it from anything but an input, so if you do this, and then style the input with no borders so it doesn't look like an input...
<button id="copyToClipboard" onclick="copyToClipboard()" style=" height:30px; width:100px" >Copy</button>
<input id = "display" name="exampleClipboard" style="width:500px; border: none;" type="text">
I played around with the first answer and couldn't get it to work for me either. So I tried it this way. Note: I'm giving you a function that creates a dialog for testing. The actual function is shown below. But I switched to a textarea instead of a div which may not be quite what you want.
function innerHtmlTest() {
var html='<textarea rows="2" cols="40" id="display" style="border:none;">This is just a text string.</textarea>';
html+='<br /><input type="button" value="Copy" onClick="getHtml();" />';
html+='<br /><textarea rows="2" cols="40" id="dsply" placeholder="Paste Here"></textarea>';
html+='<script>function getHtml(){ document.getElementById("dsply").select();document.execCommand("copy");}</script>';
var userInterface=HtmlService.createHtmlOutput(html);
SpreadsheetApp.getUi().showModelessDialog(userInterface, "Copy");
}
function getHtml(){
document.getElementById("display").select();
document.execCommand("copy");
}
So perhaps you would like to change to a text area instead of a div. I use this technique with text boxes a lot but never tried it before with a div.
UPDATE: To future readers
The solution has been provided make sure you look at my answer and charlietfl's answers below.
Post before solution
I have this script that I made that sends values to a page call x.php. The way it works is each red container has it's own inputs and button so if you click on any
of those red container button it will send their container input values to page x.php so those values can be echoed.
The problem is that it can send any of the buttons request but it only sends the first red container input values if I would do that to the other containers it just sends the first red container input values to be echoed
but not their own so how can I do it in a way where it will send their red container values.
This is how it will look like if I get it to work the way I want it to work
.gif-screenshot
Here is the code
index.php
<style>
.dataContainer{
background-color: red;
width: 185px;
position: relative;
margin-bottom: 25px;
}
.dataContainerDesign .a,.b,.send{
display: block;
margin: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
var containerButtons = document.querySelectorAll('.dataContainer .send');
for (var i = 0; i < containerButtons.length; i++) {
containerButtons[i].addEventListener('click', perContainer);
}
var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
document.querySelector('.dataContainer').innerHTML= xhr.responseText;
}
};
function perContainer(){
var data = new FormData();
//Var structrue
var a= document.querySelector('.a').value;
var b= document.querySelector('.b').value;
//
//Data var
data.append('a', a);
data.append('b', b);
//
xhr.open('POST','x');
xhr.send(data);
}
});
</script>
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text'>
<input class='b' type='text'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
x.php
<p style='display: inline-block;'>
<?php
$a= $_POST['a'];
$b= $_POST['b'];
echo 'Sent Values: ';
echo $a.','.$b;
?>
</p>
The problem is that document.querySelector('.a') will return the first element with that class found in the document.
You need to look for that class within the specific button's siblings
One way is to isolate the parent of the button and query within that parent. I left out the XHR and FormData just to simplify demo and to log the associated values to console instead
document.addEventListener('DOMContentLoaded', function() {
var containerButtons = document.querySelectorAll('.dataContainer .send');
for (var i = 0; i < containerButtons.length; i++) {
containerButtons[i].addEventListener('click', perContainer);
}
});
function perContainer(evt) {
// from event object get button clicked
let button = evt.currentTarget,
// and isolate the parent container
div = button.parentNode;
//query only within the parent container
var a= div.querySelector('.a').value;
var b= div.querySelector('.b').value;
console.log([a, b]);
}
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text' value="a1">
<input class='b' type='text' value="b1">
<button class='send'>Send</button>
</div>
<!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text' value="a2">
<input class='b' type='text' value="b2">
<button class='send'>Send</button>
</div>
<!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text' value="a3">
<input class='b' type='text' value="b3">
<button class='send'>Send</button>
</div>
<!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='a' type='text' value="a4">
<input class='b' type='text' value="b4">
<button class='send'>Send</button>
</div>
<!--</dataContainer>-->
Thanks to charlietfl for teaching me how to solve this because of charlietfl I was able to solve this so i'm ma reward charlietfl's answer as the hint solution but I combine charlietfl's
way and my way just in case if any future reader wants to know how this looks completed, how I always intended it to be.
Ok here is the completed code that works.
index.php
<style>
.dataContainer{
background-color: red;
width: 205px;
position: relative;
margin-bottom: 25px;
}
.dataContainerDesign .first_name,.last_name,.send{
display: block;
margin: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
var dataContainerSendButtons = document.querySelectorAll('.dataContainer .send');
for (var i = 0; i < dataContainerSendButtons.length; i++) {
dataContainerSendButtons[i].addEventListener('click', dataContainerProcess);
}
function dataContainerProcess(execution){
var send = execution.currentTarget;
var dataContainer = send.parentNode;
var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
dataContainer.innerHTML= xhr.responseText;
}
}
var data = new FormData();
//Var structrue
var first_name= dataContainer.querySelector('.first_name').value;
var last_name= dataContainer.querySelector('.last_name').value;
var image= dataContainer.querySelector('.image').files[0];
//
//Data var
data.append('first_name', first_name);
data.append('last_name', last_name);
data.append('image',image);
//
xhr.open('POST','x');
xhr.send(data);
}
});
</script>
<div class='dataContainer dataContainerDesign'>
<input class='first_name' type='text'>
<input class='last_name' type='text'>
<input class='image' type='file'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='first_name' type='text'>
<input class='last_name' type='text'>
<input class='image' type='file'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='first_name' type='text'>
<input class='last_name' type='text'>
<input class='image' type='file'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
<div class='dataContainer dataContainerDesign'>
<input class='first_name' type='text'>
<input class='last_name' type='text'>
<input class='image' type='file'>
<button class='send'>Send</button>
</div><!--</dataContainer>-->
x.php
<?php
$first_name=$_POST['first_name'];
$last_name=$_POST['last_name'];
if($_FILES['image']['name'] != '')
{
$image_test = explode('.', $_FILES['image']['name']);
$image_ext = end($image_test);
$image_prefix= 'random';
$image_file_name = $image_prefix . uniqid() . '.' . $image_ext;
$image_directory = 'images/';
$image_location = $image_directory.$image_file_name;
move_uploaded_file($_FILES['image']['tmp_name'], $image_location);
$profile_image= $image_location;
}
?>
<style>
img{
display: block;
width: 200px;
height: 200px;
margin: auto;
}
h1{
text-align: center;
margin: 0;
}
</style>
<img src='<?php echo $profile_image; ?>'>
<h1><?php echo $first_name; ?></h1>
<h1><?php echo $last_name; ?></h1>
First of all, sorry if the question seems really dumb, I'm not really used to Javascript.
I'm looking for a script changing some text depending on what the user wrote. Here's what I'm looking for :
There is 3 inputs (A, B and C) for 1 Text.
The "Text" will show the addition of A, B and C.
Example : Input A is 3, B is 5, C is 10. Text = 18.
I got some script ready, but it's only the "bones" of the script..
function ShowPointsNeeded(text){
document.getElementById("result").innerHTML =text; }
#result {
height:50px;
width:50px;
border:1px solid #999;
font-size:25px;
text-align:center;
margin-left:15px;
}
<div id="text">
<input id="slide" type="text" value=""
onchange="ShowPointsNeeded(this.value);" />
</div>
<div id="result"></div>
-> It's just a basic script, showing the content of the input in a little box. Now, what I would like to have is 3 inputs and the little box to show the addition of them.
Thanks !
If want to calculate sum, of all inputs then you can use below logic :
function ShowPointsNeeded(){
//while doing calculation you have to consider all textboxes every time,
//so you have to derive a way to get all your related textboxes at once,
//e.g. : i have use name attribute to make all input boxes relate to each
//other.
var allInputs = document.getElementsByName("numbers");
var sum=0.0;
for(var i=0;i<allInputs.length;i++){
if(allInputs[i].value.length>0)
sum= sum+parseFloat(allInputs[i].value);
//parsing float because user can input decimals as well
}
document.getElementById("result").innerHTML=sum;
}
<div id="text">
<input id="slide" type="text" value="" name="numbers"
onchange="ShowPointsNeeded();" />
<input id="slide" type="text" value="" name="numbers"
onchange="ShowPointsNeeded();" />
<input id="slide" type="text" value="" name="numbers"
onchange="ShowPointsNeeded();" />
</div>
<div id="result" style="height:50px;width:50px;border:1px solid #999; font-size:25px; text-align:center; margin-left:15px;"></div>
you will need to sum all input values every time ShowPointsNeeded() is called. you can use reduce() for this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function ShowPointsNeeded(){
document.getElementById("result").innerHTML = $('input').toArray().reduce((acc,cur) => acc + Number(cur.value), 0);
}
</script>
<div id="text">
<input id="slide1" type="text" value=""
onchange="ShowPointsNeeded();" />
<input id="slide2" type="text" value=""
onchange="ShowPointsNeeded();" />
<input id="slide3" type="text" value=""
onchange="ShowPointsNeeded();" />
</div>
<div id="result" style="height:50px;width:50px;border:1px solid #999; font-size:25px; text-align:center; margin-left:15px;"></div>
JavaScript Number() function for convert from text to number:
function ShowPointsNeeded() {
var values = [];
var elements = document.getElementsByTagName('input');
for (var i = 0; i < elements.length; i++) {
values.push(elements[i].value);
}
var sum = values.reduce(sumElements, 0);
var resultElement = document.getElementById("result");
resultElement.innerHTML = sum;
}
function sumElements(total, num) {
return Number(total) + Number(num);
}
<div id="text">
<input type="text" value="" onchange="ShowPointsNeeded(this);" />
<input type="text" value="" onchange="ShowPointsNeeded(this);" />
<input type="text" value="" onchange="ShowPointsNeeded(this);" />
</div>
<div id="result" style="height:50px;width:50px;border:1px solid #999; font-size:25px; text-align:center; margin-left:15px;"></div>
For inputs don't needs id attribute.
I'm working on a multi stage form with the following enabling the next/previous button to transit the form submission from one stage to the other:
$("input[name='next']").click(function(){
var output = validate();
if(output) {
var current = $("#signup-step.active");
var next = current .next(); //Just use .next() here to get the nextSibling of this li
if(next.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+next.attr("id")+"-field").show();
$("input[name='back']").show();
$("input[name='finish']").hide();
$(".active").removeClass("active");
next.addClass("active");
/* if($(".active").attr("id") == $("#signup-step.li").last().attr("id")) {
$("input[name='next']").hide();
$("input[name='finish']").show();
} */
if ( next.is(':last-child') ) {
$("input[name='next']").hide();
$("input[name='finish']").show();
}
}
}
});
$("input[name='back']").click(function(){
var current = $(".active");
var prev = $(".active").prev("#signup-step.li");
if(prev.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+prev.attr("id")+"-field").show();
$("input[name='next']").show();
$("input[name='finish']").hide();
$(".active").removeClass("active");
prev.addClass("active");
/*if($(".active").attr("id") == $("#signup-step.li").first().attr("id")) {
$("input[name='back']").hide();
}
*/
if ( next.is(':last-child') ) {
$("input[name='back']").hide();
}
}
});
By #signup-step:li I'm trying to refer to the li elements in a specific UL element because there two other UL element on the page: 1) UL of main menu, 2) UL of sidebars. Now since the main menu's UL comes before the form itself, the next/back button activate the menu items of the main menu rather the form stages. So being able to specify the UL referred will resolve this.
Kindly advise on the the correct for mat for selecting #signup-step:li in the code above?
Here is the form:
<ul id="signup-step">
<li id="Initiate" class="active">Initiate</li>
<li id="Strive">Strive</li>
<li id="End">End</li>
</ul>
<form name="frmRegistration" id="signup-form" method="post" enctype="multipart/form-data" action="sendemail.php">
<div id="initiate-field">
<label>Name of Organization</label><span id="coyname-error" class="signup-error"></span>
<div><input type="text" name="coyname" id="coyname" class="demoInputBox"/></div>
<label>Certificate of Incorporation No.</label><span id="cacnum-error" class="signup-error"></span>
<div><input type="text" name="cacnum" id="cacnum" class="demoInputBox"/></div>
<label>Registered Office Address</label><span id="regofficeaddy-error" class="signup-error"></span>
<div>
<textarea cols="30" rows="4" name="regofficeaddy" id="regofficeaddy" class="demoInputBox" class = "max10"></textarea>
</div>
<label>Operations Address</label><span id="opsaddy-error" class="signup-error"></span>
<div>
<textarea cols="30" rows="4" name="opsaddy" id="opsaddy" class="demoInputBox" class = "max10"></textarea>
</div>
</div>
<div id="strive-field" style="display:none;">
<label>Location of workshop/facility if different from office address given in the Structure Section:</label><span id="facilityloc-error" class="signup-error"></span>
<div>
<textarea cols="60" rows="8" name="facilityloc" id="facilityloc" class="demoInputBox" class = "max10"></textarea>
</div>
<label>Size of facility (in sq meters):</label><span id="facilitysize-error" class="signup-error"></span>
<div><input type="text" name="facilitysize" id="facilitysize" class="demoInputBox"/></div>
<label>Does your organization own or hire equipment:</label>
<div>
<input type="radio" name="facilityownhire" id="facilityownhire" value="Own"> Own
<input type="radio" name="facilityownhire" id="facilityownhire" value="Hire"> Hire <span id="facilityownhire-error" class="signup-error"></span>
</div>
</div>
<div id="end-field" style="display:none;">
<label>Does your Organization have an HSE Manual?</label>
<div>
<input type="radio" name="hsemanual" id="hsemanual" value="Yes"> Yes
<input type="radio" name="hsemanual" id="hsemanual" value="No"> No <span id="hsemanual-error" class="signup-error"></span>
</div>
<div id="hseevidenceBOX">
<label>If yes, please attach evidence</label><span id="hseevidence-error" class="signup-error"></span>
<div>
<input type="file" name="vendorfile[]" id="hseevidence" class="demoInputBox" />
</div>
</div>
<label>Does your Organization have a Safety Policy?</label>
<div>
<input type="radio" name="orgsafepolicy" id="orgsafepolicy" value="Yes"> Yes
<input type="radio" name="orgsafepolicy" id="orgsafepolicy" value="No"> No <span id="orgsafepolicy-error" class="signup-error"></span>
</div>
</div>
<div>
<input class="btnAction" type="button" name="back" id="back" value="Back" style="display:none;">
<input class="btnAction" type="button" name="next" id="next" value="Next">
<input class="btnAction" type="submit" name="finish" id="finish" value="Send" style="display:none;">
</div>
</form>
Thanks everyone for responding. I solve the problem of conflict with the main menu of the page I change the .active class to .here in the UL HTML, CSS and jquery script. I also reliazed from this fiddle http://jsfiddle.net/GrahamWalters/sgNH4/2/ i gained from another thread that the next("#signup-step.li"); should be next("#signup-step li");
UL HTML
<ul id="signup-step">
<li id="Initiate" class="active">Initiate</li>
<li id="Strive">Strive</li>
<li id="End">End</li>
</ul>
CSS
#signup-step li.here{background-color:#FF0000;}
.here{color:#FFF;}
JQUERY
$("#next").click(function(){
var output = validate();
if(output) {
var current = $(".here");
var next = $(".here").next("#signup-step li");
if(next.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+next.attr("id")+"-field").show();
$("#back").show();
$("#finish").hide();
$(".here").removeClass("here");
next.addClass("here");
if($(".here").attr("id") == $("#signup-step li").last().attr("id")) {
$("#next").hide();
$("#finish").show();
}
}
}
});
$("#back").click(function(){
var current = $(".here");
var prev = $(".here").prev("#signup-step li");
if(prev.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+prev.attr("id")+"-field").show();
$("#next").show();
$("#finish").hide();
$(".here").removeClass("here");
prev.addClass("active");
if($(".here").attr("id") == $("li").first().attr("id")) {
$("#back").hide();
}
}
});