Can external JavaScript access DOM elements from a different file? - javascript

Just started working in Dreamweaver recently. I was wondering if when you are working with external javascript files, do you have to pass in html elements or can the js file see their id? For example;
<body>
<script src="client.js"></script>
<input type="submit" name="submit" id="submit" onclick="getValue()" value="Submit"></td>
And then in the client.js file
function getValue() {
"use strict";
document.getElementById(submit).value = document.getElementById(otherelement).value;
}
This isn't working in the first place and I understand that there are other errors, but mainly - can the client.js file see and use getElementById(submit) and getElementById(otherelement)?


I would suggest shying away from using inline JavaScript elements, and doing things differently. I'd suggest using addEventListener() to bind events from JavaScript.
So, remove the onclick attribute, and just do:
<input type="submit" name="submit" id="submit" value="Submit">
We will be adding the event in JavaScript. For this to work, the script needs to be ran after the page (DOM) is loaded. You can use window.onload = function(){} to do this or you can load the script at the end of the page (before </body>).
Anyway, in your JavaScript, you want to use:
document.getElementById("submit").addEventListener('click', function(event){
// NOTE: You are clicking a submit button. After this function runs,
// then the form will be submitted. If you want to *stop* that, you can
// use the following:
// event.preventDefault();
// In here `this` will be the element that was clicked, the submit button
this.value = document.getElementById('otherelement').value;
});


document.getElementById( id ) takes id param as string
Use
document.getElementById("otherelement");
document.getElementById("submit");
also remove the </td> as there is no <tr> in your code


If you don't use quotes to wrap your strings, javascript will try to find variables named submit or otherelement. Try adding quotes like that :
function getValue() {
"use strict";
document.getElementById("submit").value = document.getElementById("otherelement").value;
}


If you have an HTML element with an id attribute, The JS engine automatically converts it to a variable..
e.g.
<input type="submit" name="submit" id="submit" onclick="getValue()" value="Submit"></td>
equals to the var submit in your JS code (considering you load your JS file when the DOM is fully rendered).
In every HTML page an element id is unique and that's why it is converted to a variable and wll not be overwritten until you decide so.


I was wondering if when you are working with external javascript
files, do you have to pass in html elements or can the js file see
their id
Yes you can see the ID:
function whoAmI(e) {
document.getElementById('output').textContent = e.target.id;
}
<button id='Hiii' onclick='whoAmI(event)'>Check ID</button>
<p id='output'></p>

Related

current url as a input value jquery

I have an input field:
<input type="hidden" name="url" id="url">
I want this input in form load to have as value the current url, I did it with jquery and it works.
$(document).ready(function () {
$('#url').val(window.location);
});
But how can I simplify it without jquery, since with window.location we can get current URL value, can I do something like this even that this doesn't work:
<input type="hidden" name="url" id="url" value=window.location>

You cannot put JS code in the value attribute, and input elements have no onload attribute you could use (not that that would be very good practice anyway). A pure JS alternative would be to put a <script> tag just before the </body> containing just this:
document.getElementById('url').value = window.location;
All that being said, if you are using jQuery in your site anyway I see no reason not to keep using your original solution within the document.ready event handler.

Automatically click using onload?

How can I automatically click on an object using onload() with HTML.
Here's the button I would like to be automatically clicked:
<input type="button" value="{$LANG.checkout} »" class="checkout" onclick="addtocart();" />
What I would like to happen is for the button to be clicked automatically; as soon as a certain div is loaded. I know it's possible to do with Javascript, but is there any way to do it without javascript? If javascript is the only way I am more than open to it!

As a comment says, is not need to 'trigger a click automatically', just add the functionality in a script tag (or even better, in a separate file):
HTML
<input type="button" value="{$LANG.checkout} »" class="checkout" />
JS
<script>
addToCart();
function addToCart(){
//your code here...
};
</script>
Include this tag before the tag </body> (where body finish) and it will be execute when all your HTML (DOM) be ready.

jQuery - reset form after submit w/ form plugin

let me start by saying it may look simple but im finding it extremely difficult.
ive made a search script that uses PHP and to fetch a result would look like this
search.php?term=alice&submit=Submit
Standard stuff.. problem is, i use an SPI with AJAX and PHP so my results would have to load dynamically into a div, whilst still keeping the hash value, as not to lose the page the user had visited previous to searching.
jQuery.history.js is the plugin i use for back button support, which requires links to be like such:
Home Page
this would load 'home.html' into a div named pageContent. as far as i know theres no way to call php files unless you develop a little hack, which i have,
here is my JavaScript/jQuery for my search form:
<script language="JavaScript">
$(document).ready(function() {
// bind form using ajaxForm
$('#search1').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#pageContent',
// success identifies the function to invoke when the server response
success: function() {
$('#pageContent');
var hash = '#search.php?term='+($('#query').val()+'&submit=Submit').replace(/ /g, '+');
var stripped = hash.replace(/(<([^>]+)>)/ig,"");
update(window.location.hash = stripped);
}
});
});
</script>
Heres the form:
<form id="search1" action="search.php" method="post">
<input id="query" type="text" name="term" />
<input type="submit" name="submit" value="Submit" />
</form>
My problem is this:
ive tried this.form.reset(); this: Resetting a multi-stage form with jQuery , yet none of this works. please help me if you know a way of doing this..

