Manipulate an input field

Question

Is it possible to remove an input but show the value with Greasemonkey? Or disable it? For example:

<input name="prio" type="text" value="285" disabled="disabled">

I have no idea how to write any userscript. :(

It is for the PC in my company and I am not able to work with jQuery or edit the original source code.

First take a look for better understanding:

The code looks like that: http://jsfiddle.net/gv3XF/

But I want it like that: http://jsfiddle.net/gv3XF/1/

I tried it with Stylish but with that, I can only hide the input. I still need the value for result.

The input always is called name="prio" but the number from the value is changing.

What I want is to "kill" the input but show the result of the value.

Brock Adams · Accepted Answer · 2012-09-01T04:03:32.860

You can't just "kill" the input. If you do, then the necessary data might not get sent to the server when you submit the form.

So, hide the input and show its value. Here's a complete script that uses the awesome power of jQuery to do that:

// ==UserScript==
// @name        Make Priority more user friendly
// @include     http://YOUR_SERVER.COM/YOUR_PATH/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant       GM_getValue
// ==/UserScript==
//--- The @grant is to subvert a huge design flaw, introduced with GM version 1.

var oldInput    = $("input[name=prio]");
var priorityVal = oldInput.val ();
oldInput.after ('<b id="gmPriorityValue">' + priorityVal + '</b>');
oldInput.remove ();

$("#gmPriorityValue").before ('<input type="hidden" name="prio">');
$("input[name=prio]").val (priorityVal);

Change the @include value to match your site(s).

Note that you can't change an <input>s type, so we delete the old input and create a new one with the same value, but hidden.

Re: do that without jquery? the pc has no internet connection:

You're going to sneak the script file onto the PC, right? :)
Download and sneak jQuery onto it too. With the jQuery file and the userscript file in the same folder, change the @require line to:

// @require     jquery.min.js

Then the script will install just fine, no internet connection required.

Re: maybe the easiest way is to disable the input field:

Okay, the script to do that is:

// ==UserScript==
// @name        Make Priority more user friendly
// @include     http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant       GM_getValue
// ==/UserScript==

var oldInput = document.querySelector ("input[name=prio]");
oldInput.setAttribute ("disabled", "disabled");

Update:

Extremely crucial information was omitted from the question -- mainly that this is meant for Firefox 2.0(!!!) and Greasemonkey 0.8. Given that, change the code for the last script to:

var oldInput = document.getElementsByName ("prio");
oldInput[0].setAttribute ("disabled", "disabled");

It should work, but it's impossible to test, and compatibility tables don't even cover such an obsolete browser.

hi brock! thanks for the quick response... is there a way to do that without jquery? the pc has no internet connection for security reason. and i can't change the source-code to add the jquery path in the header — bernte, Aug 30 '12 at 19:08
maybe the easiest way is to disable the input field. is that possible? — bernte, Aug 30 '12 at 19:11
Right. That's a complete script. You can tell it doesn't use jQuery because it doesn't have a `@require` directive, in this case. — Brock Adams, Aug 30 '12 at 19:55
cool it works! do you think your code works with firefox 2.0 and greasemonkey 0.8? i will try it tomorrow at work and will answer than! :D thanks for the moment :D — bernte, Aug 30 '12 at 20:00
Firefox 2.0 and Greasemonkey 0.8!!!! **You need to state that up front!** I'm not sure. the compatibility tables don't go back that far for FF. — Brock Adams, Aug 30 '12 at 20:06
damn.. it doesnt work.. i made a mistake :D i had a disabled attribute in the html.. for testing it on my pc i can set // @include * right? — bernte, Aug 30 '12 at 20:16
i found the error.. your code works only online and not on localhost.. the server is localhost too.. works fine @ http://jsfiddle.net/gv3XF/ — bernte, Aug 30 '12 at 20:28
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/16060/discussion-between-brock-adams-and-bernte) — Brock Adams, Aug 30 '12 at 20:35

Manipulate an input field

1 Answers1

Update: