I am struggling with this and can't get it to work. I am using jQuery to click on a link that will open me a prompt. In this prompt, I want the user to add a URL to link it to some other websites. That works fine, but I can't get the value of the prompt to be shown properly in the input field.
The error I am getting after adding my text in the prompt is the fact
that it outputs it like [Object object].
I do know how to do this in plain JS, but not in jQuery and I need jQuery.
This is my code:
$(".html-button").on("click", function () {
var urls = prompt("Add a link", "http://");
var setText = $("#post-text").val().append('<a href="'+ urls + '"</a>');
// Adding prompt text into my input field
$("#post-text").val(setText);
});
I thought I could do this by using append instead of innerHTML, which I would use in plain JS... Can someone help please?
PS: preferably I would not want to output the anchor already in my input field, but only after submitting the post, but this is a nice to have.
Edit: Fiddle link
You seem to have mixed up some variables here. You are assigning the value of the prompt response to var urls, but then expecting it to be in an undefined var person (guessing you've used the example for this from the W3 Schools Tutorial (https://www.w3schools.com/jsref/met_win_prompt.asp)).
Assuming that your input element has an id of post-text - then you would do this:
$("#post-text").val(urls);
I am working on the assumption here that you're writing the URL into an input field, as you suggest. If you want those a tags in the input field as well then it would be:
$("#post-text").val('<a href="' + urls + '"</a>');
If your intention is to output it as a link somewhere including the HTML 'a' tags so it can be clicked, then you'd need to append it to an appropriate element (not a input field) in the right place in the DOM/on the page.
Lastly, if you want to write the value into the field after the form as been submitted (for whatever reason) you could either store it in a variable and write it on submit, or perhaps in a hidden field. I am unsure why you would want to do this though.
Hope this helps.
Related
I'm trying to fill in a form by pasting javascript into the debug console but although the data shows up on screen, the form still gives errors about being empty.
Is there a way to update an online form with javascript per element? I've seen people do it with a submit:
document.getElementById("firstName").value="Username";
document.forms[0].submit()
But I need the page to update after certain items because it will offer different fields in response. Also, I don't think there is an HTML form in the code because I get this response:
console.log(document.getElementById("firstName").form.id)
<empty string>
Could I do something (functionally) like this:
document.getElementById('firstName').value = 'myname';
document.getElementById('firstName').submit();
(I know this is not valid code, but I no idea how else to explain myself:( )
One of the problems is that just setting the name makes it show up on screen, but when I press the pay button on the page it simply says the name is still not filled in. I then have to click the name field, type a space, press return, and then the name is finally 'seen', but with an extra space.
if the firstName input is just a child element of the form, you can try
console.log(document.getElementById("firstName").parentNode.id);
document.getElementById('firstName').value = 'myname';
document.getElementById('firstName').parentNode.submit();
I have HTML form and I would like to print the HTML form, with the User Filled Information/Content.
Is there exist any way in jQuery or JavaScript to get a HTML Form with user filled values and print it?
This is what I have tried
$(form).html() but it returns only empty form
$(document).find("form").html() which also returned html with empty form.
NOTE: I am not talking about serialize function here. I don't want to submit a form but want to convert form to a printable version by setting input, select background transparent.
You can use
$('form').find('input').each(function( key, value ) {
console.log(value);
});
And to get the data ready for POST or something like it use this
$('form').serialize();
I think I got your issue. What you are actually want is, to print the HTML form, but it should contain the User Input.
First and foremost, you can use the 'window.print()' method. If you want to print only the Form, then you should use some CSS tricks.
I guess, what you are looking is answered in the following SO Questions. Please check out.
Javascript print web form with user input included
How to print only a selected HTML element?
If you are still not able to get your solution done, then let me know. Let me see how I can help you. Good Luck.
I am trying to submit a form. When I am using firefox the page will be loaded then I open the firebug I can see a input field named "content_html" but when I go to check the source of the page from "view page source" I do not see the input field "content_html". I checked further and found out there is a javascript which will be loaded in the browser to show that input field. The code is like
geteditorinit("http://example.com/pub","data[content_html]",298996,1,750,350,0,0,"content_html");
So I can conclude that "content_html" hidden input field will only be loaded after this javascript code is executed when I visit the page which contains this form. I need to assign some value to this input field to be able to submit the form. Since I cannot get the manipulated Javascript HTML ,like the one I get in the browser, with CasperJs I am not able to assign any value to it with CSS selector. Because the CSS selector does not find this hidden input field. How can I load the page with the javascript it contains so I can get HTML like firebug which shows the input field to me to be able to submit it?
After I login, I go to the page which contains the form I want to be submitted like this
casper.thenOpen(POST_URL, function(){
//Here I type the code to fill the form
});
P.S. [ 1 ] If the PhantomJS is a full browser and I don't need to run Javascript then why I cannot fetch this hidden input field with CSS selector?
The above picture is taken from Firebug. As you see it shows the input field in colorless mode. I want to be able to select "content1_html" and set value to it then submit my form.
P.S. [ 2 ] I have found that when I load the posting page, it will separately make an ajax request to another page to autosave the content of the "content1_html". I need to open the posting page, make a post request for "content_html" to another page, after that click the submit on the page I have already loaded. Can I make another tab or open another url without losing the data I already have? because after each refresh the form token would be changed and I will not be able to submit the post successfully.
There are multiple ways to select that element. You can try for example the following CSS selectors and they would work depending on which elements are also on the page:
"input[name = 'data[content1_html]']" based on exact name attribute match
"input[id ^= 'hdndata[content1_html]']" based on beginning of id attribute
Now, to change the value, you need to use casper.evaluate(), because the DOM can only be accessed through this function and CasperJS doesn't provide any convenience functions for this case. It's sandboxed, so you need to explicitly pass the values in.
casper.evaluate(function(selector, value){
document.querySelector(selector).value = value;
}, selector, value);
It may be necessary to wait until that input field is present in the page:
casper.waitForSelector(selector, function then(){
this.evaluate(function(selector, value){
document.querySelector(selector).value = value;
}, selector, value);
// Do something to submit the form
});
If it is enough to add this hidden input to the DOM before submitting the form, here is the code for this:
casper.evaluate(function(value){
var parent = document.querySelectorAll(".rteDiv")[1];
// get dynamic ID
var id = parent.querySelector("[id ^= 'Buttons1_']").id.replace("Buttons1_rte", "");
var input = document.createElement("input");
input.type = "hidden";
input.id = "hdndata[content1_html]_" + id;
input.value = value;
input.name = "data[content1_html]";
parent.appendChild(input);
}, value);
I assume that the second .rteDiv is the one that you want to use, since the other one is the demo.
I am trying to make an element with jQuery, which contains text from an input field after the user clicks the SUBMIT button.
Here is my jsfiddle: http://jsfiddle.net/2y26rzot/
Here is my javascript:
$(document).ready(function () {
$('button[type=submit]').click(function () {
var typedText = $('input[type=text]').val();
var resultText = $('<p></p>').text(typedText+'2');
$('section.result').append(resultText);
console.log(typedText);
alert(typedText);
console.log(resultText);
alert(resultText);
});
});
I have included bootstrap js and css and of course jQuery as well.
The problem occurs somewhere between the first and the second alert, but I have no idea where and why. I have basic understanding of jQuery, as I learned it by doing, so I may be getting something wrong here.
The error on my local machine reads:
text
index.html:45 [p, jquery: "1.11.0", constructor: function, selector:
"", toArray: function, get: function…]
Navigated to file:///C:/Users//Desktop/textonbackground/index.html?
Of course if I remove the last 2 lines with the resultText console log and alert I don't get an error, but the text still vanishes and I don't understand why. Can someone explain this to me and of course suggest some other way to achieve my goal, namely to get information from the input field and post it as a paragraph on the page.
I should mention that I've tried different approaches building the variables and appending the text (with .add and .after) but nothing changed. I am missing something here.
Your help is much appreciated!
The text disappears because the page refreshes after form submission. The problem is not in .text()
If you add e.preventDefault() to it, the text will stay where it should.
If you don't want to change the event, you could use a regular button (<button type="button">) without the form
Online here: http://jsfiddle.net/2y26rzot/3/
Your code seems to work fine in the fiddle, you just need to prevent the default action of the form submitting (if it submits it will refresh the page and so your clientside changes, ie. the changes made with js, will not show):
$('button[type=submit]').click(function (e) {
e.preventDefault();
...rest of code
});
Updated Fiddle
If you want to append a p element, with a text inside, you should bascalliy do
var resultText = $('<p>'+typedText+'2</p>');
Because .text() returns either the text of the concerned element if you dont pass any argument (to get text), or the jquery object of the concerned element if you pass an argument (to set text)
I'm meeting a problem with getting input value from sharepoint people editor via js.
usually, we can get value from this control via below codes:
var user;
var pe = document.getElementById('<%=peStaffAccount.ClientID %>').getElementsByTagName('div');
var i;
var peopleEnt;
for (i in pe) {
if (pe[i].id != null) {
if (pe[i].id == 'divEntityData' && pe[i].description != null) {
peopleEnt = pe[i]
}
}
}
// this is the value from this textbox but only after we click checked user
alert(peopleEnt .description)
my question is, when i input some value into this textbox directly, how can I get this value?
refer to below image, my input value.. I want to get this...
Working with people picker in javascript is pretty awful. The actual control that you type into is really a content editable div. It will have an ID which is the ID of your control followed by _upLevelDiv. You will need to grab that and then parse what is within.
The code you posted is actually dealing with the nested divs created when an entity is resolved. These divs are contained within upLevelDiv.
If you only have text in the control as shown in your screenshot, then it's pretty straightforward. If you have a mix of text and resolved entities then it's more complicated as there will be both text and html in the div.
NOTE: All of the above is only true for IE, in other browsers it uses a textarea (which is hidden when in IE).
I am not sure if I have understood the question properly.
You can bind KeyPress Event to the textbox, so that you can get the text real time while typing before clicking checked user button.
yourTextField.onKeyPress = function(){
var txt = yourTextField.value;
}
Use the following to investigate the rendered page:
Use 'View Source' to make sure that getElementById('<%=peStaffAccount.ClientID %>') is correctly substituted by the server with a valid ClientID.
Use the browser's debugger (F12 in IE9, Developer tools in Chrome) to inspect the DOM for the existence of the element by that ClientID
Using the same tools, watch for any script error reported by the debugging tools (which are otherwise silently ignored by the browsers).