Pass textarea value to javascript with button onclick - javascript

I have a below PHP code to pass TextArea value to call another PHP page using button onclick. When I type some chars in the text area and click on the button, it does not take value to the mspec parameter.
echo "<TEXTAREA name=Tranrules cols=100 rows=5></TEXTAREA>"
echo "<INPUT TYPE=BUTTON VALUE=\"Add Mapping\"
onClick=\"javascript:JSopenReportWindow('sample8.php?mspec=$Tranrules');\" style=\"color:black; width:153px;\">";
Javascript is below
<script language="JavaScript">
function JSopenReportWindow(URL) {
popupWin = window.open(URL, 'Report',
'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=1,resizable=1,width=675,height=600');
popupWin.focus(); // bring window to front
}
</script>

here is a little sample of what you should be doing instead:
<script>
function popup(name){
var text = document.getElementsByName(name)[0].value;
alert(text);
}
</script>
<textarea name="Transrule"></textarea>
<input type="button" value="submit" onClick="javascript:popup('Transrule');" />

When You echo the HTML, it is HTML, so You cant access element's value by adding $ to name, You should use ID instead of Name and access it the right way.
http://jsfiddle.net/bE84a/
echo "<TEXTAREA id=Tranrules cols=100 rows=5></TEXTAREA>"
echo "<INPUT TYPE=BUTTON VALUE=\"Add Mapping\"
onClick=\"javascript:JSopenReportWindow('sample8.php?mspec='+document.getElementById('Tranrules').value);\"
style=\"color:black; width:153px;\">";

Related

how do I show result in an input field?

I want to know how to put some results in the form'nieuwticket2'
for example: $anaam needs to be outputted in input field.
What is the best and easiest way to to this?
function zoekf() {
var zoektxt = $("input[name='zoek']").val();
$.post("zoek.php", {
zoekval: zoektxt
}, function(output) {
$("#output").html(output);
});
}
<form name="nieuwTicket2" action="nieuwTicket.php" method="POST">
<button type="button" onclick="bestaandek()" id="bk">bestaandeklant</button>
<br>
<input name='zoek' type="text" placeholder="zoeken in Achternaam" onkeydown="zoekf();" class='hidden2' />
<input type="submit" value=">>" name="zoekk" class='hidden2' />
</form>
<div id="output">
</div>
<?php $connectie=v erbinddatabase(); $output='' ; if (isset($_POST[ 'zoekval'])) { $searchq=$ _POST[ 'zoekval']; $searchq=p reg_replace( "#[^0-9a-z]#i", "",$searchq); $leesKlantQuery=m ysqli_query($connectie,
"SELECT * FROM klant WHERE klantAchternaam LIKE '%$searchq%';"); $count=m ysqli_num_rows($leesKlantQuery); if($count==0){ $output='geen resultaten' ; }else{ while($row=m ysqli_fetch_array($leesKlantQuery)){ $anaam=$ row[ 'klantAchternaam']; $vnaam=$row[ 'klantNaam']; $kid=$row[ 'klantId']; $output.='<div>' .$vnaam.
' '.$anaam. ' '.$kid. '</div>'; }}} echo($output); ?>
You can't be injecting divs into an input field:
$output .= '<div>'.$vnaam.' '.$anaam.' '.$kid.'</div>';
If you really want it in an input, concatenante:
$output .= $vnaam.' '.$anaam.' '.$kid.', ';
Then add as:
<input id="output" type="text" />
$.post("zoek.php", {zoekval: zoektxt}, function(output){
$("#output").html(output);
});
However, if you have multiple rows, you may want to use textfield instead:
<textfield id="output"></textfield>
$.post("zoek.php", {zoekval: zoektxt}, function(output){
$("#output").text(output);
});
You can do it like this
<script type="text/javascript" language="javascript">
$('#output').val(output);
</script>
And change the div with #output to <input type="text" value="" id="output">
Another option without Jquery is,
innerHTML sets the text (including html elements) inside an element.
Normally we use it for elements like div, span etc to insert other
html elements inside it.
For your case you want to set the value of an input element. So you
should use the value attribute.
Change innerHTML to value
document.getElementById('add').value = sum;
from this answer

