Automatically copy text when clicked on input area (multiple lnputs) Javascript - javascript

I'm trying to get input area to copy text when the user clicks on it. The code itself is selecting correct text but when i add copy function it won't copy correct text. Problem is that this is a template which website use to add elements to the website (so multiple submissions will use same code).
echo '<div class="input-group input-group-sm">';
echo '<span class="input-group-addon input-label-' . strtolower($server->status_text) . '"><i class="fa fa-server" aria-hidden="true"></i> ' . $server->status_text . '</span>';
echo '<input type="text" onclick="this.select()" value="' . $server->address . (($server->connection_port != '25565') ? ":" . $server->connection_port : null) . '">';echo '</div>';
Output on site:
<div class="input-group input-group-sm">
<span class="input-group-addon input-label-online"><i class="fa fa-server" aria-hidden="true"></i> Online</span>
<input type="text" onclick="this.select()" class="form-control" value="Server IP">
</div>
Edit: It looks like i will need to do this via button as using "onclick" is crashing my website. Not sure how to do it with button and without some sort of ID system. The servers are listed via "table" if that helps.

This should work for you:
<input type="text" onclick="this.select(); document.execCommand('Copy');" class="form-control" value="Server IP">
The code you were trying has unescaped parentheses.
This works with multiple input elements: https://jsfiddle.net/xx0gs6Lw/
EDIT
That must be only syntax error then, can you post your exact code? It should look something like this:
echo '<input type="text" onclick="this.select(); document.execCommand(\'Copy\');" value="' . $server->address . (($server->connection_port != '25565') ? ":" . $server->connection_port : null) . '">';

Related

How to create dynamic textarea which includes php $_POST code

I got a little problem with php/js. I want to create a website for a school project which is a communotary food receipe oriented website. And here I'm struggling with my page 'submit receipe'.
To be exact the problem is that I create, with a button, some dynamic textarea in order to represents the steps of a receipe, to do so I use a js eventHandler. And here I have a problem because I want to insert in this js code the post value that the user has typed. But I honestly don't know how to do this, I get the fact that js is executed before php so do I have a solution to bypass this problem ?
Here my code :
// The js script
function createNewElement() {
var txtNewInputBox = document.createElement('div');
var php = "<?php if(isset($_POST['boxExplain_" + numStep + "']))echo $_POST['boxExplain_"+ numStep + "']?>";
txtNewInputBox.innerHTML = "<label for='box-explain'>Step " + numStep + "</label>"+
"<br>"+
"<textarea type='text' class='box-explain' name='boxExplain_" + numStep + "'" +
"value='' placeholder='BlaBla.'>" +
php + "</textarea>" +
'<i class="fas fa-minus-circle '+ numStep +'"></i>';
numetape++;
document.getElementById("step-box").appendChild(txtNewInputBox);
}
And here the HTML :
<div class="explain-box">
<h3>Explanations </h3>
<label for="box-explain">Step 1</label>
// The first one is not dynamic
<textarea type='text' class='box-explain' name='boxExplain_1' value="" placeholder="BlaBla"><?php if (isset($_POST['boxExplain_1'])) echo $_POST['boxExplain_1'] ?></textarea>
//here goes the js one
<div id="step-box"></div>
<div id="dynamicCheck">
<input class="btnStep" type="button" value="add Step" onclick="createNewElement();" />
<i class="fas fa-plus"></i>
</div>
</div>
I hope it was clear enough, thanks for your help.

What event object should be used when using an autocomplete function?

I have a form that autocompletes the client name based on the input from the user.
HTML:
<label for="client">Facility Name/Account Number: </label>
<input type="text" oninput="dropdownTip(this.value)" id="client" NAME="client" style="width:100%;">
<label for="iname">Interpreter Name:</label>
<input type="text" style="width:100%; text-transform:capitalize;" id="interpreter" name="iname" value="<?echo $interpreter;?>"/><BR>
Javascript:
jQuery(document).ready(function(){
$('#interpreter').autocomplete({source:'otp_autocomplete.php', minLength:2});
});
jQuery(document).ready(function(){
$('#client').autocomplete({source:'otp_client_autocomplete.php', minLength:2});
});
The same form also populates additional fields based on the value of the client field using the following php generated javascript:
PHP:
<script type="text/javascript">
function dropdownTip(value){
var preamble = 'No Special Instructions';
<?//Load options from DB.
while($row = mysqli_fetch_array($statuses)){
echo "if(value == '" . $row['client_id'] . " - " . str_replace("'","\'",$row['client_name']) . "') {
preamble = '" . $row['Special_Instruction'] . "';
} ";
}
?>
console.log(value);
document.getElementById("result").innerHTML = preamble;
}
</script>
Everything is working great, except that I would like the function "dropdownTip" to trigger as soon as the autofill option is selected. Currently it only activates once another field is clicked on, and does not activate at all in Internet Explorer.
I have been trying different HTML DOM events listed here:
https://en.wikipedia.org/wiki/DOM_events
But I can't seem to find the right one. Is there one that will provide the functionality I am looking for, and work with IE?

