How to copy HTML content into a new tab [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 months ago.
Improve this question
I am building a web app and I need to copy an HTML div and everything inside it into a new tab. I am writing this code in JavaScript. So far I have been working on creating a blob and then creating a file to download. This approach copies all the HTML code I need BUT it does not copy the text that has been inputted into any text fields. As I understand, the problem is that the entered text is not part of the HTML code so it cannot be copied. However I cannot find another approach to this, please assist. Thank you

You can use Element.setAttribute() on those elements before serializing your DOM tree. For example:
input.setAttribute("value", input.value)
This will copy the mutable value (not serializable) to the attribute (which is serializable).
Here's a snippet demonstration:
const input = document.querySelector('input');
console.log('initial:', input.outerHTML);
input.value = 'hello world';
console.log('before:', input.outerHTML);
input.setAttribute('value', input.value);
console.log('after:', input.outerHTML);
<input type="text">

(Inspired by comment by #vanowm)
First, copy the html (say inside a DIV)
Then you'll need loop through all input fields and read their value so you can apply them.
So the code is like this (amend to suit your further needs):
<div id=container><html>
<input type=text name=text1 id="text1">
<br><input type=text name=text2 id="text2">
</html></div>
<textarea id=target style="width:100%;height:200px;"></textarea>
<input type=button name=go onclick="trigger();" value="Parse">
<script>
function trigger(){
target0=document.getElementById('container').innerHTML;
text1= document.getElementById("text1").value;
text2= document.getElementById("text2").value;
target0=target0.replace('id="text1"', 'id="text1" value="' + text1 + '"');
target0=target0.replace('id="text2"', 'id="text2" value="' + text2 + '"');
document.getElementById("target").innerHTML=target0;
}
</script>

Related

Call function when input is changed on text box? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to create a button that changes color when username and password fields have both been entered with some sort of input (IE; neither username or password text boxes are empty)
Is there a way I can get a function to trigger when input of a text box is changed in NativeScript? I've asked at the NativeScript slack, among other sites but I don't seem to get a reply ever.
I thought this was a relatively simple request, especially when I'm using vanilla JS. Surely it must be simpler than using a framework such as Angular or Vue?
I do not want to use a framework, I am looking for a way to do this with plain JS. What have I tried? I've tried onChange="", textChange="", change="" but none seem to work.
If you are using plain JavaScript / TypeScript without any framework, then you must add your textChange listener after loaded event.
XML
<TextField loaded="onTextFieldLoaded"></TextField>
JS
function onTextFieldLoaded(args) {
const textField = args.object;
textField.off("loaded");
textField.on("textChange", onTextChange);
}
function onTextChange(args) {
console.log("Changed: " + args.value);
}
Here is a Playground Sample.
You can use onkeyup event to trigger the validation for the form.
See the Snippet below:
document.addEventListener("load", function(){
});
function validate(event){
if(document.getElementById("username").value.trim()!="" && document.getElementById("password").value.trim()!=""){
document.getElementById("btn").removeAttribute("disabled");
}else{
document.getElementById("btn").setAttribute("disabled", "disabled");
}
}
.enable{
}
<div>
<label for="username"><input type="text" id="username" name="username" onkeyup="validate(event)"/></label>
<label for="password"><input type="password" id="password" name="password" onkeyup="validate(event)"/></label>
<button id="btn" value="Submit" disabled>Submit</button>
</div>
Edited my whole answer because I initially gave you a whole demo in Javascript lol. Maybe someone with a lot of reputation points should make a Nativescript tag.
Anyway, have you tried it like this?
<TextField hint="Enter text" text="" (textChange)="myFunction($event)"></TextField>
OR
var el = page.getViewById("myEl");
el.on("textChange", myFunction);
function myFunction() {
console.log('woo');
}
And here's some relevant-looking documentation: https://docs.nativescript.org/angular/ui/ng-ui-widgets/text-field#text-field-binding

Why I can't get this element identified by an id attribute? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have this element, it is auto generated by mcssl checkout form. It is a custom field. I'm trying to select it using javascript like so:
var form_field_gclid = document.getElementById("#ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_gclid);
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
But I'm getting null as a result. I've tried also, document.querySelectorAll(...); but the same result. It's working when I tried it from console but I'm wondering why it won't work if it's on page javascript. Any ideas would be appreciated. Thank you.
I tried getting rid of the # sign but same result.
<script type="text/javascript">
(function() {
var form_field_test = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_test);
}());
</script>
This is the full script I'm using.
You do not need the # in your call to document.getElementById. Simply remove it.
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");
If you were using jQuery, however, you would need it:
var myElement = $('#myElementId');
But since you are using vanilla JS, simply pass in the element's id as a string.
You have to put the script below the html of the input you are trying to hook.
If the form is not rendered the script will return null.
In your webpage you run the script before the input form is rendered.
I think you are looking for the input value. Right?
Also i added a button for you to give you an example about how to add more functionality. For example, how to add a background color to your input
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").value;
console.log(form_field_gclid);
// add color to your input
function addColor(){
form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").style.backgroundColor = "green";
}
If you mean to get the value of the input, i think you are looking for this:
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text" value="1">
<button onclick="addColor();">change color</button>
You could try this old school vanilla ::
var form_field_gclid = ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox;
console.log( form_field_gclid );
<input type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">

I had tried to add gstamount+total but its not adding [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
var gstper=document.getElementById('gstper').value
var total=document.getElementById("totalamount").value;
var gstamount = gstper*total/100;
document.getElementById('gstamount').value= gstamount;
document.getElementById('gsttotal').value=gstamount+total;
this is my source code which was i tried.
<!DOCTYPE html>
<html>
<body>
Value1: <input type="text" id="myvalue1" value="">
Value2: <input type="text" id="myvalue2" value="">
<p id = "myText"></p>
<p>Click the button to change the value of the text field.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
v1 = parseInt(document.getElementById("myvalue1").value);
v2 = parseInt(document.getElementById("myvalue2").value);
document.getElementById("myText").innerText = v1+v2;
}
</script>
</body>
</html>
If you are setting the final value in html element like paragraph,heading tag then use .innerText or .innerHTML and if you are using another input text box to display then only use .value attribute with document.getElementById().
Do you parse your input value? Because your "document.getElementById('gstper').value" return a string, so try with this:
let gstper= parseInt(document.getElementById('gstper').value);
let total=parseInt(document.getElementById("totalamount").value);
let gstamount = gstper*total/100;
document.getElementById('gstamount').value= gstamount;
document.getElementById('gsttotal').value=gstamount+total;
2 more things:
1) you missed a ";" after the first line
2) use "let" instead of var, is safier