$('#query').val(DefaultValue);
with this u can set your value to whatever you want, like blank: '';

javascript variable pass by url

<script language=JavaScript>
function add()
{
***Z***=3025;
}
</script>
<form........>
<input type ="submit" onClick="add()"
</form>
<a herf="http://XXXXXXXX.co.uk/XXXX.qmd?pack_id=***Z***"></a>
need to put the Z***emphasized text*** value in the URL
The value of z will be produce by another java script function ADD

The best would be generating this at the server side, so that html is ready and no manipulation in JavaScript is needed. However:
give id to your link:
and change its href attribute:
<script>
var Z = 3025;
document.getElementById("cool_link").href += "***" + Z + "***";
</script>
if you're using jQuery syntax may be simplified a bit.

You want to set the value of Z in the add() function and pass that value to the querystring in the URL. I assume you want a client side implementation here.
It wont work that way because the variable Z is not recognized outside the <script> block, so the <A href> does not know of such a variable.
What will work however, is if you create the whole URL within the function and submit it from within the function.
Your code will look like this:
In the add() function, the URL is constructed and browser address is instantly changed to that location.
<script>
function add() {
var Z="3025";
document.location="http://XXXXXXXX.co.uk/XXXX.qmd?pack_id="+Z;
}
</script>
<form>
<input type ="submit" onClick="javascript:add()" value="my button">
</form>
If you actually want to just set the variables into the <A href> so that these can be clicked by the user at a later time, you'll probably need to use some not recommended techniques such as document.write of the full url.
Read the above link for why not to go down that route.

How to make a button redirect to another page using jQuery or just Javascript

I am making a prototype and I want the search button to link to a sample search results page.
How do I make a button redirect to another page when it is clicked using jQuery or plain JS.

is this what you mean?
$('button selector').click(function(){
window.location.href='the_link_to_go_to.html';
})

$('#someButton').click(function() {
window.location.href = '/some/new/page';
return false;
});

Without script:
<form action="where-you-want-to-go"><input type="submit"></form>
Better yet, since you are just going somewhere, present the user with the standard interface for "just going somewhere":
ta da
Although, the context sounds like "Simulate a normal search where the user submits a form", in which case the first option is the way to go.

In your html, you can add data attribute to your button:
<button type="submit" class="mybtn" data-target="/search.html">Search</button>
Then you can use jQuery to change the url:
$('.mybtn').on('click', function(event) {
event.preventDefault();
var url = $(this).data('target');
location.replace(url);
});
Hope this helps

With simple Javascript:
<input type="button" onclick="window.location = 'path-here';">

You can use:
location.href = "newpage.html"
in the button's onclick event.

No need for javascript, just wrap it in a link
<button type="button">button</button>

This should work ..
$('#buttonID').click(function(){ window.location = 'new url'});

You can use window.location
window.location="/newpage.php";
Or you can just make the form that the search button is in have a action of the page you want.

this is the FASTEST (most readable, least complicated) way to do it, Owens works but it's not legal HTML, technically this answer is not jQuery (but since jQuery is a pre-prepared pseudocode - reinterpreted on the client platform as native JavaScript - there really is no such thing as jQuery anyway)
<button onclick="window.location.href='http://www.google.com';">Google</button>

You can use this simple JavaScript code to make search button to link to a sample search results page. Here I have redirected to '/search' of my home page, If you want to search from Google search engine, You can use "https://www.google.com/search" in form action.
<form action="/search"> Enter your search text:
<input type="text" id="searchtext" name="q">
<input onclick="myFunction()" type="submit" value="Search It" />
</form>
<script> function myFunction()
{
var search = document.getElementById("searchtext").value;
window.location = '/search?q='+search;
}
</script>

From YT 2012 code.
<button href="/signin" onclick=";window.location.href=this.getAttribute('href');return false;">Sign In</button>

Use a link and style it like a button:
Click this button

And in Rails 3 with CoffeeScript using unobtrusive JavaScript (UJS):
Add to assets/javascripts/my_controller.js.coffee:
$ ->
$('#field_name').click ->
window.location.href = 'new_url'
which reads: when the document.ready event has fired, add an onclick event to a DOM object whose ID is field_name which executes the javascript window.location.href='new_url';

There are a lot of questions here about client side redirect, and I can't spout off on most of them…this one is an exception.
Redirection is not supposed to come from the client…it is supposed to come from the server. If you have no control over the server, you can certainly use Javascript to choose another URL to go to, but…that is not redirection. Redirection is done with 300 status codes at the server, or by plying the META tag in HTML.

Categories

Resources