Div with contentEditable wont post into form using Javascript

Okai, so I have this div:
// DESCRIPTION AREA
$body_html .= "<div id='seq-desc-".$seq_id_d."' contenteditable='true' data-text='Det som skal skje...'>";
$body_html .= $seq_desc_d;
$body_html .= "</div> ";
and this textarea:
$body_html .= "<textarea id='seq-desc-area-".$seq_id_d."' name='deta-".$seq_id_d."' style='display: none;'></textarea></td>";
In my form I use the following code to activate my Javascript code:
"<form action='planner_seq_save.php' id='save-".$seq_id_d."' name='save-".$seq_id_d."' method='POST' onsubmit='return getContent".$seq_id_d."'>";
getContent is defined like this:
function getContent'.$seq_id_d.'(){
document.getElementById("seq-desc-area-'.$seq_id_d.'").value = document.getElementById("seq-desc-'.$seq_id_d.'").innerHTML;
}
How come I get an empty return in my database when using POST?
I use $_POST['deta-(the id)'] to fetch my post.
Also I save my form using this code on a standard button. Could this make onsubmit not work?
onclick='document.forms['save-".$seq_id_d."'].submit();'
Been trying to find out what the problem is for a while now, and I really need someone elses opinion.
UPDATE:
Using console.log() I get no return within the function. So the function isn't running.
Full code can be found here
It looks like the submit event is not triggered when triggering the submit() method, therefore the onsubmit handler is not called. See another question for more info.
So you can try removing the onsubmit handler and trigger the getContent function from the onclick's one:
onclick='submitForm(id)'
function submitForm(id){
getContent(id);
document.forms(id).submit();
}
rename function getContent-'.$seq_id_d.'() to getContent_'.$seq_id_d.'()
correct textarea id in function document.getElementById("seq-desc-area-'.$seq_id_d.'").value to document.getElementById("seq-deta-area-'.$seq_id_d.'").value
correct function call in onsubmit onsubmit='return getContent-".$seq_id_d."' to onsubmit='return getContent_".$seq_id_d."()'
suppose that is all :)
full code
<?php
$seq_id_d = 1;
var_dump($_REQUEST);
?>
<div id='seq-desc-<?php echo $seq_id_d; ?>' contenteditable='true' data-text='Det som skal skje...'>werwerwqrewrqwer</div>
<form id='save-<?php echo $seq_id_d; ?>' name='save-<?php echo $seq_id_d; ?>' method='POST' onsubmit='return getContent_<?php echo $seq_id_d; ?>()'>
<textarea id='seq-deta-area-<?php echo $seq_id_d; ?>' name='deta-<?php echo $seq_id_d; ?>' style='display: none;'></textarea>
<input type="submit" value="ok">
</form>
<script>
function getContent_<?php echo $seq_id_d; ?>(){
document.getElementById("seq-deta-area-<?php echo $seq_id_d; ?>").value = document.getElementById("seq-desc-<?php echo $seq_id_d; ?>").innerHTML;
}
</script>

Dynamically added field in javascript and saving the data to mysql

Iam having a small issues with my dynamic form in javascript. when i click add supplier button, two form fields are added automatically. i can add how much fields ever i wanted. But when i click add supplier button the previously added form values are going off. What's the mistake iam doing?
<html>
<head>
<script type="text/javascript">
function addTextArea(){
var div = document.getElementById('div_quotes');
div.innerHTML += "<input type='text' name='sup_name[]' />";
div.innerHTML += "<input type='text' name='sup_email[]' />";
div.innerHTML += "\n<br />";
}
</script>
</head>
<body>
<form method="post" action="ajax.php?tender_id=<?php echo $tender_id ?>">
<div id="div_quotes"></div>
<input type="button" value="Add Supplers" onClick="addTextArea();">
<input type="submit" name="submitted">
</form>
</body>
</html>
Use appendChild() instead of innerHTML that will prevent the existing form elements from getting overwritten.
function addTextArea(){
var div = document.getElementById('div_quotes');
var temp = document.createElement('div');
temp.innerHTML ="<input type='text' name='sup_name[]' /><input type='text' name='sup_email[]' /><br />";
div.appendChild(temp );
}

