I need to open a jquery dialog popup with data loaded from database. I am able to see the result data in controller but not able view the same in dialog popup.
Any help on this pls?
Here is my code:
popup.jsp
<div id="addDeployment" style="display: none">
<table id="addDep">
<tbody>
<tr>
<td width="50%"><label id="AddDeployedCityLab">Deployed City</label></td>
<td width="50%"><input type="text" name="AddDeployedCity" id="AddDeployedCity" value="" /></td>
</tr>
<tr>
<td width="50%"><label id="AddDeployedStateLab">Deployed State</label></td>
<td width="50%"><input type="text" name="AddDeployedState" id="AddDeployedState" value=""></td>
</tr>
<tr>
<td width="50%"><label id="AddDeployedTerrirotyLab">Territory Name</label></td>
<td width="50%"><input type="text" name="AddDeployedTerriroty" id="AddDeployedTerriroty" value=${territoryName}></td>
</tr>
<tr>
<td width="50%"><label id="AddDeployedEffDateLab">Effective Date</label></td>
<td width="50%"><input type="text" name="AddDeployedEffDate" id="AddDeployedEffDate" value=${effectiveDate}></td>
</tr>
<tr>
<td width="50%"><label id="AddDeployedExpDateLab">Expiry Date</label></td>
<td width="50%"><input type="text" name="AddDeployedExpDate" id="AddDeployedExpDate" value=${expiryDate}></td>
</tr>
<tr>
<td width="50%"><label id="AddDeployedZipLab">Zipcodes</label></td>
<td width="50%">
<select id="AddDeployedZip" multiple="multiple">
</select>
</td>
</tr>
</tbody>
</table>
</div>
jQuery Code:
$("#addDeploymentBut").click(function(){
var usw=$("#DeployGrid").jqGrid("getCell",deployVal,"usw");
var deploymentTyp=$("#DeployGrid").jqGrid("getCell",deployVal,"deploymentTyp");
var territory=$("#DeployGrid").jqGrid("getCell",deployVal,"territoryName");
var effDate=$("#DeployGrid").jqGrid("getCell",deployVal,"effectiveDate");
var expDate=$("#DeployGrid").jqGrid("getCell",deployVal,"expiryDate");
var passParam="/Scheduling/deploymentAddModal?deployType="+deploymentTyp+"&usw="+usw+"&territory="+territory+"&effDate="+effDate+"&expDate="+expDate;
$("#addDeployment").dialog({
title: "Add Deployment",
width: 430,
height: 320,
modal: true,
open: function () {
/*$("#addDeployment").load(passParam,function(event){
event.preventDefault();
}); */
$.ajax({
type : "POST",
url : passParam,
async : false,
dataType: "json",
success : function(data) {
$("#addDeployment").load("deploymentAddModal.jsp");
}
});
},
buttons: {
Close: function() {
$("#addDeployment").dialog('close');
}
}
});
})
another jsp
<input type="button" id="addDeploymentBut" value="Add" />
look at id="addDeployment" I see that it is always display:none
remove display:none thru javascript. like display:inline
document.getElementById('addDeployment').style.display = 'block';
document.getElementById('addDeployment').style.display = 'inline';
Related
I have to pass the selected rows to a function( ). From the below code, I am able to get the value of selected checkbox but could not get the entire row. Please help me on how to get the entire selected rows and pass those rows to a function.
my html code:
<div id ="div_table">
<table id="myTable">
<tr>
<th>SELECT</th>
<th>BANKID</th>
<th>EFFECTIVE SAVE DATE</th>
<th>SAVE MONTH</th>
<th>MONTH OF SUBMISSION</th>
<th>PILLAR</th>
<th>LEVER</th>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1000" id="1000"></td>
<td id="bank" >100000</td>
<td id="edate">10-02-2009</td>
<td id="month">Jan</td>
<td id="subMonth"><input type="text" id="subMonth"></td>
<td id="pillar"><input type="text" id="pillar1"></td>
<td id="lever"><input type="text" id="lever1"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1001" id="1001"></td>
<td id="bank1" >100001</td>
<td id="edate1">12-12-2010</td>
<td id="month1">Feb</td>
<td id="subMonth1"><input type="text" id="subMonth2"></td>
<td id="pillar1"><input type="text" id="pillar2"></td>
<td id="lever1"><input type="text" id="lever12"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1002" id="1002"></td>
<td id="bank2" >100002</td>
<td id="edate2">18-02-2018</td>
<td id="month2">Apr</td>
<td id="subMonth2"><input type="text" id="subMonth3"></td>
<td id="pillar2"><input type="text" id="pillar3"></td>
<td id="lever2"><input type="text" id="lever13"></td>
</tr>
</table>
</div>
My jQuery Code:
$('#div_table').click(function() {
var result = []
$('input:checkbox:checked', tableControl).each(function() {
result.push($(this).parent().next().text());
});
alert(result);
});
The selected rows should be passed to the below function:I have to use these rows one by one and store.
function invokeAllEligibleSaves(result){
alert(result)
}
It will be very much useful for me If i get a working code. Thanks in advance.
One way to achieve that is like this:
First : get a reference to the input element that triggered the function. From this element, you can reach the .closest() parent that has the tag <tr>.
Second: This can then be queried for all of its <td> .children() and each child will either have .text() or .html() to report back. I think in your case, you are interested in the text part.
Third: You will need to push all .text() values in a separate array, that will be your row. Then push that row into another array result. So your result will be an array of arrays.
$('#div_table').click(function() {
var result = [] // create an empty array for all rows
$('input:checkbox:checked').each(function() {
var row = []; // create an empty array for the current row
//loop through all <td> elements in that row
$(this).closest('tr').children('td').each(function(){
// add .text() or .html() if you like
row.push($(this).text());
});
// now push that row to the result array
result.push(row);
});
alert(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="div_table">
<table id="myTable">
<tr>
<th>SELECT</th>
<th>BANKID</th>
<th>EFFECTIVE SAVE DATE</th>
<th>SAVE MONTH</th>
<th>MONTH OF SUBMISSION</th>
<th>PILLAR</th>
<th>LEVER</th>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1000" id="1000"></td>
<td id="bank">100000</td>
<td id="edate">10-02-2009</td>
<td id="month">Jan</td>
<td id="subMonth"><input type="text" id="subMonth"></td>
<td id="pillar"><input type="text" id="pillar1"></td>
<td id="lever"><input type="text" id="lever1"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1001" id="1001"></td>
<td id="bank1">100001</td>
<td id="edate1">12-12-2010</td>
<td id="month1">Feb</td>
<td id="subMonth1"><input type="text" id="subMonth2"></td>
<td id="pillar1"><input type="text" id="pillar2"></td>
<td id="lever1"><input type="text" id="lever12"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1002" id="1002"></td>
<td id="bank2">100002</td>
<td id="edate2">18-02-2018</td>
<td id="month2">Apr</td>
<td id="subMonth2"><input type="text" id="subMonth3"></td>
<td id="pillar2"><input type="text" id="pillar3"></td>
<td id="lever2"><input type="text" id="lever13"></td>
</tr>
</table>
</div>
You just need an additional .parent() in your result.push statement to get the whole row, because you're only getting the cell so far:
result.push($(this).parent().parent().next().text());
This would be a more effective solution for your problem. The drawback with the accepted answer is, it will get triggered whenever & wherever you click inside the table (even when you click on a text).
Here it gets updated only when a checkbox is selected.
$(document).ready(function() {
$('input:checkbox').on('change', function() {
var result = [];
$('input:checkbox:checked').each(function() {
var rowText = '';
$(this).parent().siblings().each(function() {
rowText += $(this).text() + ' ';
});
result.push(rowText.trim());
});
alert(JSON.stringify(result));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id ="div_table">
<table id="myTable">
<tr>
<th>SELECT</th>
<th>BANKID</th>
<th>EFFECTIVE SAVE DATE</th>
<th>SAVE MONTH</th>
<th>MONTH OF SUBMISSION</th>
<th>PILLAR</th>
<th>LEVER</th>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1000" id="1000"></td>
<td id="bank" >100000</td>
<td id="edate">10-02-2009</td>
<td id="month">Jan</td>
<td id="subMonth"><input type="text" id="subMonth"></td>
<td id="pillar"><input type="text" id="pillar1"></td>
<td id="lever"><input type="text" id="lever1"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1001" id="1001"></td>
<td id="bank1" >100001</td>
<td id="edate1">12-12-2010</td>
<td id="month1">Feb</td>
<td id="subMonth1"><input type="text" id="subMonth2"></td>
<td id="pillar1"><input type="text" id="pillar2"></td>
<td id="lever1"><input type="text" id="lever12"></td>
</tr>
<tr>
<td><input type='checkbox' name='chck' value="1002" id="1002"></td>
<td id="bank2" >100002</td>
<td id="edate2">18-02-2018</td>
<td id="month2">Apr</td>
<td id="subMonth2"><input type="text" id="subMonth3"></td>
<td id="pillar2"><input type="text" id="pillar3"></td>
<td id="lever2"><input type="text" id="lever13"></td>
</tr>
</table>
</div>
I have a table. I want to get name, lastname, email from all selected rows (check is set). Maybe name, lastname, email will be arrays.
How can I do it?
I've tried this:
var tableControl= document.getElementById('mytable');
$("#btn").click(function () {
var result = [];
$('input:checkbox:checked', tableControl).each(function() {
result.push($(this).parent().next().text());
});
alert(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" cellpadding="1" border="2">
<thead>
<tr>
<td>Check</td>
<td>Name</td>
<td>Lastname</td>
<td>Country</td>
<td>Email</td>
</tr>
</thead>
<tr>
<td><input id="check_1" type="checkbox" name="check[]"></td>
<td id="name_1">Petya</td>
<td id="last_1">L1</td>
<td id="country_1">Country1</td>
<td id="email_1">Email1</td>
</tr>
<tr>
<td><input id="check_2" type="checkbox" name="check[]"></td>
<td id="name_2">Kolya</td>
<td id="last_2">L2</td>
<td id="country_2">Country2</td>
<td id="email_2">Email2</td>
</tr>
<tr>
<td><input id="check_3" type="checkbox" name="check[]"></td>
<td id="name_3">Vasya</td>
<td id="last_3">L3</td>
<td id="country_3">Country3</td>
<td id="email_3">Email3</td>
</tr>
But I get only selected names. How can I get the other columns?
This is one possible way of doing things . I set a class for every type of column. You can use that to find out all the other information of the checked rows.
Observe the console. you get all the information in one object which you can then use for whatever further functions you might want it to do
var tableControl= document.getElementById('mytable');
$("#btn").click(function () {
var result = [];
$('input:checkbox:checked', tableControl).each(function() {
var obj={};
var parent=$(this).parent().parent();
obj.name=(parent.find( ".name" ).text());
obj.last=(parent.find( ".last" ).text());
obj.country=(parent.find( ".country" ).text());
obj.email=(parent.find( ".email" ).text());
result.push(obj);
});
console.log(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" cellpadding="1" border="2">
<thead>
<tr>
<td>Check</td>
<td>Name</td>
<td>Lastname</td>
<td>Country</td>
<td>Email</td>
</tr>
</thead>
<tr>
<td><input id="check_1" type="checkbox" name="check[]"></td>
<td class="name" id="name_1">Petya</td>
<td class="last" id="last_1">L1</td>
<td class="country" id="country_1">Country1</td>
<td class="email" id="email_1">Email1</td>
</tr>
<tr>
<td><input id="check_2" type="checkbox" name="check[]"></td>
<td class="name" id="name_2">Kolya</td>
<td class="last" id="last_2">L2</td>
<td class="country" id="country_2">Country2</td>
<td class="email" id="email_2">Email2</td>
</tr>
<tr>
<td><input id="check_3" type="checkbox" name="check[]"></td>
<td class="name" id="name_3">Vasya</td>
<td class="last" id="last_3">L3</td>
<td class="country" id="country_3">Country3</td>
<td class="email" id="email_3">Email3</td>
</tr>
<button id="btn">Click</button>
Instead of clicking a button every time you want to sum up your results, i would suggest you handle the result object anytime a checkbox is clicked, this makes for a more stable state and handles dynamic changes better. Consider changing your code to look like:
var tableControl = $('#mytable');
//An object that maps checkbox id to an object containing name, last and email
var result = {};
tableControl.find('input:checkbox').click(function() {
var key = $(this).attr('id');
//If checkbox clicked and not checked, then remove object from map
if(!$(this).is(":checked")){
delete result[key];
return;
}
var row = $(this).parent().parent();
//Get children based on the start of the id string
var firstName = row.children("td[id^='name']").text();
var lastName = row.children("td[id^='last']").text();
var email = row.children("td[id^='email']").text();
result[key] = {
name: firstName,
last : lastName,
email: email
}
});
This way, anytime a checkbox is clicked, the results object will update immediately to reflect the desired value. The result object would look something like this:
{
"check_1": {
"name": "Petya",
"last": "L1",
"email": "Email1"
},
"check_2": {
"name": "Kolya",
"last": "L2",
"email": "Email2"
},
"check_3": {
"name": "Vasya",
"last": "L3",
"email": "Email3"
}
}
https://jsfiddle.net/p35kz2u1/6/
var tableControl= document.getElementById('mytable');
$("#btn").click(function () {
var result = [];
$('input:checkbox:checked', tableControl).each(function() {
// Get the entire text
//alert($(this).closest('tr').children('td').text());
//alert($(this).parent().next().find('td').text());
// Get each column
$(this).closest('tr').children('td').each(function(e){
alert($(this).text());
});
result.push($(this).closest('tr').children('td').text());
});
alert(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" cellpadding="1" border="2">
<thead>
<tr>
<td>Check</td>
<td>Name</td>
<td>Lastname</td>
<td>Country</td>
<td>Email</td>
</tr>
</thead>
<tr>
<td><input id="check_1" type="checkbox" name="check[]"></td>
<td id="name_1">Petya</td>
<td id="last_1">L1</td>
<td id="country_1">Country1</td>
<td id="email_1">Email1</td>
</tr>
<tr>
<td><input id="check_2" type="checkbox" name="check[]"></td>
<td id="name_2">Kolya</td>
<td id="last_2">L2</td>
<td id="country_2">Country2</td>
<td id="email_2">Email2</td>
</tr>
<tr>
<td><input id="check_3" type="checkbox" name="check[]"></td>
<td id="name_3">Vasya</td>
<td id="last_3">L3</td>
<td id="country_3">Country3</td>
<td id="email_3">Email3</td>
</tr>
<button id="btn">Get Data</button>
var tableControl= $('#mytable');
$("#btn").click(function () {
var result = [];
tableControl('input[type="checkbox"]:checked').each(function() {
var nodeArray = $(this).parents('tr').find('td');
var innerArray = [];
for(var i = 1; i < nodeArray.length; i++) {
if(nodeArray.hasOwnProperty(i)) {
innerArray.push(nodeArray[i].text());
}
}
if(innerArray.length > 0) {
result.push(innerArray);
}
});
alert(result);
});
please try out this, i have not tested, but i think it should do what you want.
You can use something like below. I modified your inner query to go to parent and looks for siblings.
var tableControl = $('#mytable');
$("#btn").click(function() {
var result = [];
$('input:checkbox:checked').each(function(item) {
$(this).parent().siblings().each(function() {
result.push($(this).text())
});
});
alert(result)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" cellpadding="1" border="2">
<thead>
<tr>
<td>Check</td>
<td>Name</td>
<td>Lastname</td>
<td>Country</td>
<td>Email</td>
</tr>
</thead>
<tr>
<td><input id="check_1" type="checkbox" name="check[]"></td>
<td id="name_1">Petya</td>
<td id="last_1">L1</td>
<td id="country_1">Country1</td>
<td id="email_1">Email1</td>
</tr>
<tr>
<td><input id="check_2" type="checkbox" name="check[]"></td>
<td id="name_2">Kolya</td>
<td id="last_2">L2</td>
<td id="country_2">Country2</td>
<td id="email_2">Email2</td>
</tr>
<tr>
<td><input id="check_3" type="checkbox" name="check[]"></td>
<td id="name_3">Vasya</td>
<td id="last_3">L3</td>
<td id="country_3">Country3</td>
<td id="email_3">Email3</td>
</tr>
</table>
<button id ="btn">Click Me</button>
I am trying to clone and remove a table with jQuery, without success.
Here is an example, the table I want to operate:
<table>
<tr>
<td colspan="6" class="linha_space"></td>
</tr>
<tr>
<td colspan="3">Dummy1</td>
<td colspan="3">Dummy2</td>
</tr>
<tr>
<td colspan="2"><input name="aperf_cursos[]" type="text" /></td>
<td colspan="2"><input name="aperf_entidades[]" type="text" /></td>
<td colspan="2"><img src="./images/add.gif" /><img src="./images/delete.gif" /></td>
</tr>
<tr>
<td colspan="6" class="linha_space"></td>
</tr>
</table>
Now, the javascript functions add() and remove():
function add(o){
var o = $(o);
var tr = o.parent().parent().parent();
tr.after(tr.clone());
tr.find('.adicionar').remove();
tr.find('.remover').show();
tr.next().find('input, select').val('');
tr.next().find('.remover').hide();
}
function remove(o){
var o = $(o);
o.parent().parent().parent().remove();
}
add(this) works perfectly, but the remove(this) is not working, it removes just my "delete.gif" image. What am I doing wrong please?
Look at the jsFiddle.
I used jQuery for what you need.
<table>
<tr>
<td colspan="6" class="linha_space"></td>
</tr>
<tr>
<td colspan="3">Dummy1</td>
<td colspan="3">Dummy2</td>
</tr>
<tr>
<td colspan="2"><input name="aperf_cursos[]" type="text" /></td>
<td colspan="2"><input name="aperf_entidades[]" type="text" /></td>
<td colspan="2">AddDelete</td>
</tr>
<tr>
<td colspan="6" class="linha_space"></td>
</tr>
</table>
$(function() {
$(document).on('click', '.adicionar', function(event){
var o = $(event.target);
var tr = o.closest('table');
tr.after(tr.clone());
tr.find('.adicionar').remove();
tr.find('.remover').show();
tr.next().find('input, select').val('');
tr.next().find('.remover').hide();
});
$(document).on('click', '.remover', function(event){
var o = $(event.target);
var table = $(o.closest('table'));
table.remove();
});
});
Instead of this parent.parent.parent madness (it's madness, yes it is) why don't you use
element.closest("tr")
to find the row it's in?
This approach will work consistently.
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>
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.