I need to fill table with numbers automatically. And for this cause I'm using this bookmarklet:
javascript:var crn=[num1,num2...];
for(var i=0;i<crn.length;i++){
var d=document.getElementById("crn_id"+(i+1));
d.value=crn[i];
}
void(0);
It works but I need to click this submit button :
<input type="submit" name="REG_BTN" value="Submit Changes">
I tried to use this code:
javascript: var document.getElementsByTagName('submit')[0].click();
There is a sample of the website that I m trying to fill: (https://web.itu.edu.tr/durgunor/crn.html)
But it doesn't work. How can I fill the table and submit it with unified code?
document.getElementsByTagName would have to target a tag (<input> in this case). But there might be more inputs and you'd have to know which it is in order (also, the order might change?).
querySelector allows targeting by CSS selector. In this case, name="REG_BTN":
document.querySelector('[name=REG_BTN]').click();
More on attribute selectors can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Related
I can't seem to see any results on google unless I use jQuery and I'm not so sure if jQuery and javascript plain work together.
Try using data-* attribute to store color replacement, original background color of button element or initial setting; JSON.parse() , JSON.stringify() , Array.prototype.reverse() to toggle data-* attribute values that set background of input type="button" element; onclick event.
Not certain if requirement is to toggle background color, or reset to original color once ?
<input type="button" value="button" data-colors='["blue", "buttonface"]' onclick="this.style.background = JSON.parse(this.dataset.colors)[0]; this.dataset.colors = JSON.stringify(JSON.parse(this.dataset.colors).reverse());" />
jQuery will not conflict with javascript, it is just a js library :) So you can use the selector.css() of jquery or, in standard js i think it is (element).style.background = color.
I recommend using jQuery. Here is a SIMPLE jQuery way to do it:
$("#button").click(function(){
$("#tochange").css("background-color", "colorhex");
});
If you want to swap colors you could, for example, add a variable.
var x;
$("#button").click(function(){
if(x==0){
$("#tochange").css("background-color", "colorhex");
x= 1;
}
else{other way round}
});
I have multiple <textarea>, sometime they are blank and sometime they are filled with text.
I want to insert a simple text code such as "<check>" which will automatically change to a check (\u2713).
Presently, my code is like this:
<textarea name="1-S" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
<textarea name="1-NI" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
<textarea name="1-C" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
(This block of <textarea> gets repeated, but of course, with different name in each one.)
<script type="text/javascript">
function check(str){
var res = str.replace("<check>", "\u2713");
????
}
</script>
The output will then replace <check> into actual check symbol (\u2713)
The challenge is, I don't want to have to add ID to every <textarea> and then write a script for each one. So is there a way for me to use this one script to apply to all <textarea>???
Many thanks in advance!
You could use the getElementsByTagName method to create an array of your text area tags.
Since you're using jQuery:
$("textarea").each(function(index, textarea) {
// do replacement here
});
Note that you need to use HTML entities to put <check> into a textarea: <check>
Also, you can put a checkmark in without any Javascript like this: ✓
Yes. You can bind an event handler to all elements of a type using jquery.
$('textarea').on('change', function() {
var text = $(this).val();
if (text.match(/\<check\>/)) {
$(this).val(text.replace(/\<check\>/, "\u2713"));
}
});
The benefit of doing it this way is that you can remove your inline 'onchange' handlers from the html and consolidate your validation logic strictly to JavaScript.
To replace the actual textarea content you need to update the value of the textarea with the result of your String-replace regexp. var text = $(this).val() is just assigning the content of the textarea to the variable text, it's not a reference to the innerHTML portion of your textarea.
On a sidenote if you'd like to allow users to use shortcodes in a form, prefer square bracket syntax, e.g., [check].
I am a beginner in HTML and I want to create a region on a HTML page where the values keep on changing. (For example, if the region showed "56" (integer) before, after pressing of some specific button on the page by the user, the value may change, say "60" (integer) ).
Please note that this integer is to be supplied by external JavaScript.
Efforts I have put:
I have discovered one way of doing this by using the <canvas> tag, defining a region, and then writing on the region. I learnt how to write text on canvas from http://diveintohtml5.info/canvas.html#text
To write again, clear the canvas, by using canvas.width=canvas.width and then write the text again.
My question is, Is there any other (easier) method of doing this apart from the one being mentioned here?
Thank You.
You can normally do it with a div. Here I use the button click function. You can do it with your action. I have use jquery for doing this.
$('.click').click(function() {
var tempText = your_random_value;
// replace the contents of the div with the above text
$('#content-container').html(tempText);
});
You can edit the DOM (Document Object Model) directly with JavaScript (without jQuery).
JavaScript:
var number = 1;
function IncrementNumber() {
document.getElementById('num').innerText = number;
number++;
}
HTML:
<span id="num">0</span>
<input type='button' onclick='IncrementNumber()' value='+'/>
Here is a jsfiddle with an example http://jsfiddle.net/G638z/
I have a website for which I would like to create a JavaScript bookmarklet for autoclicking, but the site does not use an ID tag. Here is the code of site:
<input type="submit" name="Submit" value="Find Product"
onclick="return incrementClicksTest('2','true')" class="buttonSubmit">
I used this JavaScript bookmarklet:
javascript:document.getElementById('any_id_here').click()
It works fine for buttons with IDs, but how do I go about making a bookmarklet using the name, value, and type tag?
Use the following:
document.getElementsByTagName("input")[0].click();
Sample Code: http://jsfiddle.net/dcRsc/
Now, that will work if your button is the first input in your page.
Use this if you have numerous elements in your page:
var elems =document.getElementsByTagName("input");
for(var i=0;i<elems.length;i++)
{
if(elems[i].type=="submit" && elems[i].name =="Submit")
{
elems[i].click();
break;
}
}
Sample Code: http://jsfiddle.net/dcRsc/1/
That will trigger the click event of your submit button, with Submit name.
Furthermore (and since your button already has a css class) you could use the getElementsByClassName() method:
var elems =document.getElementsByClassName("buttonSubmit");
for(var i=0;i<elems.length;i++)
{
if(elems[i].name =="Submit")
{
elems[i].click();
break;
}
}
Sample Code: http://jsfiddle.net/dcRsc/2/
That will get all elements with the buttonSubmit class applied.
Or
document.getElementsByClassName("buttonSubmit")[0].click();
If your button is the only element in the page with that class on it, hence avoiding the for loop altogether.
How would you select the first input in the code below without editing the DOM (using jQuery if needed)?
<input type="text"/> <!-- The element I want to select -->
<script>
// Select the input above
</script>
<input type="text"/>
Please note there is an unknown number of inputs and script tags before and after this code sample, thus solutions like $("input:eq(1)") won't work.
The tricky part is to select the input placed right before the script tag from which the current JavaScript is being executed.
No need to ask me why I want to do this either, that's purely for the beauty of it, I want to do it without having to add random ids to my inputs if that's possible.
Edit
Here's why most of the answers won't work: http://jsfiddle.net/2WqfP/
Scripts are always run as they are loaded, so the <script> tag that's running will always be the last one on the page. With pure JS you can get it like this:
var scripts = document.getElementsByTagName('script'),
currentScript = scripts[scripts.length - 1];
Edit: I got this wrong before. To get the input at this point, you want to get the preceding sibling, so you'd use previousSibling. Also, see thesystem's comment below about text nodes and a potential solution.
var scripts = document.getElementsByTagName('script'),
currentScript = scripts[scripts.length - 1],
input = currentScript.previousSibling;
You could also use jQuery:
var currentScript = $('script').last();
Once you have the script, you can get the preceding input easily:
var input = $('script').last().prev();
Here's a jsfiddle showing my solution.
$("input:last").val("test");
This works because when the script is reached, the input immediately preceding it is the last input to be created - the following <input>'s have not yet been added to the DOM. If you ran the code after page load (that is, in an onload even handler), this wouldn't work.
It's worth noting that I would personally prefer ids, so that you don't rely on inline JavaScript (which is usually a bad idea).
Inline scripts are always run as they are parsed and the < script > tag only sees what above of him.
Best solution on pure JS:
<input type="text"/> <!-- The element I want to select -->
<script>
var inputs = document.querySelectorAll('input');
var above_input = inputs[inputs.length - 1];
</script>
<input type="text"/>
Try this:
$("script").prev("input");
Have you tried something like this?
var input = $('script').prev();
http://api.jquery.com/prev/
Native DOM solution:
var all = document.getElementsByTagName("*");
var input = all[all.length - 2];
The script will be the last element on the page when it runs, so the input will be second to last.