Bookmarklet to auto fill textarea with random element name - javascript

I am trying to build a bookmarklet to auto-fill the textarea with attribute name="param[random-number][details]" with text.
The random-number is generated on the server and is different each time. The page HTML looks like:
<table>
<tbody>
<tr>
<td>Video Title:</td>
<td>
<input type="text" name="param[30301754][title]" value="VIDEO TITLE" autocomplete="on">
</td>
</tr>
<tr>
<td>File name:</td>
<td>
<input type="text" name="param[30301754][filename]" value="FILE NAME" autocomplete="on">.3gp
</td>
</tr>
<tr>
<td>Description: </td>
<td><textarea name="param[30301754][description]"></textarea>
</td>
</tr>
</tbody></table>

Assuming there's only one element like <textarea name="param[xxx][description]"> on the page, you can use a jQuery wildcards as a selector.
$("textarea[name$=\\[description\\]]").val("test");
Update
To do this as a simple bookmarklet, you'll need to prompt the user for the text they want to auto-populate (or get it from somewhere else), and wrap the whole thing in an anonymous function. You also need a reference to the jQuery library. (See this article for more information on how to create a bookmarklet.)
This should do it for your case:
javascript: (function () {
if (!($ = window.jQuery)) {
script = document.createElement('script');
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
script.onload = doAutoFill;
document.body.appendChild(script);
} else {
doAutoFill();
}
function doAutoFill() {
var textToFill = prompt("Enter text to fill:");
if (textToFill != null) $("textarea[name$=\\[description\\]]").val(textToFill);
}
})();
Here's an updated fiddle as an example: jsfiddle

I don't see your bookmarklets button so I'm making some assumptions. jsfiddle
var someText = "text for the textbox";
$('#myButtonId').on('click', function(){
$('textarea').val(someText);
});

Related

Webpage vanishes when clicking button to send data to server with jQuery