Merging 2 search forms into 1 input, plus checkboxes

On my site I have a main search (powered by Google, placed throughout the site) and I have now created a second search (on its own page, which searches my DB for images based on user input text) which is a totally separate search to the google one.
What I want to do -
I want both Search forms to share a single text input field, but allow the user to choose which search to use (Google or Images Only) via radiobutton.
So we'd have:
[search input field][go] (o)Use Google (o)Image Search only
I'm no coder but can hack enough to just about get by, it just takes me a day or two to figure out and get working.
What I need and would save me a great deal of time, as I'm stumped on how to proceed with this or if it is even possible! If someone could tell me A) If it's possible, and B) A few pointers if it is. For instance I'm guessing it will probably need a bit of JavaScript to make it possible?
Any pointers would be appreciated, then I can see what I can do.
All the best,
Chris
// My Stand-alone Image Search Page ////////////////////////////////
<form method="post" action="imagesearch?go" id="search-form">
<input type="text" name="name">
<input type="submit" name="submit" value="Search">
</form>
// code for above form //
if(isset($_POST['submit'])){
if(isset($_GET['go'])){
if(preg_match("/^[ a-zA-Z]+/", $_POST['name'])){
$name=$_POST['name'];
$sql="SELECT ID FROM ImageTable WHERE Name LIKE '%" . $name . "%' Order by Date Desc LIMIT 50";
//-run the query against the mysql query function
$result=mysql_query($sql);
// Create while loop and loop through result set//
$content .= ' <p><div id="wrapper">';
while($row=mysql_fetch_array($result)){
$id=$row['ID'];
$img = new Image($id);
// Format results//
$content .= '<div id="imgrt"><img src="/img/M/'.$img->ID.'.jpg" class="searchimg"><br>'.$img->Name.'';
$content .= '</div>';
}
$content .= '';$content .= '</div>';
}
else{
$content .= ' <p>Please enter a search query</p>';
}
}
}
// End of Stand-alone image search page /////////////////////////
---------------------------------------------------------------------------
// My sites main Google powered Search
<form action="http://www.example.com/gsresults" id="cse-search-box" class="searchmain">
<input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXX" />
<input type="hidden" name="cof" value="FORID:XX" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" class="mainsearch">
<input type="submit" name="sa" value="Go" class="mainsearchbutton"/>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang="></script>
OK so here we go. If you plonk this in an empty html file you can see it in action (Tried to make a jsfiddle but didnt work for some reason). What this does is set an "active" id on the selected combo option, and when you click the submit button it grabs the value of the combo option with that id, and goes to the page of that value. so if you click google and then the button you go to google.html, and same goes for image, image.html. If you want some more specifics you can ask, but thats the main logic there.
<script>
function replaceActive(obj) {
var activeElm = document.getElementById("active");
activeElm.id = activeElm.id.replace("active", "");
obj.id = "active";
}
function formFunction(obj) {
obj.action = document.getElementById("active").value + ".html";
}
</script>
<form action="#" onsubmit="return formFunction(this);" method="post">
<input type="text" />
<select>
<option value="google" id="active" onclick="replaceActive(this);">Google</option>
<option value="image" onclick="replaceActive(this);">Images</option>
</select>
<input type="submit" />
</form>
Basically you can change that "formFunction()" function's code and and use "document.getElementById("active").value" to do what ever you wanted to do.

How to get value of JS promptbox, then pass it to PHP and save it in the database?

