window.open with form.action - javascript

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")

Related

preventDefault to stop refresh on anchor tag click

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+'&param3='+ 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.

Submitting multiple forms in a row in javascript

I am trying to make a browser extension which will allow me to click a button and then send me through a checkout process. I am able to submit my first form and add my item to cart, but when I attempt to submit the second form nothing happens. I think the issue here comes down to the document.addEventListener('DOMContentLoaded', checkout); being triggered again after the first form is submitted. I have searched through a ton of stuff on stack and google and haven't seen much about this. Basically, how can I handle submitting a form and then grabbing a form from the following page and submitting that as well in javascript? Here is the code for my main javascript file.
function checkout() {
this.removeEventListener('DOMContentLoaded', arguments.calle, false);
var checkPageButton = document.getElementById('checkPage');
checkPageButton.addEventListener('click', function () {
chrome.tabs.executeScript(null, {
file: "submitForm.js"
});
});
chrome.tabs.executeScript(null, {
file: "goToCheckOut.js"
});
}
document.addEventListener('DOMContentLoaded', checkout);
and here is the method submitForm.js
var i = document.createElement('input');
i.name = 'id';
var xpath = "//*[local-name()='li' and text()='10.5']";
var nsResolver = document.createNSResolver(document.ownerDocument == null ? document.documentElement : document.ownerDocument.documentElement);
var liElements = document.evaluate(xpath, document, nsResolver, XPathResult.ANY_TYPE, null);
var ele = liElements.iterateNext();
var id = ele.getAttribute("data-value");
i.value = id;
document.getElementById("AddToCartForm").appendChild(i);
document.getElementById("AddToCartForm").submit();
Currently this is all I am trying to do in goToCheckOut.js and it is not running unless I do not click the button
setTimeout(function () {
window.location.href = 'http://www.google.com';
}, 3000);

Why does my page reload automatically?

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);
}

url made in jquery both redirect to and opens a new tab

$('#resultsDiv').on('click', '#seeTemplates', function () {
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
});
This code function well but it has a side effet that surprises me: as I click on the link a new tab opens with the good link. But the main windows also loads the good url. Why does it open a new window?
EDIT
New code as per requested:
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
e.preventDefault();
alert("Clicked");
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
});
I'm now investigating on 2 possibilities:
Can a delegate have this kind of result?
Is it the normal behavior of a windows.location.href jquery call?
Try this, adding the function(e) and e.preventDefault() will stop the browser's default action:
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
e.preventDefault();
});
I can't comment (due to being new here) so you might want to try to add e.preventDefault() there to prevent / block the default action (there are other ways too)
If you want to open a new tab with JavaScript try this;
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
// Prevent default action
e.preventDefault();
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
// Open in new tab
var win = window.open(url + "?templateName=" + ebayTemplate, "_blank");
// Focus on new tab.
win.focus();
});
I hope this helps.
Because #seeTemplates is a link (per OP comment), both the default link action and your custom event handler are running. To avoid that, you'll need to prevent the default behavior of the link:
$('#resultsDiv').on('click', '#seeTemplates', function (e) {
e.preventDefault();
var ebayTemplate = $('#templates').val();
var url = '#Url.Action("SeeTemplateDetailsByName", "EbayTemplate")';
window.location.href = url + "?templateName=" + ebayTemplate;
});
You could also just change the element to be some other type (perhaps a <span>), and avoid the problem altogether.

Iframe not being spawned yet same code with an alert works

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

Categories