var delivInfo = {};
var delivSummary = document.getElementById("deliverTo");
function processDeliveryInfo() {
let prop;
delivInfo.name = document.getElementById("nameinput").value;
delivInfo.address = document.getElementById("addrinput").value;
delivInfo.city = document.getElementById("cityinput").value;
delivInfo.email = document.getElementById("emailinput").value;
delivInfo.phone = document.getElementById("phoneinput").value;
for (prop in delivInfo) {
delivSummary.innerHTML += "<p>" + delivInfo[prop] + "</p>";
}
alert(delivSummary.innerHTML);
}
<section id="blockStyle">
<h2>Order Summary</h2>
<h3>Deliver to</h3>
<div id="deliverTo"></div>
<h3>Order</h3>
<div id="order"></div>
</section>
Im trying to add the values from delivInfo object as content to deliverTo div but it wont appear on the page, when i use alert(delivSummary.innerHTML); it seems the values are there so im really confused
check the code I have revised
var delivInfo = {};
var delivSummary = document.getElementById("deliverTo");
function processDeliveryInfo() {
let prop;
delivInfo.name = document.getElementById("nameinput").value;
delivInfo.address = document.getElementById("addrinput").value;
delivInfo.city = document.getElementById("cityinput").value;
delivInfo.email = document.getElementById("emailinput").value;
delivInfo.phone = document.getElementById("phoneinput").value;
for (prop in delivInfo) {
delivSummary.innerHTML += "<p>" + delivInfo[prop] + "</p>";
}
alert(delivSummary.innerHTML);
}
<table>
<tr>
<td>Name</td><td><input type="text" class="form-control" name="nameinput" id="nameinput"></td><tr>
<td>Address</td><td> <input type="text" class="form-control" name="addrinput" id="addrinput"></td><tr>
<td>City</td><td> <input type="text" class="form-control" name="cityinput" id="cityinput"></td><tr>
<td>Email</td><td> <input type="text" class="form-control" name="emailinput" id="emailinput"></td><tr>
<td>Phone</td><td> <input type="text" class="form-control" name="phoneinput" id="phoneinput"></td><tr>
<td> </td><td> <button class="btn btn-primary" onClick="processDeliveryInfo()">Process Info</button></td><tr>
</table>
<section id="blockStyle">
<h2>Order Summary</h2>
<h3>Deliver to</h3>
<div id="deliverTo"></div>
<h3>Order</h3>
<div id="order"></div>
</section>
Related
I have an ajax function that is actually working well but I don't know how to use it on the HTML.
What I need to achieve is that basically, attached to each checkbox there is a certain number of questions. They're all selected by default but, if I deselect one of them, the number of questions of that particular checkbox should be removed.
The function I am using is working fine (in the console) but I couldn't find a way to use it on the HTML.
I post some code for more clarity.
let subjectId;
$("#selection").on("change", function () {
const selectSubjBtn = document.getElementById("select_subject");
subjectId = $(this).children(":selected").val();
let labelText = gettext(
"Select the number of questions by moving the button to the right or left!"
);
let title = gettext("Select Number of Questions");
let selectedQuestionsNum;
$.ajax({
type: "GET",
url: "/quiz/ajax_questions/" + subjectId,
success: function (response) {
let questions = response.questions;
let topics = response.topics;
let topicQuestionNum = response.question_num_list;
if (topicQuestionNum != 0) {
let topicsObj = topics.map(function (e, i) {
return [e, topicQuestionNum[i]];
});
let subTopicHtml;
// $("#sub_topic_box").append(
// '<input class="form-check-input mt-0 ms-3" type="checkbox" value="" id="selectAll" checked aria-label="Checkbox for following text input">'
// );
topicsObj.forEach((el) => {
subTopicHtml = '<div class="row mt-3">';
subTopicHtml += '<div class="input-group mb-3">';
subTopicHtml += '<div class="input-group-text">';
subTopicHtml +=
'<input class="form-check-input selectedTopic mt-0" type="checkbox" value="' +
el[1] +
'" id="' +
el[0].id +
'" checked aria-label="Checkbox for following text input">';
subTopicHtml += "</div>";
subTopicHtml +=
'<input value="' +
el[0].name +
'" type="text" class="form-control" aria-label="Text input with checkbox" disabled>';
subTopicHtml +=
'<span class="input-group-text">' + el[1] + "</span>";
subTopicHtml += "</div></div>";
$("#sub_topic_box").append(subTopicHtml);
});
$("#selectAll").click(function () {
if (this.checked) {
$(":checkbox").each(function () {
this.checked = true;
});
} else {
$(":checkbox").each(function () {
this.checked = false;
});
}
});
let selectedQuestionTopic =
document.getElementsByClassName("selectedTopic");
let selectedCheckboxes = [];
let selectedBoxesNum;
function selectedTopics() {
selectedCheckboxes = [];
let checked = document.querySelectorAll(
"[type='checkbox']:checked"
);
checked.forEach(function (el) {
selectedCheckboxes.push(Number(el.value));
selectedBoxesNum = selectedCheckboxes.reduce(
(pv, cv) => pv + cv,
0
);
});
console.log(selectedBoxesNum);
return selectedBoxesNum;
}
selectedQuestionTopic.forEach(function (el) {
el.addEventListener("change", function () {
selectedTopics();
});
});
quizBox.innerHTML = `
<div class="h5 mb-3">${title}</div>
<div class="row mt-3">
<label for="customRange1" class="form-label">${labelText}</label>
<div class="input-group">
<input type="text" class="form-control" id="textInput" value="${selectedQuestionsNum}" oninput="${selectedQuestionsNum};" >
<span class="input-group-text">on ${
questions.length
}</span>
<input type="range" name="question_number" class="form-range mt-3" min="0" max="${
questions.length
}" value="${
questions.length
}" id="customRange1" onchange="updateTextInput(this.value);"
oninput="updateTextInput(this.value);">
<div class="mt-3">
<button class="btn btn-primary" id="select_subject">${gettext(
"Select Subject"
)}</button>
</div>
</div>
</div>
`;
} else {
quizBox.innerHTML = `
<div class="h5 mb-3">${title}</div>
<div class="row mt-3">
<label for="customRange1" class="form-label">${labelText}</label>
<div class="input-group">
<input type="text" class="form-control" id="textInput" value="${
questions.length
}" oninput="customRange1.value=amount.value" >
<span class="input-group-text">on ${
questions.length
}</span>
<input type="range" name="question_number" class="form-range mt-3" min="0" max="${
questions.length
}" value="${
questions.length
}" id="customRange1" onchange="updateTextInput(this.value);"
oninput="updateTextInput(this.value);">
<div class="mt-3">
<button class="btn btn-primary" id="select_subject">${gettext(
"Select Subject"
)}</button>
</div>
</div>
</div>
`;
}
},
error: function (error) {
console.log(error);
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Basically, topicQuestionNum variable is an array, which I sum in the selectedTopics function and, in case I uncheck one of the checkboxes, it gives me a new result.
What I need to do, is updating also the result in the input field I create with the ajax request down below.
I tried in many different ways but I don't have much experience, especially with Javascript.
I have this simple JS and Jquery snippet that only works partially. The autocomplete dropdown works but the jquery bit that is supposed to be executed on clicking on autocomplete-items does not react (i.e. inside the function there is alert which does not execute). I am not an expert on JS and im self-taught so the code below might be a bit messy. If anyone is willing to 'tidy it up' so that its clean and is working fully, I would be grateful.
Script:
$(document).ready(function(){
var startyear_select = document.getElementById("startyear")
var length_select = document.getElementById("length")
var addressform_select = document.getElementById("addressform");
length_select.onchange = function formnumber(){
startyear = startyear_select.value;
length = length_select.value;
startyear = Number(startyear);
var optionHTML = '';
var optionHTML1 = '';
var optionHTML2 = '';
var optionHTMLtotal = '<h4> In the boxes below, provide your all acccommodation addresses: </h4> <br><table> <tr> <th>Postcode</th> <th> Address </th> <th> Move in year </th> </tr>'
for (i = 0; i<=length-1; i++){
optionHTML = '<tr> <td> <div class="autocomplete postcode"> <input required id=postcode'+i+' type="text" placeholder="Postcode"> </div> </td>';
optionHTML1=' <td> <select class="form-control address" style="width: 400px" id=address'+i +' > </select> </td> ';
optionHTML2 =' <td> <input id=year'+i +' name="year" required type="text" value='+Number(startyear+i)+' readonly> </div> <td>';
optionHTMLtotal +=optionHTML+optionHTML1+optionHTML2
}
addressform_select.innerHTML =optionHTMLtotal+' <input name="length" type = "hidden" id="length" required type="text" value='+length+'> <input type="submit" value="Submit!">';
for (i = 0; i<=length-1; i++){
autocomplete(document.getElementById('postcode'+i+''), postcodes.postcodes);
}
$('.autocomplete-items').children().on('click',function(){ alert("hello")
var postcode = $('.postcode');
var address = $('.address');
post = postcode.value;
fetch('/auth/address/' + post).then(function(response) {
response.json().then(function(data) {
var optionHTML = '';
for (var ads of data.addresses) {
optionHTML += '<option value="' + ads.address + '">' + ads.address + '</option>';
}
address.innerHTML = optionHTML;
})
})
})
}
})
This script is using autocomplete function built in JS available here https://www.w3schools.com/howto/howto_js_autocomplete.asp
HTML:
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/autocomplete.css') }}">
</head>
<body>
<form method="POST" >
<div class="row">
<div class="col-md-4">
{{ wtf.quick_form(lenform) }}
</div> </div>
</form>
<div>
<form id=addressform autocomplete="off" method="POST"></div>
<script src= "{{ url_for('static',filename='js/autocomplete.js') }}"> </script>
<script src= "{{ url_for('static',filename='js/autocomplete2.js') }}"> </script>
<script>
var postcodes = JSON.parse('{{ postcodes | tojson | safe}}');
</script>
</body>
The structure of autocomplete postcode input is the following :
<div class='autocomplete postcode'>
<input required id='postcode0'type='text'>
<div class='autocomplete-items'>
<div> 1 </div> <div> 2 </div>
</div> </div>
I am not able to get the checkboxes values from checkboxes to Firebase.
How will I be able to get each value from each box from each row?
Table:
Check boxes:
$("#table_body_Test").append("<tr><td>" + AgentEmail + "</td><td><INPUT TYPE=\"Checkbox\" Name=\"Browser\" Value =\"Agent\"></Input></td></tr>");
Table
<div class="AgentDetailsRequest">
<table id="testTable" align="center">
<thead>
<tr style="color: #D2002E; background: #FFCC01; height:32px;">
<td>Agents</td>
<td>Select</td>
</tr>
</thead>
<tbody id="table_body_Test">
</tbody>
</table>
</div>
full form
<div class="form-popup" id="myFormDetails">
<div class="shipDetailsRequest">
<form action="" method="post" class="form-container" >
<button type="button" onclick="closeForm()" id="close">x</button>
<input name="RR" type="RRField" id="date" disabled>
<input name="RR" type="RRField" id="RRField" placeholder="RR Field" disabled>
<p>Customer Details</p>
<input onclick="sampleFunction()" type="number1" placeholder="Customer Account Number" name="customerAccountField" id="customerAccountField" required>
<input type="number1" placeholder="Customer Name" name="customerNameField" id="customerNameField" disabled>
<p>Shipper Details</p>
<input type="number1" placeholder="Shipper Name" name="senderName" id="shipperName" required>
<textarea name="collectionAddress" placeholder="Collection Address...?" id="collectionAddress"></textarea>
<p>Shipment Details</p>
<input type="text" placeholder="Enter Origin" name="shptOrigin" id="shipmentOrigin" maxlength = "3" required>
<input type="text" placeholder="Enter Destination" name="shptDest" id="shipmentDest" maxlength = "3" required>
<input type="number" placeholder="Enter Weight" name="shptWeight" id="shptWeight" required>
<input type="number" placeholder="Enter Pieces" name="shptPieces" id="shptPieces" required>
<input type="number1" placeholder="Enter Dimensions" name="shptDimensions" id="shipmentDimensions" >
<select placeholder="Choose Type" name="shptStack" id="shptStack" required>
<option value="Stackable">Stackable</option>
<option value="Nonstackable">Nonstackable</option>
</select>
<select placeholder="Choose Desk" name="Desk" id="ChooseDesk" required>
<option value="KSA">KSA Desk</option>
<option value="DHA">DHA Desk</option>
<option value="RUH">RUH Desk</option>
<option value="JED">JED Desk</option>
</select>
<p>Comment</p>
<textarea name="comment" placeholder="Other Details...?" id="commentField"></textarea>
<div class="mainDiv" align="center" >
<input type="file" id="fileButton" />
<progress id="uploader" value="0" max="100" style="max-width: 128px;">0%</progress>
</div>
<!-- <button id="submitBtn" onclick="ActionData()">Next</button> -->
<button id="submitBtn" onclick="ActionData()">Next</button>
</form>
</div>
<div class="AgentDetailsRequest">
<table id="testTable" align="center">
<thead>
<tr style="color: #D2002E; background: #FFCC01; height:32px;">
<td>Agents</td>
<td>Select</td>
</tr>
</thead>
<tbody id="table_body_Test">
</tbody>
</table>
</div>
Full JavaScript
var DateText = document.getElementById("date");
var RRText = document.getElementById("RRField");
var CustAccText = document.getElementById("customerAccountField");
var CustNameText = document.getElementById("customerNameField");
var ShipperNameText = document.getElementById("shipperName");
var CollectionAddressText = document.getElementById("collectionAddress");
var ShipmentOrgText = document.getElementById("shipmentOrigin");
var ShipmentDestText = document.getElementById("shipmentDest");
var ShipmentweightText = document.getElementById("shptWeight");
var ShipmentPiecesText = document.getElementById("shptPieces");
var ShipmentDimensionsText = document.getElementById("shipmentDimensions");
var ShptStackText = document.getElementById("shptStack");
var ChooseDeskText = document.getElementById("ChooseDesk");
var CommentText = document.getElementById("commentField");
var ShipmentOriginValues = ShipmentOrgText.value;
ShipmentOriginValues = "All";
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
if (ShipmentOrgText.value != null)
{
var rootRefReAgents = firebase.database().ref().child("AgentsContact").child(ShipmentOriginValues);
rootRefReAgents.on("child_added", snap =>{
var AgentEmail = snap.child("Name").val();
$("#table_body_Test").append("<tr><td>" + AgentEmail + "</td><td><INPUT TYPE=\"Checkbox\" Name=\"Browser\" Value =\"Agent\"></Input></td></tr>");
});
}
function ActionData()
{
//setting up values from Text Fields
var DateValue = DateText.value;
var RRValue = RRText.value;
var CustAccountValue = CustAccText.value;
var CustNameValue = CustNameText.value;
var ShipperNameValue = ShipperNameText.value;
var CollectionAddressValues = CollectionAddressText.value;
ShipmentOriginValues = ShipmentOrgText.value;
var ShipmentDestValues = ShipmentDestText.value;
var ShipmentweightValues = ShipmentweightText.value;
var ShipmentPiecesValues = ShipmentPiecesText.value;
var ShipmentDimensionsValues = ShipmentDimensionsText.value;
var ShptStackValues = ShptStackText.value;
var ChooseDeskValues = ChooseDeskText.value;
var CommentValues = CommentText.value;
var FirebaseRef = firebase.database().ref("Requests").child(RRValue);
if(RRValue && ShipmentOriginValues && ShipmentDestValues && CustAccountValue == null)
{
window.alert("Need More details to upload")
}
else
{
FirebaseRef.child("Date").set(DateValue);
FirebaseRef.child("RR").set(RRValue);
FirebaseRef.child("Customer Account").set(CustAccountValue);
FirebaseRef.child("Customer Name").set(CustNameValue);
FirebaseRef.child("Shipper Name").set(ShipperNameValue);
FirebaseRef.child("Collection Address").set(CollectionAddressValues);
FirebaseRef.child("Origin").set(ShipmentOriginValues);
FirebaseRef.child("Destination").set(ShipmentDestValues);
FirebaseRef.child("Weight").set(ShipmentweightValues);
FirebaseRef.child("Pieces").set(ShipmentPiecesValues);
FirebaseRef.child("Dimensions").set(ShipmentDimensionsValues);
FirebaseRef.child("Stack").set(ShptStackValues);
FirebaseRef.child("Desk").set(ChooseDeskValues);
FirebaseRef.child("Comment").set(CommentValues);
FirebaseRef.child("Status").set("Pending");
//Uploading
fileButton.addEventListener('change', function(e){
var file = e.target.files[0];
var storageRef = firebase.storage().ref('img/'+RRValue+'/'+file.name);
var task = storageRef.put(file);
task.on('state_changed', function progress(snapshot) {
var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
uploader.value = percentage;
}, function error(err) {
},function complete() {
});
});
}
}
I need to check boxes from the table and get their values back to Firebase when form is submitted.
You could specify an id or name for each input and then retrieve their value when you submit the form.
$("#table_body_Test").append("<tr><td>" + AgentEmail + "</td><td><input type=\"checkbox\" id=\""+AgentEmail+"\" Value =\"Agent\"></Input></td></tr>")
var agents = ... //Get your agents list from firebase
$form.on('submit', function(){
agents.forEach(function(agent){
if($('#'+agent.email).prop('checked'){
//do something
}
})
})
If your code is working, you can ckeck if a checkbox is checked with:
/* jQuery */
if ($('#check_id').is(":checked"))
{
// checkbox is checked
}
you can also use:
/* jQuery */
$("#idOfCurrentRow").children()."input[type='checkbox']") is(":checked")
If you prefer pure JavaScript:
/* pure JavaScript*/
if(document.getElementById("idOfYourCheckbox").checked) {
...
}
or
if (document.getElementByName("nameOfYourCheckbox").checked) {
.....
}
This is run automatic. i need it run when call window.onload, not run before call window.onload, because i want to create function as a template code to embed other side, just change id, or className input
Thanks
function changeResultBox(resultTextClassName,inputSearchToggleId){
var inputSearchToggle=document.getElementById(inputSearchToggleId),
resultText=document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML='"'+inputSearchToggle.value+'"';
resultText[1].innerHTML='"'+inputSearchToggle.value+'"';
}
window.onload=function(){
document.getElementById('Store-Page-Search-Input').onkeyup =
changeResultBox('search-bar-item__text','Store-Page-Search-Input');
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value=""/>
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
Bind event on the input itself onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')".
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')" />
function changeResultBox(resultTextClassName, inputSearchToggleId) {
var inputSearchToggle = document.getElementById(inputSearchToggleId),
resultText = document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML = '"' + inputSearchToggle.value + '"';
resultText[1].innerHTML = '"' + inputSearchToggle.value + '"';
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')" />
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
function changeResultBox(resultTextClassName, inputSearchToggleId) {
//var resultTextClassName = 'search-bar-item__text';
//var inputSearchToggleId = 'Store-Page-Search-Input';
var inputSearchToggle = document.getElementById(inputSearchToggleId),
resultText = document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML = '"' + inputSearchToggle.value + '"';
resultText[1].innerHTML = '"' + inputSearchToggle.value + '"';
}
window.onload = function() {
document.getElementById("Store-Page-Search-Input").addEventListener("keyup", changeResultBox.bind(event, 'search-bar-item__text', 'Store-Page-Search-Input'));
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" />
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
i was wondering if i can make the title of an accordion a button as well without the button feeling?
here is a picture of the accordion title and some data inside it?
i want to click on the text that is in the title to navigate to a page...
using phonegap/cordova v1.9. Visual studio 2010 express for windows phone/html,CSS,javascript (c#)
any help will be appreciated :) im open to a solution in anyway, including jquery's
title is
inboxentry1 POS556445
I have made the accordion in a bunch of div's that stacked into eachother...
tell me if i must add anything else to help with the solution!
here is some html for the accordion!
<div id="AccordionContainer" class="AccordionContainer"></div>
<div onclick="runAccordion(1)">
<div class="Accordiontitle" onselectstart="return false;">
<input type="button" href="ItemPages.html">inbox entry1</input>
<br/>
<a>POS556446x</a>
</div>
</div>
<div id="Accordion1Content" class="AccordionContent" style="background-color:white; color:grey;">
<form>
<p>
<label for="create" >Created by :</label>
<input type="text" style="margin-left:60px;" size="22" id="create"/>
</p>
<p>
<label for="createdate" >Created Date :</label>
<input type="text" style="margin-left:43px;" size="22" id="createdate"/>
</p>
<p>
<label for="process" >Process name :</label>
<input type="text" style="margin-left:36px;" size="22" id="process"/>
</p>
<p>
<label for="transtype">Transaction type :</label>
<input type="text" style="margin-left:20px;" size="22" id="transtype"/>
</p>
<p>
<label for="lastact">Last action :</label>
<input type="text" style="margin-left:61px;" size="22" id="lastact"/>
</p>
<p>
<label for="lastuser">Last user :</label>
<input type="text" style="margin-left:73px;" size="22" id="lastuser"/>
</p>
<p>
<label for="lastupd">Last update :</label>
<input type="text" style="margin-left:55px;" size="22" id="lastupd"/>
</p>
<p>
<label for="duration">Duration :</label>
<input type="text" style="margin-left:78px;" size="22" id="duration"/>
</p>
<p>
<label for="saved">Saved :</label>
<input type="text" style="margin-left:93px;" size="22" id="saved"/>
</p>
<p>
<label for="adhoc">Ad hoc user :</label>
<input type="text" style="margin-left:53px;" size="22" id="adhoc"/>
</p>
</form>
</div>
here is my .js file
var ContentHeight = 200;
var TimeToSlide = 250.0;
var openAccordion = '';
function runAccordion(index) {
var nID = "Accordion" + index + "Content";
if (openAccordion == nID)
nID = '';
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);
openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId) {
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);
if (timeLeft <= elapsedTicks) {
if (opening != null)
opening.style.height = ContentHeight + 'px';
if (closing != null) {
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}
timeLeft -= elapsedTicks;
var newClosedHeight = Math.round((timeLeft / TimeToSlide) * ContentHeight);
if (opening != null) {
if (opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}
if (closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33);
}
You probably want to make some changes here. A few classes have been added and the button tag changed as it wasn't correct. Your want to remove the inline event you have for the accordion and stick it where commmented below.
<div class="AccordionRun">
<div class="Accordiontitle" onselectstart="return false;">
<input class="AccordionLink" type="button" href="ItemPages.html" value="inbox entry1">
<br/>
<a>POS556446x</a>
</div>
</div>
Then you can get it and add a click event to it...
var goToPage = function(elem) {
elem.onclick = function() {
alert('Go to page...');
window.location = elem.href;
};
};
var runAccordion = function(elem) {
elem.onclick = function() {
alert('Run Accordion...');
// Your accordion code goes here...
};
};
var buttons = document.getElementsByTagName('input');
for(var i=0; i < buttons.length; i++) {
if (buttons[i].className == 'AccordionLink') {
goToPage(buttons[i]);
}
}
var divs = document.getElementsByTagName('div');
for(var i=0; i < divs.length; i++) {
if (divs[i].className == 'AccordionRun') {
runAccordion(divs[i]);
}
}
jsfiddle.net/FKt4K/2
If you'd like to navigate to an other page on click of an input field, here's a simpe work-around.. Just bind it to a mouseup-event like so (needs a jQuery implemention):
UPDATED CODE
HTML:
<input class="followThisRel" type="button" rel="http://yoursite.com/">
JS:
$(function() {
$('input.followThisRel').on('click', function() {
var url = $(this).attr('rel');
window.location = url;
});
})