I have a home_admin.php file where the user can reject an entry with this code:
echo "
<td>
<a href=changeStatReject.php?id=" . $row['id'] . ">" . "
<img src='media/reject.png'>" . "
</a>
</td>
";
Once the link is clicked, it will direct the user to the changeStatReject.php page with the specific ID of the entry.
My goal is to show a JavaScript PromptBox asking the reason for rejecting before the code is executed.
I use this code:
function MyReason(){
var reason = prompt("Reason:");
document.getElementById("reason").value = reason;
document.getElementById("form").submit();
}
Then I add this to the home_admin.php page:
<form id="form" method="POST" action="changeStatReject.php">
<button onclick="MyReason()">Click Me!</button>
<input type="hidden" id="reason" name="reason"/>
</form>
Even though I get the value from the prompt box, the script for the changeStatReject action is not working anymore.
I think there's a conflict with the <form action="changeStatReject.php"> and <a href=changeStatReject.php?id=" . $row['id'] . ">
Any advice on how to get the prompt box value, save it to the database and at the same time update (reject) the status of the specific entry?
Thanks Mates,
<?php
echo "<td> <a href= "#" onclick='myreason(".$row['id'] . "')>" . "<img src='media/reject.png'>" . "</a></td>";
?>
.............
function MyReason(id){
id.preventDefault();
var reason = prompt("Reason:");
document.getElementById("reason").value = reason;
document.getElementById("id").value = id;
document.getElementById("form").submit();
}
.............
<form id="form" method="POST" action="changeStatReject.php">
<input type="hidden" id="id" name="id" />
<input type="hidden" id="reason" name="reason"/>
</form>
...............
Now you can handle the POST variables in your changeStatReject.php as you want.
add <input type="hidden" name="id" value='id_you_need_to_pass'/> in your form and call changeStatReject.php through this form submit.

javascript button always disabled

This has probably been answered before, and I'd like to apologize for reposting, but since I'm not sure where to start fixing it, I'm not sure what to try and look up for a solution. So bear with me please.
I've got a form for a CMS where I've used a tutorial to dynamically add fields where I need them. EX: The form loads with 0 field entries for bullet points, but if they want some, they can click a button that says add bullet, and voila, a entry field appears. It's in an array. Submits to the DB just fine. The delete button is disabled if there's no fields displayed. All that works fine. If you start out with no fields, on a fresh form. The problem falls into the edit version of this form.
Here's my code:
<div id="bullets">
<?php
$sql_bullet_display = 'SELECT * FROM exampleDB.prod_feature_bullets WHERE product_name ="'.$row_product_details['product_name'].'";';
$res_bullet_display = mysql_query($sql_bullet_display) or die(mysql_error().'<br />bad query<br />'. $sql_bullet_display);
$newNum = 1;
while($row_bullet_display = mysql_fetch_assoc($res_bullet_display)){
?>
<div id="bullet<?php echo $newNum; ?>" class="clonedInput2">
<input type="hidden" id="bullet_order<?php echo $newNum; ?>" name="bullet[<?php echo $newNum; ?>][bullet_order]" value="<?php echo $newNum; ?>" />
<input type="text" id="bullet_text<?php echo $newNum; ?>" name="bullet[<?php echo $newNum; ?>][bullet_text]" value='<?php echo $row_bullet_display['bullet_text']; ?>' />
<input type="text" id="bullet_subtext<?php echo $newNum; ?>" name="bullet[<?php echo $newNum; ?>][bullet_subtext]" value='<?php echo $row_bullet_display['sub_text']; ?>' />
</div>
<?php
$newNum++;
}
?>
</div>
<div>
<input type="button" id="btnAdd" value="Add Bullet" />
<input type="button" id="btnDel" value="Remove Bullet" />
</div>
and this is the Javascript that goes with it.
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput2').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
$('<div id="bullet' + newNum + '" class="clonedInput2"><input type="hidden" id="bullet_order' + newNum + '" name="bullet[' + newNum + '][bullet_order]" value="' + newNum + '" /><input type="text" id="bullet_text' + newNum + '" name="bullet[' + newNum + '][bullet_text]" /><input type="text" id="bullet_subtext' + newNum + '" name="bullet[' + newNum + '][bullet_subtext]" /></div>').appendTo('#bullets');
// enable the "remove" button
$('#btnDel').attr('disabled','');
// business rule: you can only add 15 bullets
if (newNum == 15)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput2').length; // how many "duplicatable" input fields we currently have
$('#bullet' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').attr('disabled','');
// if no element remains, disable the "remove" button
if (num == 0)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
This has worked really well for me in the past, but like I said, it only works on a fresh form that's starting out at 0 bullet entry fields. My problem lies in creating the edit form. I've already got two bullets in the DB that are displayed when you hit edit. The add button shows enabled. The delete button is always disabled when the form first comes up. Even if there's two entries displayed and everything is filled correctly.
However if I click the add button, so a third entry field will show up, it will enable the delete button. Very frustrating. I'm not sure what to go about editing so it'll say: okay, on the page load, we recognize that the DB already filled out two bullets, so the delete button should be active from the start. Every change I've tried so far just breaks the button.
Thanks in advance for the help!
In your javascript code, you have initiliazed the deletebutton to be disabled. you need to check the number of bullets you have created from db...
Modify your last code from:
$('#btnDel').attr('disabled','disabled');
to
if($('.clonedInput2').length<=0){
$('#btnDel').attr('disabled','disabled');
}
Try this to remove the disabled attribute
$("#btnDel").removeAttr("disabled");

Categories

Resources