Display variable from link into input value

I have this link to an image inside td table:
....
echo "</tr><tr>";
for ($i=0; $i<count($prov_name);$i++) {
echo "<td><a onclick='showDiv()' ><img src='images/approved.png'/></a></td>";
}
}
echo "</tbody>";
echo "\t</table>\n";
echo "</div>";
?>
and then I have a hide div that appears when I clicked the link above.
<div id="approve" style="height: 300px;">
<input type="text" name="ProvSelected" value="" readonly>
....
and what I want is when I click the link image pass the variable $prov_name[$i] to the input value inside the div that appears.
How can I do that? I hope you can help me. Thanks.
First Click
then.. with variable inside input value..
Pass the prov name as an argument to showDiv().
foreach ($prov_name as $prov) {
echo "<td><a onclick='showDiv(\"$prov\")' ><img src='images/approved.png'/></a></td>";
}
Then showDiv should be defined as something like:
function showDiv(prov) {
$("#approve").show().find("input[name=ProvSelected]").val(prov);
}
I would rewrite the code like this:
Remove the <a> tag...you don't need it
Rewrite <img> with onclick added:
echo "<td><img src='images/approved.png' onclick='showDiv(\"".$prov_name[$i]."\")'/></td>";
Add an ID for the input
<input id="myInput" name="ProvSelected" value="" readonly>
Update the function showDiv()
function showDiv(val) {
//your code plus
document.getElementById("myInput").value = val;
}

jQuery php variable problems

I'm trying to catch the correct variable in this jQuery function but whatever the button I click, the alert always shows the name of the first label that I have. Any ideas? Thank you.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$(".submit").click(function() {
var name = $("#name").val();
alert(name);
});
});
</script>
</head>
<body>
<?php
include("connection.php");
$link=connect();
$result=mysql_query("select * from names",$link);
if (mysql_fetch_array($result) == 0)
{
echo "No names registered. Add one";
}
else
{
while($row=mysql_fetch_array($result))
{
echo "<html>
<label>".$row["name"]."</label>
<input type='button' class='submit' value='Delete'>
<input type='hidden' id='name' value=".$row["name"].">
<br>
</html>";
}
mysql_free_result($result);
mysql_close($link);
}
?>
</body>
</html>
Use DOM navigation to get the value from the adjacent input:
$( document ).ready(function() {
$(".submit").click(function() {
var name = $(this).next().val();
alert(name);
});
});
Also, there should just be one <html> block in the page. Don't put that in the loop.
At first, html ID should be unique.
Try using html5 data attributes and remove your hidden form element:
while($row=mysql_fetch_array($result))
{
echo "<input type='button' class='submit' value='Delete' data-value=".$row["name"].">";
}
And JS part:
<script type="text/javascript">
$( document ).ready(function() {
$(".submit").click(function() {
alert($(this).data('value'));
});
});
You are re-using the same id - name - multiple times:
while($row=mysql_fetch_array($result))
{
echo "<html>
<label>".$row["name"]."</label>
<input type='button' class='submit' value='Delete'>
<input type='hidden' id='name' value=".$row["name"].">
<br>
</html>";
}
You should wrap your fields in individual forms (not html elements) and use the name attribute:
while($row=mysql_fetch_array($result))
{
echo "<form action='' method='post'>
<label>".$row["name"]."</label>
<input type='button' class='submit' value='Delete'>
<input type='hidden' name='name' value=".$row["name"].">
<br>
</form>";
}
This will make your form also work without javascript.
Then, in your javascript you can do:
$(".submit").click(function(e) {
e.preventDefault();
var name = $(this).closest('form').find('input[name="name"]').val();
...
Or if you need to post it using ajax afterwards:
var data = $(this).closest('form').serialize();
(or you catch the submit event of the form instead)
In addition to some of the other answers, you don't really need the hidden input. Could just change the button input to:
<input type='button' class='submit' name='".$row["name"]."' value='Delete'>
Then change your JQuery selector to:
var name = $(this).attr('name');

Categories

Resources