forms and javascript - javascript

I have a form button and I want 2 lines of text. In the form I have this
value='".$row['item'].'
$'.$row['price']."'
and I get
Hot Dog
$1.00
I want to update this in JavaScript and tried this
sBtn = itm + "
$" + prc;
document.getElementById(conbtn).value = sBtn;
and
sBtn = itm + "<br>$" + prc;
document.getElementById(conbtn).value = sBtn;
without success. The first gives
Hot Dog
$1.00
and the second
Hot Dog<br>$1.00
Any idea how to write 2 lines from JS?

I got it. Used
sBtn = itm + "\r\n$" + prc;

If you have a form input button, use an escaped newline in the value property.
document.getElementById(conbtn).value = "Test 1\nTest 2";
If you have a button tag element, use a break element in the innerHTML property.
document.getElementById(conbtn).innerHTML = "Test 1<br/>Test 2";

Related

Selenium Input text does not replace all the values

I am providing an input which is suppose to replace the old values at two tabs. The values are auto populating one at one tab but I am providing them completely without using auto populate feature.
The value is getting replaced only at one tab and not at the other tab. The second tab shows the xml version of the first tab.
Code of the page
Tab 1 where I am providing input
AllElements = driver.find_elements_by_xpath("//div[#class='CodeMirror cm-s-
codeedit CodeMirror-wrap']")
for row in Inputs:
Content = row['Content']
Universe = row['Universe']
for ele in AllElements:
count = count + 1
if count == 1:
ele.click()
#Content = 'TR.NetAssetEstBrokerName'
driver.execute_script('return arguments[0].setAttribute("style",
"visibility:visible")', ele)
driver.execute_script("arguments[0].innerText = ' " + Content +
" ' ", ele)
driver.execute_script('return
arguments[0].setAttribute("value",' + Content + ')',
ele)
if count == 2:
ele.click()
#Universe = 'IBM.N#RIC'
driver.execute_script('return arguments[0].setAttribute("style",
"visibility:visible")', ele)
driver.execute_script("arguments[0].innerText = ' " + Universe +
" ' ", ele)
driver.execute_script('return
arguments[0].setAttribute("value",'+Universe+')', ele)
driver.find_element_by_id('button-1093-btnEl').click()
It is because you are using javascriptexecutor. It directly changing the value from DOM. If you want your functionality should behave as per business logic use operation like setAttribute which can behave as required:
driver.findElement(By.id("YOURID")).setAttribute("value", "your value");

How can I use the output of a JavaScript function as a string inside a HTML textarea box?

I have been creating a profile making program and I would like to use the output of this JS function as a simple string text inside the textarea box which the user can copy using the "Copy to Clipboard" button. Any ideas, please let me know ASAP. Here is my current code:
<!--HTML-->
<!--Button Code-->
<button onclick="copyprofile()">Copy to clipboard</button><br>
<!--Textarea Code-->
<textarea id="text" cols="60" rows="13">I want output of createProfile() to be here</textarea><br>
//Javascript
function createProfile(){
var fn,ln,a,fc,fs,ff,profile;
fn = prompt("Please enter your first name","Enter first name here");
ln = prompt("Please enter your last name","Enter last name here");
a = prompt ("Please enter your age","Enter age here");
fc = prompt("Please enter your favourite colour","Enter favourite color here");
fs = prompt("Please enter your favourite sport","Enter favourite sport here");
ff = prompt("Please enter your favourite food","Enter favourite food here");
profile = ("Name: " + fn + " " + ln + "<br>Age: " + a + "<br>Favourite colour: " + fc + "<br>Favourite sport: " + fs + "<br>Favourite food: " + ff);
return profile;
}
function copyProfile(){
var text = document.getElementById('text');
var range = document.createrange();
range.selectNode(text);
window.getSelection().addRange(range);
document.execCommand(copy);
}
If you have any thoughts or ideas on how to achieve this, please let me know
Being that you have already saved everything in a string assigned to profile, just reference the element you want to update and assign it as the value.
In javascript:
document.getElementById("text").value = profile;
And if you want the to keep the line breaks, you'll need to do something other than <br> as a textarea doesn't typically render HTML. I'd suggest doing a carriage return or line feed. \n
profile = ("Name: " + fn + " " + ln + "\nAge: " + a + "\nFavourite colour: " + fc + "\nFavourite sport: " + fs + "\nFavourite food: " + ff);;
Here is a JSFiddle with an example https://jsfiddle.net/x1w1t8ux/
Update
I took some time to look at the rest of your code as you said it still was not working as you expected. Your copyProfile function has a couple of errors. If you open up your developer console when trying to run these functions, you'll see the error messages:
Uncaught TypeError: document.createrange is not a function
You're line document.createrange() is not a function. You need to camel case it to be document.createRange().
After you fix that error, try to run the code again will display another error in the console:
Uncaught ReferenceError: copy is not defined
In this line document.execCommand(copy); you are referencing a variable called copy. That variable does not exist, nor is it what you're looking for. You are wanting to pass the string copy to the function execCommand. It should look like document.execCommand('copy'); (with quotes, as that's how you identify a string in JavaScript.
In your HTML, when you click on your Copy To Clipboard button <button onclick="copyProfile()">Copy to clipboard</button> it throws an error
Uncaught ReferenceError: copyprofile is not defined
You do not have a function called copyprofile, you have one called copyProfile. Function names are case sensitive. I would recommend sticking to a consistent naming convention (such as camel case)
Lastly, no where in your code are you calling the function createProfile(). So I created it as a second button in my testing.

js/jquery iterate through html elements to dynamically build a string

I'd like to build a string based on values defined in an html form only if they have been populated. I've successfully parsed the form fields and dropdown with a for loop ($.each()) but my ultimate goal is to dynamically build a string with the results. The string is being used to create a REST query, this is currently the only way to search based on our technologies. Does anyone have a recommended solution?
thx in advance
sample html element:
<input data-param=" prefix like '%" data-name="prefix" class="prefix uno" type="text" placeholder="pre">
working btn click event loop to capture filled in form fields:
var children = $(this).parent().children('.uno');
$.each(children, function(i, val){
if($(val).val() !== ''){
console.log($(val).data('name') + " "+ $(val).data('param') + " " + $(val).val());
}
});
goal:
var newString = field1.param + field1.val + '% ' + field2.param + field2.val + '% ';
translated:
var newString = prefix like '%01%' and name like '%tree%';
Thanks David Fregoli for the jquery serialize reference, that was close, but the solution ended up being to place the strings into a single array, change it toString(), and remove the ',' from the new string.
code:
var samp = [],
thisVal = $(this).parent().children('.uno');
$.each(thisVal, function(i, val){
if($(val).val() !== ''){
samp.push(
$(val).data('param'),
$(val).val(),
$(val).data('close')
);
}
});
itQuery.where = samp.toString().replace( /,/g , '');
result search string:
"number like '%08%' and field = 34"

How do I get these HTML tags to render from javascript

Noob question alert! So, I've got this script, which loops through an array and adds a <br> tag to the end of each array item. But i dont know the proper way of displaying this output on my page. Currently, when it loads the <br> tags show up on screen, whereas I want them to render as line-breaks. It is outputting into a <textarea> if that makes a difference. Thanks a bunch.
var outputLinkText = document.getElementById('outputLinkText');
var outputStageOne = "";
for (var i = 0; i < arrayOne.length; i++) {
outputStageOne += (arrayOne[i] + "<br>");
}
if ( 'textContent' in timePlace ) {
outputLinkText.textContent = outputStageOne;
}
else {
outputLinkText.innerText = outputStageOne;
}
<textarea> tags don't support <br> tags (or any other HTML tags) within their contents. They only hold plain text.
You need to add "\n" as the separator instead.
(Strictly, it should be "\r\n" but a "\n" on its own is usually sufficient)
Yes the textarea is a difference, try this :
"\r\n" instead of "<br>"

Html.CheckBox onclick event is getting escaped

I'm trying to generate a series of check boxes that will update a span to keep track of the number of check boxes that have been checked (shows something like "4 of 12 checked"). I've created the JavaScript function updateSelected that handles that, but it requires the ID of the span and the class of the check boxes to count, so I tried this code to generate each check box:
#Html.CheckBox(string.Format("contentprofilestate[{0}].selected", i),
new { onclick = "updateSelected('" + selectedSpanId + "', '" + checkboxClass + "')" })
This produces the following HTML:
<input id="contentprofilestate_6__selected" name="contentprofilestate[6].selected"
onclick="updateSelected('StMarySpan', 'StMaryCheck')"
type="checkbox" value="true" />
How can I get the onclick event handler to render without escaping the apostrophes? Alternatively, is there a better way to accomplish this task (if so, feel free to use jQuery in your suggestion)?
Note re: Lester
I created a new project and created this view and it still escaped the apostrophes:
#{
ViewBag.Title = "index";
}
<h2>index</h2>
#Html.CheckBox(string.Format("contentprofilestate[{0}].selected", 0), new { onclick = "updateSelected('" + "test" + "', '" + "test2" + "')" })
Alternate Solution
I was not able to figure out how to keep the apostrophes from being escaped, so I wrote some jQuery logic to do what I need without any inline JavaScript:
jQuery(document).ready(function () {
jQuery(':checkbox').click(function () {
var clientHeader = jQuery(this).closest('.client-header');
var clientCheckedSpan = clientHeader.find('.client-checked');
var inputChecked = clientHeader.find('input:checked');
clientCheckedSpan.text(inputChecked.length);
});
});
It's very odd that the apostrophes are being encoded. I didn't think they would be and after doing a quick test they aren't. There's probably something else going on in that view. If you place just that 1 line in an empty view I'm betting you won't get the same problem.
As for any other alternatives, you can easily get the number of selected checkboxes using jQuery:
var numChecked = $("input:checked[id^=contentprofilestate]").size();

Categories