I have table which displays the values of SQL table. In each row there is a dropdown which allows you to select which action you want to do. When you select the action and click '
go', it pops up a form which I want to be able to pass the $id variable from the table to the popup div form, then on to the next pop page. ID displays correctly in dropdown, but whenever when it shows the div, its showing the incorrect id (its displaying the first id of the table, rather than the id of the selected dropdown).
Heres the php
while($row = mysql_fetch_array($proposal_result)) {
$date=substr($row["date"], 0, 50);
$formatted_date=date('d/m/Y', strtotime($date));
$id=substr($row["idproposal"], 0, 50);
$businessname=substr($row["businessname"], 0, 50);
$status=substr($row["status"], 0, 50);
$staff=substr($row["staff"], 0, 50);
$file_access='<bucket-location>';
$file_name='proposal_'.$id.'_'.$businessname.'.pdf';
$file=$file_access.$file_name;
print "<tr><td>".$formatted_date."</<td>
<td>".$id."</td>
<td width='25px'><a href='".$file."'target='_blank'><img src='".$images."/attachment.png' alt='file'></a></td>
<td>".$businessname."</td><td>".$staff."</td>
<td>".$status."</td>
<td>
<div>
<select id='zb-admin-dropdown' name='zb-admin-dropdown' class='dropdowns' required>
<option value='0'>Select and action...*</option>
<option value='1'>Change Status for ID#".$id."</option>
<option value='2'>Delete Proposal</option>
</select>
<input type='submit' id='report-submit' value='Go' onclick='displayDiv()'></div>
</td></tr>";
}
Javascript
function displayDiv() {
e=document.getElementById("zb-admin-dropdown");
strUser=e.options[e.selectedIndex].value;
if (strUser=='1') {
document.getElementById('abc').style.display = "block";
}
if (strUser=='2') {
document.getElementById('def').style.display = "block";
}
}
popupdiv
print "<div id='abc'>
<div id='popup'>
<form name='changestatus' action='' method='post'>
<!--<img id='close' src='images/3.png'> CLOSE ICON-->
<h2>Change Status for ".$id."</h2>
<hr>
<textarea name='deletecomments' placeholder='Comments...'></textarea><br />
<a href='/delete?id=".$id."&businessname=".$businessname."'><input type='button' id='report-submit' value='Delete Proposal'></a><a href='/zerobooks-admin-dashboard'><input type='button' id='report-submit' value='Cancel'></a>
</form>
</div>
</div>";
print "<div id='def'>
<div id='popup'>
<form name='deletefeedback' action='' method='post'>
<!--<img id='close' src='images/3.png'> CLOSE ICON-->
<h2>Reason for deleting proposal <br />".$id."</h2>
<hr>
<input id='deletereason' type='radio' name='deletereason' class='radio' value='Added by mistake'>Added by mistake<br />
<input id='deletereason' type='radio' name='deletereason' class='radio' value='Added by mistake'>No longer required<br />
<input id='deletereason' type='radio' name='deletereason' class='radio' value='Added by mistake'>Incorrect Information Provided<br />
<input id='deletereason' type='radio' name='deletereason' class='radio' value='Added by mistake'>Reason 4<br />
<textarea name='deletecomments' placeholder='Comments...'></textarea><br />
<a href='/delete?id=".$id."&businessname=".$businessname."'><input type='button' id='report-submit' value='Delete Proposal'></a><a href='/zerobooks-admin-dashboard'><input type='button' id='report-submit' value='Cancel'></a>
</form>
</div>
</div>";
My aim is pretty much to pass the correct ID to the popupdiv. Any help would be appreciated. You can ignore the content of the popupdiv forms.
In your html, you call the function when a button is clicked. Pass the variable there in the function call. So:
<input type='submit' id='report-submit' value='Go' onclick='displayDiv(' + $id + ')'></div>
Then have the javascript function accept an input:
function displayDiv(divId) { ...
and use it in the javascript. But the thing is, php is server side, and javascript is client side. So to get the information to the server-side php, you need to make an http request.
I can't see where all the code is but you may be able to try a couple work-arounds with minimal refactoring. First, after the div element is displayed, you can have the javascript update the href tag with:
`document.getElementById(/*a_element's_id*/).href=''+divId`
Otherwise, I'm not a php expert, but I think perhaps if the php scripts are in the same scope, a global variable or perhaps a global static variable would be accessible to both php scripts?
Personally I'd go all javscript! :)
Best of luck
Related
I am wondering why my onclick function doesn't work in this particular case. My function is a pretty straightforward alert:
function confirmEditProduct(editProductID){
alert("Worked");
}
This is my HTML code echoed in PHP:
echo "
<img src='$directory/$productImage' width='200px;'></img><br><br>
<p>Product Name: <p><input type='text' id='editName' name='editName' style='width:400px;' value='$productName'/>
<p>Category:
<select class='form-control' id='editCat' style='width:200px;' disabled>
<option value='Cacti'"; if ($productCategory == '1') echo " selected='selected'"; echo ">Cacti</option>
<option value='Succulents'"; if ($productCategory == '2') echo " selected='selected'"; echo ">Succulents</option>
</select>
<p>Description: <p><textarea rows='4' cols='50' id='editDesc' name='editDesc'>$productDesc</textarea>
<p>Price: <input type='text' id='editPrice' name='editPrice' value='$productPrice'/>
<p>Image: <input class='input-group' type='file' id='editImage' name='editImage' accept='image/*' />
<p>Stock: <input type='text' id='editStock' name='editStock' value='$productStock'/>
<p>
<input type='button' class='btn btn-success' id='$productID' onClick='confirmEditProduct($productID);' value='Edit Product' />
";
This snippet is part of a modal btw.
Thank you to everyone who can help me out
This seems like it would be quite simple. Are you also echoing the Javascript? If so, take an extra precaution and move it before the HTML code. Some other things you may want to consider include making the input button into a straight up button and omitting the semicolon at the end of the onclick attribute. As for styling, you may want to put the value attribute after the type attribute. Hope this helps!
Edit:
When I mean echoing the Javascript, make sure you have a <script src="main.js"> or the entire script within your echoed code.
I have a hidden form inside a div that is displayed on button click.
Inside the form I have an input text field, and a button that should call a JavaScript function that adds another input field.
If the container named "blockOfStuff" is a div, as you see it, the function doesn't work. If I change the <div> container tag into a <script> tag, then it is working...
What's wrong?
<script>
function addProceduri(divName){
c = document.getElementById("proceduri").getElementsByTagName("div").length;
var moddiv = document.createElement('div');
moddiv.innerHTML = "<input type='checkbox' value='1' name='check" + c + "'><input type='text' name='procedura" + c + "'>";
document.getElementById(divName).appendChild(moddiv);
}
</script>
<input type="button" value="ADD" onClick="addbox.innerHTML=blockOfStuff.innerHTML;">
<div id="addbox"></div>
<div id="blockOfStuff" name="blockOfStuff" style="display: none;">
<form name="adaugare" enctype="multipart/form-data" action="afisare.php?add=1" method="POST">
<div id="field"> Procedures: <input type="button" value="+" onClick="addProceduri('proceduri');">
<div id="proceduri">
<?php
echo '<div><input type="checkbox" name="check0" value="1"><input type="text" name="procedura0" value=""></div>';
?>
</div>
</div>
</form>
</div> // end of "blockOfStuff" div
When you use a div, and copy the innerHTML elsewhere, you'll have multiple elements with the same id. This is illegal and all sorts of weirdness happens.
Elements within a script tag aren't part of the "regular" document, and you don't have this conflict when they're copied.
i've changed the onclick envent into document.getElementById('blockOfStuff').style.display= 'block' and now it's working.
Thanks
I'm currently using javascript to prevent link to be opened on multiple browser tabs every time user click on it. Let say my link destination is google, it will create a new tab if not exist but refresh if same destination exist. And it works good so far.
Here is the code.
Link
<div id="container">
Google
</div>
JavaScript
<script>
document.getElementById("container").onclick = function(test){
if (test.target.tagName === "A")
window.open(test.target.href, test.target.href);
return false;
}
</script>
My question is, How can I use same JavaScript on my form with similar effect? I mean if user submit my form. It will create a new tab when submitted if it not exist. But resubmit on same tab if the tab is exist. I tried to change JavaScript but can't make it work as normal link.
Here is my form
<form name='form1' action='/newform.php' method='post' target='_blank'>
<input type='hidden' name='test' value=''>
<input type='image' src='../data/images/myimages.gif' width='100px' height='30px' alt=''>
</form>
You might try something like this:
<script type='text/javascript'>
function formSubmit() {
window.open("about:blank","newWindow");
}
</script>
<form name='form1' action='/newform.php' method='post' onSubmit='formSubmit()' target='newWindow'>
<input type='hidden' name='test' value=''>
<input type='image' src='../data/images/myimages.gif' width='100px' height='30px' alt=''>
</form>
Basically, this will open new window when the form is submitted for the first time, and every other time form will submit to the already open window.
Keep in mind that window.open can be blocked by popup blockers and often is.
How about using a session variable?
Also use ID's for javascript.
<?php
//Check if session has not been started.
if (session_status() == PHP_SESSION_NONE)
{
session_start();
}
//If it has not been set, set no default.
if (!ISSET($_SESSION['hasSubmit'])
{
$_SESSION['hasSubmit'] = "no";
}
if ($_SESSION['hasSubmit'] == "no")
{
//Execute code for no
echo "
<form name='form1' id='firstSubmit' action='/newform.php' method='post' target='_blank'>
<input type='hidden' name='test' value=''>
<input type='image' src='../data/images/myimages.gif' width='100px' height='30px' alt=''>
</form>";
}
else if($_SESSION['hasSubmit'] == "yes")
{
//Execute code for yes
//Edit your form properties here to your likes.
echo "
<form name='form1' action='#' method='post' target='_newblank'>
<input type='hidden' name='test' value=''>
<input type='image' src='../data/images/myimages.gif' width='100px' height='30px' alt=''>
</form>";
}
?>
in newform.php set:
$_SESSION['hasSubmit'] = 'yes'
now the javascript:
$('firstSubmit').click(function(){
location.reload;
});
this should do the trick
This is my continuation of my previous question: Modifying $i inside a form
So now I created the code like this:
<form method="post" action="actionhere">
<div id='clone_me'>
<?php
for($i=1; $i<=1;$i++) {
?>
<span id="title">Line <?php echo $i;?></span>
<input type='checkbox' name='ck[]'/>
<input type='text' name='tx[]'/>
<?php } ?>
</div>
<input type='submit' name='submit' value='Submit'/>
<input type="button" value="Add row" class="addrow" />
</form>
<script>
$(document).ready(function() {
$('.addrow').click(function(){
var n= $("#clone_me").length;
var new_n=n+1;
var new_line= $('#clone_me div:first').clone().append();
$("span#title", new_line).text("Line bet "+new_n+" ");
new_line.appendTo('#clone_me');
alert(new_n);
});
});
</script>
So I can add new row when I click the button, but I want to change the title inside span element, but I can't make it work. The 1st cloned, yes, the title is changed correctly (from 1 to 2), but the 2nd cloned still display "2", not "3".
What is the correct way?
EDIT
I only put $i=1 for testing purposes. In actual application I need to change it to 10 (so will loop 10 rows)
i am working on a upload section for my website.
When users want a new application to upload they need to fill out a form where the put the version number etc.
There are 27 different applications wich can be uploaded. for that i have made a while loop
example:
<select id="type">
<option value="choose" selected>choose here</option>
<?php
require("Function/applist.php");
while($showtablerow = mysql_fetch_array($showtablequery_result))
{
echo "<option value=".$showtablerow[0].">".$showtablerow[0]."</option>";
}
?>
</select>
</div>
<div id="choose" class="add" style="display:none;"></div>
<?php
require("Function/applist.php");
while($showtablerow = mysql_fetch_array($showtablequery_result))
{
echo "<div class='add' id=".$showtablerow[0]." style='display:none;'><h2 id='amx-label'>".$showtablerow[0]."</h2>
<div id='formadd' style='opacity:1;'>
<form name='addamx' id='addamx' method='post'>
<div id='version' class='uploadform' style='opacity:1;'>
Version: <input style='opacity:1;' required type='text' name='versie' id='versie' width='3' onchange='process1()' ><br>
</div>
<div id='date' class='uploadform' style='opacity:1;'>
Release Date(yyyy-mm-dd): <input required type='date' style='opacity:1;' size='10' maxlength='10' name='date' id='date'>
</div>
<div id='build' style='opacity:1;'>
Build By: <input required type='text' style='opacity:1;' size='5' maxlength='25' name='build' id='build' >
</div>
<div id='platform' style='opacity:1;'>
Platform: <span>32 Bit:</span><input required type='radio' style='opacity:1;' id='platform' name='platform' value='32bit'>
<span>64 Bit:</span><input required type='radio' style='opacity:1;' id='platform' name='platform' value='63bit'>
</div>
<div id='application'>
<input type='hidden' name='app' value=".$showtablerow[0]." />
</div>
<div id='notes' style='opacity:1;'>
Release Notes: <textarea id='notess' name='test' onblur='process1()'></textarea>
</div>
<div id='uploadfooter' style='opacity:1;'>
<button type='submit' id='uploadamx' name='uploadamx'>Upload
</div>
</form>
</div>
</div>";
}
?>
In the select box they choose wich application they want to upload, and depending on that selection they get a form.
In the text area they write their release notes.
I want that when they fill their version number that automatically that version number is filed in in the text area.
i got that kinda working with the following javascript:
function process1() {
var appname = document.getElementById('type').value;
var version = document.getElementById('versie').value;
var textvalue = "changes for " + appname + " version " + version;
document.getElementById("notess").value = textvalue;
}
the function works only for the first form div
When i try it on the second div that textarea stays empty and the version number from the second div gets inserted in the textarea from the first div
How i can make the function so that the textarea only gets filled with the version number from that form?
Any ideas?
EDIT***
the way AboQutiesh was the good startup, the only adjustment that it needed was
He wrote:
onblur='process1(".$showtablerow[0].")'
result was onblur='process1(argument)'
This didnt work because the argument needed onblur='process1('argument')'
because it is in a while loop i couldnt just put the '' because it would break up the entire onblure
thansk to a collegea of my who pointed me to the ascii table
SOLUTION:
i changed it to onblur=process1('".$showtablerow[0]."')
(delete the ; at the end of the asccii otherwhise it wouldnt show here properly)
Thanks for the startup AboQutiesh
you need to provide different ids for each text area like this in php :
<div id='notes' style='opacity:1;'>
Release Notes: <textarea id='notess_".$showtablerow[0]." name='test' onblur='process1(".$showtablerow[0].")'></textarea>
</div>
and in the js
function process1(appId) {
var appname = document.getElementById('type').value;
var version = document.getElementById('versie').value;
var textvalue = "changes for " + appname + " version " + version;
document.getElementById("notess_"+appId).value = textvalue;
}
i think that is what you need