Display variable from link into input value - javascript

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;
}

Related

Unable to get button value with loop Jquery

I am working with jquery and PHP,I want to display "buttons" according to database value(dynamic) and want to get button values in jquery, I am using "input type hidden", But right now getting value="1"(static), But I want to get "correct" value (if I select button 2 then 2 value should get in jquery)
Here is my HTML code
<?php $j=$records['start_range'];
$max= $records['end_range'];
for($i=$j;$i<=$max; $i++) { ?>
<button class="btn btn-scale btn-scale-asc-<?php echo $i; ?>">
<?php echo $i; ?>
<input type="hidden" <?php if($records['IsRatingQuestion']=="" || empty($records['IsRatingQuestion'])){ ?>name='ques_<?php echo $records['ques_id']; ?>' <?php } else{ ?>name='rangeR_<?php echo $records['ques_id']; ?>' <?php } ?> id="ratings" value="<?php echo $i; ?>">
</button>
<?php } ?>
Here is the script, Where I am wrong?
<script>
$(document).ready(function(){
$("#next1").click(function(){
var rating =$("#ratings").val();
alert(rating);
});
});
</script>
Before anything else, you need to remove input from inside that button. It's not a valid HTML.
Moreover, as mentioned in the comments, you cannot have the same id for all inputs, so I'd just remove it.
How about something like this:
$(document).ready(function() {
$('.item').each(function() {
var $button = $(this).find('button')
var $input = $(this).find('input')
$button.click(function() {
alert($input.val())
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<button>1</button>
<input type="hidden" value="1">
</div>
<div class="item">
<button>2</button>
<input type="hidden" value="2">
</div>
<div class="item">
<button>3</button>
<input type="hidden" value="3">
</div>
<div class="item">
<button>4</button>
<input type="hidden" value="4">
</div>
As far as I am understanding, you just want to show the value of the dynamic button using jquery. For this you just need to pass the value to the button using data attribute and then you can get the value using jquery.
<?php $j=$records['start_range'];
$max= $records['end_range'];
for($i=$j;$i<=$max; $i++) {
echo '<button class="get-value" data-value="'.$i.'">Button '.$i.'</button>';
} ?>
<input type="text" id="show-value">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('click', '.get-value', function(){
var button_value = $(this).data('value');
$('#show-value').val(button_value)
});
});
</script>
I don't think putting an <input> inside of a <button> is valid html (although it seems to work?). Instead you can just assign those values as attributes of the button itself. Also ids have to be unique, so if you have a bunch of buttons with the same id, that is also invalid. I tend to stay away from ids and just use classes to avoid this.
Also, rather than having a bunch of choppy php, you can build a single string of html and echo it back all at once. By using double qoutes " on the outside of a string, you can use single quotes ' on the inside and drop variables right into the string without escaping or concatenating anything. Although you have to wrap associative arrays in brackets {} for it to parse correctly. PHP strings.
I'm guessing $name isn't a static variable, but without seeing the rest of your code, this is just an example:
<?php
$html = "";
$name = ($records["IsRatingQuestion"] == "" || empty($records["IsRatingQuestion"])) ?
"ques_{$records["ques_id"]}" :
"rangeR_{$records["ques_id"]}";
for($i = $records["start_range"]; $i <= $records["end_range"]; $i++) {
$html .= "<button class='btn btn-scale btn-scale-asc-$i ratings' name='$name'>$i</button>";
}
echo $html;
?>
$('.btn.ratings').on('click', function() {
//$(this).text() = $i
//$(this).attr('name') = $name
});

Hide textbox if empty

I want to make this code hidden if value is null,
so if the value is empty, remove this div.
div
<?php echo "test" ?>
<input type="text" id="textfield" name"test" value="<?php echo $design_value; ?>" />
div
I can fill value with PHP so when my site load value is null.
so I need any javascript code that can hide this div if no text on a textbox.
So please try to find any simple code. You can use Javascript or jQuery or whatever you think is better for this.
get Textbox value , Check if it empty then remove div.
var getTextVal= $('#textfield').val();
if(getTextVal == ""){
$('#textfield').closest('div').remove();
}
You can use JQuery $(document).ready. This event is fired after all elements in the page have initialized and recieved their values:
$(document).ready(function() {
if ($("#textfield").val == '')
$("#textfield").hide();
});
if value == '' then hide input field by adding display property to none of that element.
You can do that by running simple javascript code as shown below,
<div id="hide">
<?php echo "test" ?>
<input type="text" name="test" id="textfield" value="<?php echo $design_value; ?>" />
</div>
<script>
var hide = document.getElementById("hide");
var input = document.getElementById("textfield")
if(input.value == ""){
hide.style.display = "none";
}
</script>
You can do it by php (it won't show any output):
<?php if ($design_value != null) { ?>
<input type="text" id="textfield" name"test" value="<?php echo $design_value; ?>" />
<?php } ?>
Or in this way (a hidden field):
<input type="<?php echo ($design_value != null) ? 'text' : 'hidden'; ?>" id="textfield" name"test" value="<?php echo $design_value; ?>"/>
In plain JavaScript:
var textField = document.getElementById('textfield');
var text = textField.value;
textField.parentNode.style.display = (text) ? 'block' : 'none';

How to submit LOTS of buttons

I'm displaying rows of data from a mysql database, and on each row I have three icons that I'd like to function as buttons. When an icon is clicked, I'd like to send the user to another page, and send that page both which icon was clicked and what row it was on. Here's some sample code:
<form action="nextpage.php" method="POST">
while ($row = $result->fetch_assoc))
{
echo '<input type="image" src="button1.png" name="button1">';
echo '<input type="image" src="button2.png" name="button2">';
echo '<input type="image" src="button3.png" name="button3">';
echo $row["cName"], '<br/>', PHP_EOL;
}
</form>
I've tried adding a value field for each input icon, but that didn't seem to work. I've tried putting the row identifier in the input's name, but it came out with changed characters, making it difficult to extract.
This page will likely display up to a hundred rows from the database, so aside from creating a separate form for each icon on each row (300 forms), what's the best way to go about this?
If you can use jquery, here is how I would approach it:
<form action="nextpage.php" method="POST">
<input type="hidden" id="hidden-icon" name="icon" value="" />
<input type="hidden" id="hidden-row" name="row" value="" />
</form>
<?php
$row_num = 0;
while ($row = $result->fetch_assoc))
{
echo '<img src="button1.png" />';
echo '<img src="button2.png" />';
echo '<img src="button3.png" />';
echo $row["cName"], '<br/>', PHP_EOL;
$row_num++;
}
?>
<script type="text/javascript">
$('.click-register').on('click', function (e) {
//Stop the link from jumping to the top of the page
e.preventDefault();
//Fill in the hidden form values
$('#hidden-icon').val($(e.target).data('icon'));
$('#hidden-row').val($(e.target).data('row'));
//Submit the form
$('form').submit();
});
</script>
That code is off the top of my head and untested, but here's the general idea:
First, move the icons outside of the form, as this approach doesn't require them to be inputs any longer;
Since the icons don't need to be inputs, we make them images inside of anchors;
We put the data we need on the anchors (data-icon and data-row);
Using jquery (in this case, you could do this pure javascript if you needed to), we:
Listen for any clicks of the anchors;
Grab the data from the clicked link and fill in our hidden form fields; and
Submit the form
Again, I used jquery because it's common and familiar to many. You can accomplish this with many other javascript frameworks or even pure javascript if that was desireable. Conceptually though I think it is sound.
If you don't want to go with javascript, the option of using links instead of POST'ing with a form is potentially viable.
Here's what that might look like:
<?php
$row_num = 0;
while ($row = $result->fetch_assoc))
{
echo '<img src="button1.png" />';
echo '<img src="button2.png" />';
echo '<img src="button3.png" />';
echo $row["cName"], '<br/>', PHP_EOL;
$row_num++;
}
?>
Hope that helps!
Based on the comment by mcgraphix, I eliminated the form entirely and changed all the input to links and appended the button id and row id to each link, as shown below:
while ($row = $result->fetch_assoc))
{
echo '<img src="button1.png">';
echo '<img src="button2.png">';
echo '<img src="button3.png">';
echo $row["cName"], '<br/>', PHP_EOL;
}
Thanks, mcgraphix! :)
PS - As this posted, I saw basically the same answer by xjstratedgebx, so thank you as well!
This might seem a bit of a strange idea but you can just use submit buttons for each button and then style the image over top of the button. The good thing about submit buttons is that only the button that is pressed is sent through the request, so effectively you only need one form for the whole page, and a unique name for each button.
<form action="nextpage.php" method="POST">
while ($row = $result->fetch_assoc))
{
echo '<button class="img-button b1" name="$row["cName"]button1" />';
echo '<button class="img-button b2" name="$row["cName"]button2" />';
echo '<button class="img-button b3" name="$row["cName"]button3" />';
echo $row["cName"], '<br/>', PHP_EOL;
}
</form>
I don't know PhP so not sure if that compiles, but hopefully you get the idea that as long as the buttons have unique names, only one name will be sent through the request.
Then in your style sheet something like the following (not tested):
.img-button {
height: 20px;
width: 20px;
}
.button1 {background-image: url('button1.png');}
.button2 {background-image: url('button2.png');}
.button1 {background-image: url('button2.png');}
Hope that is useful!

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>

Pass textarea value to javascript with button onclick

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;\">";

Categories

Resources