I am having a issue with HTML and jQuery programming.
I am making a bulletin board with HTML and jQuery, with 2 textboxes and a button.
$(document).ready(function(e) {
$('save').click(function() {
const name = $('name').val();
const words = $('words').val();
$.post(
"http://localhost:8000/board_write",
{
name: words
},
function(data, status) {
}
)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<td class="vert" bgcolor="">
Name
</td>
<td>
<input class="name">
</td>
</tr>
<tr>
<td bgcolor="">
Anything you'd like to say
</td>
<td>
<textarea class="words" cols="40" rows="5" placeholder="please enter anything">
</textarea>
</td>
</tr>
<tr>
<td>
<input class="save" type="button" onclick="write()" value="Save">
</td>
</tr>
</table>
And, I also coded with jQuery to send the data of the two textboxes to localhost:8000, which is a node.js server to log the data to the console.
When I click the button, the page vanishes. What causes the situation? And, how can I solve the problem?
You have onclick = "document.write()"; that explicitly deletes the document . https://www.w3schools.com/jsref/met_doc_write.asp
Explanation: the code in onclick is scoped such: {window{document{element{}}}}; if you meant to implement a write() function, do so and invoke it by window.write(), or name it something differently to document.write. Otherwise, write() will de resolved to document.write().

Uncaught TypeError: undefined is not a function on .GetElementByID

Here's what I'm trying to do:
I have a table set up as follows:
<tbody id="entryTable" class="entryHead">
<tr id="1">
<td id="1">1</td>
<td class = driver></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="2">
<td>2</td>
<td class = driver></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="3">
I'm trying to get the information from this form to fill in the tables:
<form>
Driver Name:<br>
<input type="text" name="name">
<br>
Driver Draw:<br>
<input type="text" name="draw">
<div id="button">Add!</div>
</form>
I've written this bit of jquery to try to do that:
var main = function () {
$('#button').click(function ( ) {
var name = $('input[name=name]').val();
var draw = $('input[name=draw]').val();
var clear = "clear";
var draw2 = "#"+draw;
console.log(draw2);
$("draw2").getElementById(".driver").innerHTML = name;
}
)};
When I press the "Add" button I've made, I get the error "Uncaught Type Error: undefined is not a function" that points to .getElementByID.
Maybe I'm approaching it all wrong, but I'm trying to get the name of the driver to appear in the for the with the id of the number the driver drew.
Any ideas?
You're using jQuery, and you cannot use the standard getElementById on a jQuery collection object. You can use .find() instead, or get the real Element at some index. Here are two solutions:
$("selector").find("#your-id");
// or
$("selector")[0].getElementById("your-id");
Since, its jquery, it has the following syntax:
$(<selector>).function()...;
where, <selector> is the selector of the object(.class and #id).
so, instead of $("draw2").getElementById(".driver").innerHTML = name; use this:
$(".driver").html(name); or, $(".driver").text(name);
Make your code as simple as possible.
Try this, first edit your HTML code. Put a different class for your two elements that contains the driver class:
<tbody id="entryTable" class="entryHead">
<tr id="1">
<td id="1">1</td>
<td class = driverName></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="2">
<td>2</td>
<td class = driverDraw></td>
<td><div id="button">Clear!</div></td>
</tr>
Then edit your Javascript to something like this:
$(function () {
$('#button').click(function ( ) {
var name = $('input[name=name]').val();
var draw = $('input[name=draw]').val();
$(".driverName").html(name);
$(".driverDraw").html(draw);
}
)};
if .html() wont work then change it to .text()
$(".driverName").text(name);
$(".driverDraw").text(draw);
Just a tip: When using jQuery dont combine syntax from javascript cause it will just give you errors. Instead, search for the jQuery equivalent of the javascript function: like innerHTML = 0 on native javascript is only .html(0) on jQuery or getElementById on native javascript is just simply a $ sign in jQuery.
I got it to work. Here's what I ended up doing, and a summary of the project.
This is my first JavaScript/JQuery project. I'm trying to write a program for a race track I race at that will create an entry list, calculate the heat lineups based on the number the driver randomly drew when entering, and then calculate feature lineups based on their results from the heats.
Here's the form the official will use to add each driver. The "add" button will run the jQuery script to fill the driver name into the row in the table equal to the number they drew.
<form>
Driver Name:<br>
<input type="text" name="name">
<br>
Driver Draw:<br>
<input type="text" name="draw">
<div id="button">Add!</div>
</form>
A sample of the table:
<thead>
<tr class="entryHead">
<th>Draw</th>
<th>Driver Name</th>
<th>clear</th>
</tr>
</thead>
<tbody id="entryTable" class="entryHead">
<tr id="1">
<td>1</td>
<td class = "driver1" ></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="2">
<td>2</td>
<td class = "driver2"></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="3">
<td>3</td>
<td class = "driver3"></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="4">
<td>4</td>
<td class = "driver4"></td>
<td><div id="button">Clear!</div></td>
</tr>
<tr id="5">
<td>5</td>
<td class = "driver5"></td>
<td><div id="button">Clear!</div></td>
</tr>
I have 60 rows in total. Right now, the ID doesn't do anything... I just left it there because I had it there earlier while I was experimenting, and I'm leaving it there in case it's useful earlier.
Then there's the classes "driver1", "driver2", "driver3", etc. That is for jQuery to use.
Here's my jQuery script:
function Driver(draw, name) {
this.draw = draw;
this.name = name;
}
var main = function () {
$('#button').click(function ( ) {
var name = $('input[name=name]').val();
var draw = $('input[name=draw]').val();
var clear = "clear";
var draw2 = "#"+draw;
var name2 = ".driver"+draw
console.log(draw2);
console.log(name2);
$(name2).text(name);
});
}
$(document).ready(main);
I'm making an object called "Driver" that I will use later. Right now, it's just there.
Creating the variable "name2" allows "$(name2).text(name);" to find the appropriate class in the row equal to "draw", and put the driver's name in that draw. For example, if Jeff Gordon draws 24, his name would go in row 24, and the "name2" variable for him would end up being "name24".
Does that make sense?
I got this part to work for now. Thanks for your help.

OnFocus OnBlur with ASP.NET

I really don't understand why this is being so hard for me to get working:
http://jsfiddle.net/jp2code/qCExy/
It will eventually be going into an ASP.NET control, so I believe I need to pass Javascript the <textarea> control's ID.
It doesn't work.
So, in the jsFiddle, I tried using standard controls for First and Last names, but they don't work either.
EDIT:
I've been playing around with the jsFiddle, and it appears that my jsOnFocus is never called (alert never fires). However, I was able to run down a little script from someone else that makes the multiline textbox clear and reset - I just can't seem to find a way to call this from a javascript function:
function jsOnFocus(obj) {
alert("Inside the jsOnFocus.");
if (obj.Value==obj.defaultValue)
obj.Value="";
}
function jsOnBlur(obj) {
if (obj.Value==="")
obj.Value=obj.defaultValue;
}
​
Here is the HTML.
<table>
<tr><td>Message:</td><td> </td></tr>
<tr>
<td> </td>
<td>
<textarea name="txtMsg" rows="6" cols="30"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value==='')this.value=this.defaultValue;">[Write your message here or call my voice number at (555) 222-1234.]</textarea>
</td>
</tr>
<tr>
<td>Test1:</td>
<td><input type="text" name="txtTest1"
onfocus="jsOnFocus(txtTest1)"
onblur="jsOnBlur(txtTest1)" value="Test1" /></td>
</tr>
<tr>
<td>Test2:</td>
<td><input type="text" name="txtTest2"
onfocus="if(this.value=='Test2'){this.value=''};" value="Test2" /></td>
</tr>
<tr>
<td>Test3:</td>
<td><input type="text" name="txtTest3"
onfocus="if(this.value==this.defaultValue)this.value='';"
onblur="if(this.value==='')this.value=this.defaultValue;" value="Test3" /></td>
</tr>
</table>​
"Message" works, but I'd like to get the code to running in a javascript that I can place in my "js" file and use on other objects.
"Test1" is an attempt to call the javascript, but it does not work.
"Test2" works, but it does not use the technique in "Message".
"Test3" works, and it does use the technique in "Message".
Does anyone see how to make this code work in the javascript instead of inline html?
jsFiddle Link: http://jsfiddle.net/jp2code/qCExy/10/
I played around a bit with your fiddle. I'm a newb when it comes to jsfiddle though so I did not dare to try to save my changes.
Anyway, there are a few things that keep the Test1 box from working. First of all, the script in the "JavaScript" block in the fiddle is added to the page like this (check by viewing source in the Result section):
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
function jsOnFocus(obj) {
alert("Inside the jsOnFocus.");
if (obj.Value==obj.defaultValue)
obj.Value="";
}
function jsOnBlur(obj) {
if (obj.Value==="")
obj.Value=obj.defaultValue;
}
});//]]>
</script>
So your functions are not in a scope (for lack of a more precise term) where you can call them like you tried to do.
To fix this I added the script directly in the Html section inside as <script> block.
There was also a small issue with the javascript code itself. The value property is called value, not Value.
Also, I changed the onfocus and onblur attributes on the input to pass this to the functions. You can of course change it to pass an id if you want and then look up the control using the id. In that case make sure that the control has an id specified.
Anyway, here is the resulting code from the Html section of the fiddle:
<script type="text/jscript">
function jsOnFocus(obj) {
if (obj.value==obj.defaultValue)
obj.value="";
}
function jsOnBlur(obj) {
if (obj.value==="")
obj.value=obj.defaultValue;
}
</script>
<table>
<tr><td>Message:</td><td> </td></tr>
<tr>
<td> </td>
<td>
<textarea name="txtMsg" rows="6" cols="30" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value==='')this.value=this.defaultValue;">[Write your message here or call my voice number at (555) 222-1234.]</textarea>
</td>
</tr>
<tr>
<td>Test1:</td>
<td><input type="text" name="txtTest1" onfocus="jsOnFocus(this)" onblur="jsOnBlur(this)" value="Test1" /></td>
</tr>
<tr>
<td>Test2:</td>
<td><input type="text" name="txtTest2" onfocus="if(this.value=='Test2'){this.value=''};" value="Test2" /></td>
</tr>
<tr>
<td>Test3:</td>
<td><input type="text" name="txtTest3" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value==='')this.value=this.defaultValue;" value="Test3" /></td>
</tr>
</table>
Code Behind:
string strUserName = "User Name";
string strPassword = "Password";
txtUserName.Text = strUserName;
txtPassword.Text = strPassword;
txtPassword.Attributes.Add("onblur", "PasswordBlur(this, '" + strPassword + "');");
txtUserName.Attributes.Add("onblur", "UserNameBlur(this, '" + strUserName + "');");
txtUserName.Attributes.Add("onfocus", "UserNameFocus(this, '" + strUserName + "');");
txtPassword.Attributes.Add("onfocus", "PasswordFocus(this, '" + strPassword + "');");
Java Script:
function UserNameBlur(txtElem, strUserName) {
if (txtElem.value == '') txtElem.value = strUserName;
}
function PasswordBlur(txtElem, strPassword) {
if (txtElem.value == '') txtElem.value = strPassword;
}
function UserNameFocus(txtElem, strUserName) {
if (txtElem.value == strUserName) txtElem.value = '';
}
function PasswordFocus(txtElem, strPassword) {
if (txtElem.value == strPassword) txtElem.value = '';
}

How to empty a textbox, textarea in jquery

var $contact_title = $('#contact_title').val();
var $contact_summary = $('#bbcode').val();
I retreive a text area and text field then I do this:
$contact_title.val('');
$contact_summary.val('');
Nnone of them get emptied
HTML:
<form action="" method="get">
<table border="0">
<tr>
<td valign="top">Title:</td>
<td>
<input name="title" type="text" style="width:710px" id="contact_title" />
</td>
</tr>
<tr>
<td valign="top">Message:</td>
<td>
<textarea name="request" cols="30" rows="20" id="bbcode"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="right" >
<input name="send" type="button" onClick="clicked()" value="Send" />
</td>
</tr>
</table>
</form>
You should store the element in your variable and not the value.
So, your code should be:
var $contact_summary = $('#bbcode');
$contact_summary.val('');
Btw, it's a good practice to use unobtrusive javascript and bind your click event outside of your html markup:
$('button').click(function() { //clear inputs });
Your problem is because you are setting your variables to be the string values of the elements, rather than the jQuery objects containing the elements.
Try this:
var $contact_title = $('#contact_title');
var $contact_summary = $('#bbcode');
$contact_title.val('');
$contact_summary.val('');
Or alternatively;
$('#contact_title').val('');
$('#bbcode').val('');
Your variable ($contact_title) contains the text, not the actual DOM-element, from what I can tell. If you change it to
$('#contact_title').val('');
You'll be fine.
you have to use the same syntax that you used while getting the values from those filed.
try:
$('#contact_title').val('');
$('#bbcode').val('');
In js fiddle easier to write/read javascript code. Here is an answer.
http://jsfiddle.net/7RFYx/
jQuery(document).ready(function () {
var $contact_title = $('#contact_title');
var $contact_summary = $('#bbcode');
var $contact_summary_val = $contact_summary.val();
var $contact_title_val = $contact_title.val();
$contact_title.val('');
$contact_summary.val('');
});

edit in place

I have a table like this
<tr>
<td>No.</td>
<td>Username</td>
<td>Password</td>
<td>Valid Until</td>
<td>Delete</td>
<td>Edit</td>
</tr>
<tr>
<td>1</td>
<td id="1">
<div class="1u" style="display: none;">Username</div>
<input type="text" class="inputTxt" value="Username" style="display: block;"/>
</td>
<td id="1">
<div class="1p" style="display: none;">Password</div>
<input type="text" class="inputTxt" value="Password" style="display: block;"/></td>
<td>18 Jul 09</td>
<td><button value="1" class="deleteThis">x</button></td>
<td class="editRow">Edit</td>
</tr>
When edit is clicked i run this function this replaces the text with input field, so what i want is to cancel this back to text when somewhere else is click instead of save.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
}).blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
with this function text changes to input fields but input fields doesnt change back to text when i click somewhere else.
Thank You.
There's a nice plugin for this
Just edited my function because the plugin didn't suite well for my application
$('.editRow').live('click', function() {
var row = $(this).parent('td').parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
$(this).parent('td').empty().append('<a href=# class=cancel>Cancel</a> / <a href=# class=save>Save</a>');
});
Your blur is applying on the button td.editRow but not applying on the input fields. I think you should separate the code and it should work.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt')
.slideDown('fast')
.blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
});

Categories