I'm trying to edit a page so that submitting the form instead just spawns an iframe. If I use this code:
window.onload = function() {
var formItem = document.getElementsByTagName("form")[2];
formItem.setAttribute('action', '');
formItem.addEventListener('submit', createIframe, false);
}
function createIframe(){
var ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://127.0.0.1/myIframe.html");
ifrm.style.width = "50%";
ifrm.style.height = "50%";
document.body.appendChild(ifrm);
}
Then the iframe is not spawned when the form is submitted. If I, however, make the createIframe() function to:
function createIframe(){
alert(1);
}
Then the alert is created when the form is submitted. Thus it must be an issue with my iframe code, but I can't figure out what! Does anyone have any suggestions? Thanks
You forgot to cancel the form's default behavior.
function createIframe(e){
e.preventDefault();
//...
Without this, the form will submit the page to itself with an empty action attribute.
Fiddle
event.preventDefault() MDN Reference
Related
Trying to get this Script to open with window.open, any ideas?
<script type="text/javascript">
function get_action(form) {
form.action = 'http://'+document.getElementById("address").value;)
}
</script>
I need to be able to somehow put it after "form.action ="
That function should be the correct way of changing it, however you should make the code run after the form is submitted
window.onload = function () {
const form = document.querySelector("#myForm") // finds element with id of form
form.addEventListener("submit", function (e) {
e.preventDefault() // Stops the form from redirecting
form.action = `http://${document.getElementById("address").value}`
form.submit()
})
}
If you want it to just open in a tab without submitting any form data you can use window.open()
window.onload = function () {
const form = document.querySelector("#myForm") // finds element with id of form
form.addEventListener("submit", function (e) {
e.preventDefault() // Stops the form from redirecting
let url = `http://${document.getElementById("address").value}`
window.open(url)
})
}
And if you want it to open in a new window change the window.open(url) towindow.open(url, "_blank", "location = yes")
I am trying to set up a button that on click will redirect to a new link. I have tried so many different options and I just cannot get it to work.
var button = document.createElement("button");
button.innerHTML = "$1.00";
divInnerElement.appendChild(button);
button.addEventListener ("click", function() {
window.location('http://www.google.com','_blank');
return false;
});
Update: The function works but it only reloads the current page vs redirecting you to different page. If I use window.open it works but I dont want it to open a new window.
Update:
So I am not sure what was causing the click when using window.location but I was able to add an aTag into the button and that then resolved the problem.
<script>
var button = document.createElement("button");
var aTag = document.createElement('a');
aTag.setAttribute('href','http://www.google.com');
aTag.innerHTML = '$1.00';
button.appendChild(aTag);
divInnerElement.appendChild(button);
// button.addEventListener ("click", function() {
// window.location.href = 'http://www.google.com';
// return false;
// });
</script>
Your question is very vague, Here is some working code- hope it's what you need
Html:
<div id="divInnerElement"></div>
Javascript:
var button = document.createElement("button");
button.innerHTML = "$1.00";
document.getElementById('divInnerElement').appendChild(button);
button.addEventListener ("click", function() {
window.open('http://www.google.com','_blank');
return false;
});
I used window.open: since you put in your original snippet _blank, I'm assuming you would like to open the link in a new tab.
This code snippet should be in bottom of the page and remove the return statement from code so that page will be open in new tab.
var button = document.createElement("button");
button.innerHTML = "$1.00";
document.getElementById('divInnerElement').appendChild(button);
button.addEventListener ("click", function() {
window.open('http://www.google.com','_blank');
});
So I am not sure what was causing the click when using window.location but I was able to add an aTag into the button and that then resolved the problem.
<script>
var button = document.createElement("button");
var aTag = document.createElement('a');
aTag.setAttribute('href','http://www.google.com');
aTag.innerHTML = '$1.00';
button.appendChild(aTag);
divInnerElement.appendChild(button);
// button.addEventListener ("click", function() {
// window.location.href = 'http://www.google.com';
// return false;
// });
</script>
First of all this is against accessibility and kind of deceiving to the user based on the html elements being used on the page for their functionality. In your case if the user is being navigated to another page it should be created as an anchor element instead of button IMO. If you need the look of a button for it just use css to style it accordingly.
In brief this could be because the script is executed before the page loads. Try and move the script to the bottom of the page.
I have below line of code which simply places a link on the parent page:
<caps:msg textId="createNews"/>
Onclick of the above link 2 functions are getting called:
###func1():
var timestamp;
function func1() {
timestamp = +new Date();
return false;
}
###func2():
function func2(param1,param2,param3,param4){
var win;
var location = window.location.href; // location A
var encodeStringVar = encodeString(param3);
win = window.open(param1+'/struts1.action?param2='+param2+'¶m3='+ escape(encodeStringVar) +'#'+param4,target='t1','toolbar=no,scrollbars=yes,menubar=no,location=no,width=990,height=630, top=100, left=100');
window.location.href = location; // location A
return win;
}
On click of link on parent page, a popup opens by calling struts action, and it works just fine. Only problem is when the link on parent page is clicked, it refreshes the parent page. I don't want it to refresh and I tried adding return false in the link and Javascript void() function, Also I tried by adding an event listener for click event on this link as below:
$(document).ready(function() {
$("#createNewsLink").click(function(event) {
//return false;
event.preventDefault();
})
})
and below:
$(document).ready(function() {
document.getElementById("createNewsLink").addEventListener("click", function(event) {
event.preventDefault();
});
})
But none of these did the trick, can someone please point out the mistake in my code?
Could you consider to try :
(function(){
var linkElement = document.querySelector('#createNewsLink');
linkElement.addEventListener('click',function(e) {
var param1 = e.target.getAttribute('attr-param1');
var param2 = e.target.getAttribute('attr-param2');
console.log(param1,param2);
// Do what ever you want here.
e.preventDefault();
});
})();
Click me
Here i avoid any Event binding from html, and centralize all traitment / binding in one place. Then i point one way to find back mandatory params for your traitment.
Whenever I click on "add JavaScript", the action programmed is executed, but the page reloads. I just want to add a link on a div and show it on screen.
Someone knows why?
window.onload = function(){
var adicionar = document.getElementById("adicionar");
adicionar.onclick = function(){
add();
}
};
function add(){
var div = document.getElementById("link-meio");
var novoLink = document.createElement('A');
var novoTexto = document.createTextNode("Novo textoooo");
novoLink.appendChild(novoTexto);
div.appendChild(novoLink);
}
#adicionar must be an anchor tag. You can return false from your click handler to disable the default behaviour of the click on an anchor tag (which is to load the page corresponding to the href attribute, and will cause the current page to reload if the href is empty).
Its is caused by the default event is triggered when you do click on the a element with id "adicionar", you could call the preventDefault method before, like this
window.onload = function(){
var adicionar = document.getElementById("adicionar");
adicionar.onclick = function(e){
e.preventDefault();
add();
}
};
function add(){
var div = document.getElementById("link-meio");
var novoLink = document.createElement('A');
var novoTexto = document.createTextNode("Novo textoooo");
novoLink.appendChild(novoTexto);
div.appendChild(novoLink);
}
I need to open child window with iframe and post request in it. Here js code
function SendPost()
{
var params = "menubar=no,location=no,resizable=yes,scrollbars=yes,status=yes"
var ChildWin= window.open("", "ChildWin", params)
var form = ChildWin.document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("id", "form");
form.setAttribute("name", "do_post");
form.setAttribute("action", "http://www.javascriptsource.com/");
form.setAttribute("target", "ext_app");
var hiddenField1 = ChildWin.document.createElement("input");
hiddenField1.setAttribute("type", "submit");
//hiddenField1.setAttribute("type", "hidden");
hiddenField1.setAttribute("value", "Submit");
form.appendChild(hiddenField1);
ChildWin.document.body.appendChild(form);
ifrm = ChildWin.document.createElement("iframe");
ifrm.setAttribute("sandbox", "allow-same-origin allow-scripts");
ifrm.setAttribute("id", "ext_app");
ifrm.setAttribute("width", "100%");
ifrm.setAttribute("height", "600");
ifrm.setAttribute("name", "ext_app");
ChildWin.document.body.appendChild(ifrm);
form.submit();
}
In firefox it works as required, but in IE it opens one more window and post request in it. I have no idea why this is happening and how to solve this problem for IE. Really need someone's help