Grab and send a text value via a link using Javascript - javascript

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

Related

twitter share button quirk

Link to my in codepen: codepen.io/neel111/pen/dRBQNY?editors=1010
When the tweet button is clicked then it redirect to the page to tweet in the twitter, with a preselected text to tweet.
The JavaScript code used there is given below just for a quick look:
//-------------quotes--------
(function(){
window.addEventListener("load", makeRequest);
function makeRequest(mk){
document.getElementsByClassName("buttonQ")[0].addEventListener("click", makeRequest);
function reqListener(rl) {
if(httpR.readyState === XMLHttpRequest.DONE) {
var quote;
if(httpR.status === 200) {
quote = JSON.parse(httpR.responseText);
document.getElementsByClassName("quote")[0].innerHTML = quote[0].body;
} else {
alert("There was a problem with the request!")
}
}
}
var httpR;
httpR = new XMLHttpRequest();
httpR.onreadystatechange = reqListener
httpR.open("GET", "https://quote-api.glitch.me/pull/1", true);
httpR.send();
}
//----------------------tweet-------------------
window.addEventListener("load", function() {
document.getElementsByClassName("buttonT")[0].addEventListener("click", tweetEvent);
})
function tweetEvent(twt) {
//twt.preventDefault();
document.getElementsByClassName("quote")[0].normalize();
var tweetBody = document.getElementsByClassName("quote")[0].childNodes[0].nodeValue;
var URLBase = document.getElementsByClassName("twitter-share-button")[0].getAttribute("href");
var URLExtended = URLBase + "?hashtags=quotes&text=" + encodeURIComponent(tweetBody);
document.getElementsByClassName("twitter-share-button")[0].setAttribute("href", URLExtended);
}
})();
Quirk:
when the tweet button is clicked for the first time after the page is loaded/refreshed then the preselected text in the redirected page to tweet is
Preselected_text(quote)_from_the_main_page #tweet
But after the first click, everytime the tweet button is click the preselected text in the redirected page to tweet is
Preselected_text(quote)_from_the_main_page?hashtags=quotes #quotes
Where i am doing wrong?
So I think the problem is that you are modifying the href of the anchor tag and inserting the modified href into the dom. What I would do instead is to get rid of the in the button and build the url like you are but instead of modifying something in the dom just call window.open(extendedUrl);
Something like this should get you started:
window.addEventListener("load", function() {
document.getElementsByClassName("buttonT")[0].addEventListener("click", tweetEvent);
})
function tweetEvent(twt) {
//twt.preventDefault();
document.getElementsByClassName("quote")[0].normalize();
var tweetBody = document.getElementsByClassName("quote")[0].childNodes[0].nodeValue;
var url = "https://twitter.com/intent/tweet?hashtags=quote&text="+encodeURIComponent(tweetBody);
return window.open(url);
}
})
As you can see I have simplified the url building and then passed the resulting url to window.open which will open the url in a new window/tab (depending on user preference in their browser... find more on that here).

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

How to call script jquery when web page is showned?

my process is when user click button print in first form then process is redirect to second page. Now when second page is showed i want to call jquery .How can i do , Please help. because i want to get html from second page.
this is my code in web
<script>
$(function () {
setTimeout(function () { printForm() }, 3500);
function printForm() {
window.onload(function () {
<%testMethod();%>
});
}
});
</script>
this is my code in code behide
public void testMethod() {
if (!Page.IsPostBack)
{
WebClient MyWebClient = new WebClient();
string html = MyWebClient.DownloadString(Session["url"].ToString());
}
}
But the problem is testMethod is calling before scond page is show. i want to do like window.print()
If I understand you correctly, you want to get jquery when other page loads, to do that with js only, you have to do something like this:
your_server ="some_server_name"
(function() {
var jquery_scrpt = document.createElement('script'); jquery_scrpt.type = 'text/javascript'; jquery_scrpt.async = true;
jquery_scrpt.src = 'https://' + your_server + '//code.jquery.com/jquery-1.11.2.min.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(jquery_scrpt);
})();
this will add jquery dynamically to your page.Hope that helps.

Off click of focused div not activating on jQuery function

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

Categories