We Keep Coding

Submitting multiple forms in a row in javascript - 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);

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 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.

I am trying to dynamically add a button to a page on a third-party website, and add a click handler to the button, using a Chrome extension. I have read onClick within Chrome Extension not working, added the handler in a separate js file.
The problem is that Chrome tries to find that js file in the web server, not in the extension. So, 404 happens.
Let's say the web page is "http://www.somecompany.com/somepage.html". My extension code is like the following.
var aButton = document.createElement('button');
aButton.id = "aButton";
thatDiv.appendChild(aButton);
var aScript = document.createElement("script");
aScript.src="aButtonHandler.js";
thatDiv.appendChild(aScript);
Chrome tries to load "http://www.somecompany.com/aButtonHandler.js", and of course the real web site does not have that script, so 404 happens. How can I add a button to a web site and execute alert("hello"); when the button is clicked?
Added
I added the code in aButtonHandler.js to the end of the content script itself, but nothing happened. What is wrong?
content script.js
addButton();
function addButton()
{
//adds a button by the code above.
}
document.addEventListener('DOMContentLoaded', function() {
var theButton = document.getElementById('aButton');
theButton.addEventListener('click', function() {
alert('damn');
});
});
Added
This worked.
content script.js
addButton();
function addButton()
{
//adds a button by the code above.
aButton.addEventListener('click', function() {
alert('damn');
});
}

Using the setInterval function to check <button> element is exists, if not create and append the <button> element.
var myVar = setInterval(function() {
if(document.getElementById('aButton')) {
// clearInterval(myVar);
return false;
} else {
if(document.getElementsByClassName("assignedToUsers")[0]) {
var button = document.createElement("button");
button.innerHTML = "Test";
button.id = "aButton";
button.type = "button";
document.getElementsByClassName("assignedToUsers")[0].appendChild(button);
var theButton = document.getElementById('aButton');
theButton.addEventListener('click', function() {
console.log(document.getElementsByClassName("ms-TextField-field")[0].value);
});
}
}
}, 500);

I am trying to send the text typed in to a box via a link. Please see my code below. It isn't sending through for some reason?
<script>
var discountCode = document.getElementById("discountCode").value;
openPage = function() {
location.href = "payment.php?discount="+discountCode;
}
</script>
Purchase

You're reading the value as soon as the page loads, not when the link is clicked. You just need to move the line into the function:
<script>
openPage = function() {
var discountCode = document.getElementById("discountCode").value;
location.href = "payment.php?discount="+discountCode;
}
</script>
Purchase
Or alternatively just get a reference to the element when the page loads (assuming this script is after the discountCode element), then read the value in the function:
<script>
var discountCode = document.getElementById("discountCode");
openPage = function() {
location.href = "payment.php?discount="+discountCode.value;
}
</script>
Purchase

Here is my HTML
$html .= " <td><div class='edit_course' data-id='{$id}' data-type='_title' contenteditable='true'>{$obj->title}</div></td>";
Here is my jQuery:
var selector = 'div[contenteditable="true"]';
// initialize the "save" function
$(selector).focus(function(e) {
content_holder = $(this);
content = content_holder.html();
var id = $(this).data('id');
var type = $(this).data('type');
alert( id + type)
// one click outside the editable area saves the content
$('body').one('click', function(e) {
// but not if the content didn't change
if ($(e.target).is(selector) || content == content_holder.html()) {
return;
}
// Edited out AJAX call
});
});
The problem is, when I click on the div, the alert below triggers. When I click outside of the div (after the edit has been made), nothing happens. Can anyone see what is happening?
First click let's user edit content in div. The first click outside, should make ajax call to save.
EDIT: From recommendation below.
Here is new code this works perfectly except it calls the DB every time, all I need is a check to do that only if data is different and I think I got it from there.
Edit2: Final Code
var original_value = '';
$(".edit_course").focus(function(e) {
original_value = $(this).html();
});
// initialize the "save" function
$(".edit_course").blur(function(e) {
var content = $(this).html();
var id = $(this).data('id');
var type = $(this).data('type');
if (content !== original_value) {
// Ajax edited out
}
});

You're not using one() correctly. What you should do is run the AJAX when focus is taken away from the div. Using blur() would probably be your best bet here.
$('body').blur(function(e) {
// your code here...
});