I am building a website of yellopages in which I want to upload and display images on some pages.
First, I insert the image name in to the database while uploading. I want to get the image name on the parent page.
addproduct.php
<form action="" method="post" enctype="multipart/form-data" name="uploadform" id="uploadform">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="42%" align="right">Product Title </td>
<td width="1%"> </td>
<td width="118" height="118" align="center" bordercolor="#FFFFFF" bgcolor="#FFFFFF" ><iframe src="" id="fileframe" name="fileframe" width="118" height="118" scrolling="no" frameborder="0"></iframe></td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td onclick="whatever();">value</td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td><label>
<input name="thefile" type="file" id="thefile" />
upload</label></td>
</tr>
<tr>
<td align="right">Product Description </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><label>
<input name="web" type="submit" id="web" value="Continue" />
</label></td>
</tr>
</table>
</form>
Javascript in this page
function whatever() {
mmspobj=document.getElementId("fileframe");
// if (mmspobj.tagName=='iframe'){
//alert("hi");
//mmsiobj=window.frames[fileframe].document.getElementId('fileframe').value;
alert(mmspobj);
//}
}
uploader.js
function init() {
fileUploadEvents();
}
function fileUploadEvents() {
var links = document.getElementsByTagName("a");
if (links) {
for (var x=0; x<links.length; ++x) {
if (links[x].className == "uploadfile")
links[x].onclick = uploadFile;
}
}
}
function uploadFile() {
var uploadForm = document.getElementById("uploadform");
if (uploadForm) {
uploadForm.target="fileframe";
uploadForm.action="upload.php";
}
uploadForm.submit();
}
How can I get the image name in addproduct.php?
You might find it easier to have the iframe call a JavaScript function in the parent, rather than have the parent window try to read the name from the iframe.
Related
with javascript, i am trying to get rid of all the dates and only keeping the time from all my rows of the table
here is the screenshot i am taking about
i cannot use the id or class of the td because its dynamic.
i am trying to ynderstand how can i loop it over to make it work
here is my piece of code i have
var header = document.getElementsByClassName('flightData1')[0];
var dateField = ?
also trying to add some condition here that if the records are not in todays date, remove those rows
here is my html
<table border="0" cellpadding="0" id="iFlightTable" class="cellpadding3 styled-table">
<tbody>
<tr class="flightData1" id="AS 2224_2023-02-09T21:17:00_Anchorage_row">
<td id="Alaska Air"> Alaska</td>
<td> 2224</td>
<td> Anchorage</td>
<td id="1676006220000"> 9:17P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 2224_2023-02-09T21:17:00_bags"> </td>
<td id="AS 2224_2023-02-09T21:17:00_gate">2A</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="flightData2" id="AS 657_2023-02-09T16:35:00_Las Vegas_row">
<td id="Alaska Air"> Alaska</td>
<td> 657</td>
<td> Las Vegas</td>
<td id="1675989300000"> 4:35P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 657_2023-02-09T16:35:00_bags"> </td>
<td id="AS 657_2023-02-09T16:35:00_gate">1</td>
<td> </td>
<td> </td>
<td> </td>
</tr> </tbody>
</table>
let dateFields = document.querySelectorAll('#iFlightTable tr td:nth-child(4)');
dateFields.forEach( field => {
field.innerText = field.innerText.split(/\s/)[0];
});
<table border="0" cellpadding="0" id="iFlightTable" class="cellpadding3 styled-table">
<tbody>
<tr class="flightData1" id="AS 2224_2023-02-09T21:17:00_Anchorage_row">
<td id="Alaska Air"> Alaska</td>
<td> 2224</td>
<td> Anchorage</td>
<td id="1676006220000"> 9:17P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 2224_2023-02-09T21:17:00_bags"> </td>
<td id="AS 2224_2023-02-09T21:17:00_gate">2A</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="flightData2" id="AS 657_2023-02-09T16:35:00_Las Vegas_row">
<td id="Alaska Air"> Alaska</td>
<td> 657</td>
<td> Las Vegas</td>
<td id="1675989300000"> 4:35P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 657_2023-02-09T16:35:00_bags"> </td>
<td id="AS 657_2023-02-09T16:35:00_gate">1</td>
<td> </td>
<td> </td>
<td> </td>
</tr> </tbody>
I have been trying to get this calculator to work in my WordPress blog but haven't been successful at it.
I did get simple Hello world pop-up to work but not this. I want to calculate the "BPodds". Can you guys tell me what's wrong with this?
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').innerHTML = BPodds;
}
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong>
</td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>
You should use value instead of innerHtml:
document.getElementById('BPodds').value = BPodds;
Here is the fiddle: http://jsfiddle.net/o5ze12mf/
The problem is not with Wordpress,
You are trying to put the result in INPUT with innerHTML but to change the value of INPUT you need to use .value
You code will be like this :
<script type="text/javascript">
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').value = BPodds;
}
</script>
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong></td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>
I just changed
document.getElementById('BPodds').innerHTML = BPodds;
to
document.getElementById('BPodds').value = BPodds;
I have a form page and certain items only appear on the list if a link is clicked on. I want the link to hide when it is clicked on and the action it calls un-hides.
This is my test page:
function toggle_it(itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong>
</td>
<td align="center"><strong>DESCRIPTION</strong>
</td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1
</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2
</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1
</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2
</td>
</tr>
</table>
The code is in CF but this is a JavaScript function.
BTW. Thank you whoever wrote the original script I found on Stackoverflow a while back.
Plunker
Description: Gave html elements for toggle unique ids. Also needed to update the javascript to get the parent element of the parent element of the link clicked. This only works when there are two elements to reach the tr.
Importantly, this code has an extra unhide that isn't needed...since we are hiding it and there is nothing to click.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit"></td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2</td>
</tr>
</table>
</body>
</html>
JS
// Code goes here
function toggle_it(itemClickedID, itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = '';
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
event.preventDefault();
} else {
event.preventDefault();
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
document.getElementById(itemID).style.display = 'none';
}
}
I want to only display the first 6 rows of the table and when I press a button, the previous six will be hidden and the next six will be shown.
Here is my javascript that shows the first 6 tables:
function setInnerHTML(){
<%
ArrayList userBoxList = BoxList.getInstance().getUserBoxList();
if(userBoxList.size()>6){%>
document.getElementById('down').disabled = false;
document.getElementById('page').value = counter + 1;
<% size = 6;
}
else{
size = userBoxList.size();
}
for(x=0; x < size; x++)
{
UserBox box = (UserBox) userBoxList.get(x); %>
document.getElementById(origID).onclick = changeColor;
var items = document.getElementById(origID).getElementsByTagName("td");
items[0].innerHTML = "<%=box.getInfo().getBoxNumber()%>";
items[1].innerHTML = "<%=box.getInfo().getBoxName()%>";
items[2].innerHTML = "<%=box.getInfo().getOwnerUserName()%>";
items[3].innerHTML = "<%=box.getInfo().getCurrentSize()%>" + "MB";
origID++;
<%}
%>
}
My HTML code:
<tr style="height:40px;" bgcolor="#FFFFFF" id="0">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="1">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="2">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="3">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="4">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr style="height:40px;" bgcolor="#FFFFFF" id="5">
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
<td align="left"> </td>
</tr>
It's not good practice to mix logic with view. Try to use already existing components to display table.
You could choose displayTag: http://www.displaytag.org/1.2/ or datatables https://datatables.net/ or many others.
Use server side processing with ajax call to display next records.
I solved this problem by creating the table dynamically just using
> document.getElementById.style.display = "table-row" and
> document.getElementById.style.display = "none"
to hide and show the TR.
I know that there are a bunch of posts about this already, but no matter what I try, nothing works for my form.
I simply want the submit button to be disabled until all fields are filled in, and I want $mypassword checked to equal $myconfirmpassword before submitting.
If you can find something that works. THANK YOU SO MUCH!!
Obviously, some things are hidden for privacy purposes, as you can't see my CSS and PHP info.
<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
<h2>Back</h2>
</div></a>
<div id="registration_container" >
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
<tr>
<form name="form3" method="post" action="check_finish_registration.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
<tr>
<td colspan="3"><strong>Complete Registration </strong></td>
</tr>
<tr>
<td width="2000">First Name</td>
<td width="6">:</td>
<td width="294"><?php echo $fname ?></td>
</tr>
<tr>
<td width="2000">Middle Name*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mymname" id="mymname"></td>
</tr>
<tr>
<td width="2000">Last Name</td>
<td width="6">:</td>
<td width="294"><?php echo $lname ?></td>
</tr>
<tr>
<td width="2000">Create a Username*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myusername" id="myusername"></td>
</tr>
<tr>
<td width="2000">Create a Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mypassword" id="mypassword"></td>
</tr>
<tr>
<td width="2000">Confirm Your Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword"></td>
</tr>
<tr>
<td width="2000">Enter your Sigma Number*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mysnumber" id="mysnumber"></td>
</tr>
<tr>
<td width="2000">E-Mail Address*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myemail" id="myemail"></td>
</tr>
<tr>
<td width="2000">* required field</td>
<td> </td>
<td><input type="submit" id='register' value="Register"disabled='disabled'></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</div>
Instead of disabling the submit button, why don't you just try to validate the form so that until the user enters the correct values, the form will not be submitted to the database? And about the password and confirm password fields validation
<script type="text/javascript">
function passwordConfirm() {
var confirmPass = document.getElementById("confirmpassid").value
if(pass != confirmPass) {
alert("Mismatching passwords");
}
}
Try not to use this but if you want you may give it a try (jQuery would be good)
var els=[];
window.onload=function(){
var inputs=document.getElementsByTagName('input');
for(i=0; i<inputs.length;i++)
{
if(inputs[i].type=='text' || inputs[i].type=='password')
{
if(inputs[i].name!='fname' && inputs[i].name!='lname')
{
inputs[i].onkeyup=check;
els.push(inputs[i]);
}
}
}
}
function check()
{
var isValid=true;
for(i=0; i<els.length;i++)
{
if(!els[i].value.length)
{
isValid=false;
break;
}
else isValid=true;
}
var reg=document.getElementById('register');
if(isValid && matctValidInputs()) reg.disabled=false;
else reg.disabled=true;
}
function matctValidInputs()
{
var re=/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/;
var ps=document.getElementById('mypassword');
var cps=document.getElementById('myconfirmpassword');
var snum=document.getElementById('mysnumber');
var mail=document.getElementById('myemail');
if(ps.value.length>5 && ps.value==cps.value && re.test(mail.value) && isNumber(snum.value))
return true;
else return false;
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n) && n.length>5;
}
Before you test the demo:
Password must be 6 characters and match with confirm password.
The Sigma Number must be a number and minimum 6 digits.
Email must match a valid email (very basic regex)
No alerts/notifications given.
DEMO.
just copy and paste my code.there might be few things you might wanna improve.If it is so,let me know
<script type="text/javascript">
function fnc()
{
var name=document.getElementById("mymname").value;
var username=document.getElementById("myusername").value;
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
var number=document.getElementById("mysnumber").value;
var email=document.getElementById("myemail").value;
if(name!='' && username!='' && password!='' && confirmpassword!='' && number!='' && email!='')
{
document.getElementById("register").disabled=false;
}
else
document.getElementById("register").disabled=true;
}
function check()
{
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
if(password!=confirmpassword)
{
alert("password missmatches");
return false;
}
}
</script>
<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
<h2>Back</h2>
</div></a>
<div id="registration_container" >
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
<tr>
<form name="form3" method="post" action="check_finish_registration.php" onSubmit="return check()">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
<tr>
<td colspan="3"><strong>Complete Registration </strong></td>
</tr>
<tr>
<td width="2000">First Name</td>
<td width="6">:</td>
<td width="294"><?php echo $fname ?></td>
</tr>
<tr>
<td width="2000">Middle Name*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mymname" id="mymname" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Last Name</td>
<td width="6">:</td>
<td width="294"><?php echo $lname ?></td>
</tr>
<tr>
<td width="2000">Create a Username*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myusername" id="myusername" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Create a Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mypassword" id="mypassword" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Confirm Your Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword" onKeyUp="fnc()">
</td>
</tr>
<tr>
<td width="2000">Enter your Sigma Number*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mysnumber" id="mysnumber" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">E-Mail Address*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myemail" id="myemail" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">* required field</td>
<td> </td>
<td><input type="submit" id="register" value="Register" disabled='disabled' "></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</div>