How to write that html structure in java script? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
how to write that html structure in java script,
<table>
<tr>
<td>
<form>
<input type="file"></input></td>
<td><input type="submit"></input></td>
</form>
</table>
Try with following and add this before end of the html tag.
<script>
var myForm = document.createElement("form");
myForm .setAttribute('method',"post");
myForm .setAttribute('action',"submit.php");
var myInput = document.createElement("input");
myInput .setAttribute('type',"file");
myInput .setAttribute('name',"somename");
var formSubmit = document.createElement("input");
formSubmit.setAttribute('type',"submit");
formSubmit.setAttribute('value',"Submit");
myForm .appendChild(myInput);
myForm .appendChild(formSubmit);
document.getElementsByTagName('body')[0].appendChild(myForm);
</script>
This question does not show any research work done and also not specific question to understand.
Still if you want to display the content using javascript(render control from javascript) here is the code that will help you.
var strings = "<table><tr><td><form><input type='file'></input></td><td><input type='submit'></input></td></form></table>";
document.write(strings);
Assume you need to append your html code to inside a div called #my_div_id then use following code. (I have used your html code inside my method)
You should import jQuery library to this solution work.
function appendMyCode(){
$("#my_div_id").html("\
<table>\
<tr>\
<td>\
<form>\
<input type=\"file\"></input></td>\
<td><input type=\"submit\"></input></td>\
</form>\
</table>\
");
}
output will be, html table you used will append to my_div_id div.
I have used "\" character for detect line endings inside a string.
because your html code should pass to .html() method as a string

How to check input is more than place holder [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a input field like this
<input type="number" id="return_pro" name="available" placeholder="10 Available">
Here if user enter a value more than 10 (That is available), it should not accept and should show an error. How can I do that? I need to use this with the input tag itself. Because text fields comes inside an foreach loop. So number of text fields may increase.
HTML:
<input type="number" id="return_pro" name="available" placeholder="10 Available" onblur="check(this)">
Javascript:
<script>
function check(obj){
var val=obj.placeholder.split(" ")[0];
if(obj.value > parseInt(val)){
alert('invalid');
obj.value="";
obj.focus();
}
}
</script>
The placeholder is just what it says it is, a place holder and has no validation associated.
what you are looking for is some kind of validation, either by javascript/jquery or server side with PHP.
I suggest using a tutorial to learn how validation works like this one here as learning will be infinitely more valuable for the future, than simply copy and pasting some code that people provide on stack overflow.
<input type="number" id="return_pro" name="available" placeholder="10 Available">
<input type="button" value="ok" id="submit"/>
$(function(){
var placeholder=$("#return_pro").attr("placeholder");
var available=parseInt(placeholder.replace(" available",""));
$('#submit').click(function(){
var val=$("#return_pro").val();
if(val>available)
alert("Sorry");
});
});
I think This is actually you looking for.
DEMO HERE
with jQuery
$("#return_pro").keypress(function(){
var intValue = parseInt($(this).val());
if(intValue > 10) {
//value more more then 10, do something
}
});
$('#return_pro').keyup(function(){
var max = $(this).attr('placeholder').match(/[0-9]+/);
if(parseInt($(this).val())>parseInt(max)){
alert('Only '+max+' available');
}
});
DEMO: http://jsfiddle.net/uQH64/

Categories

Resources