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
Related
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>
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">
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 5 years ago.
Improve this question
I'm trying to make a website. But I need to make a syntax highlighting program that Categorize commands based on what they do. For example, one group would be I/O, another one would be Control commands. And you would color the text based off of what type of command it is. Please I need help.
<html>
<head>
<div class=“io”>Text goes here</div>
div.io {
color: #0A0A0A;
</head>
<!--
PREFIX = 'lang/'
SUFFIX = '.js'
-->
<body onload="sh_highlightDocument('lang/', '.js');">
<!--
CLASS = 'sh_java'
PREFIX + CLASS + SUFFIX = 'lang/' + 'sh_java' + '.js'
= 'lang/sh_java.js'
-->
<pre class="sh_java">
public class X {}
</pre>
</body>
</html>
There are a few problems with your code above:
You are writing your <div> in the <head> section, which is invalid HTML
You are using curly “ ” quotes on your <div> class declaration, which won't work
In addition to this, your question is incredibly vague. There don't appear to be any 'control commands' in your question.
Having said that, it sounds like you're trying to turn the text in the io class red, and some additional content in a control-commands class green.
This can be done with JavaScript's .getElementsByClassName() method and .style property as follows:
function change() {
document.getElementsByClassName('io')[0].style.color = 'red';
document.getElementsByClassName('control-commands')[0].style.color = 'green';
}
<div class='io'>IO</div>
<div class='control-commands'>Control Commands</div>
<br />
<button onclick="change()">Change</button>
Keep in mind that .getElementsByClassName returns a Node List, so you need to access the first index of that with [0] as above.
Hope this helps!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I understand how to use input into html to call javascript defined in the same directory as the html ex:
<input type="button" value="Submit" onclick="someFunc(500)" >
so if the button is clicked the java script will run someFunc(500), is there a way to take text input, and when a button is pressed use this input as a parameter value for the java script? I know this won't work and I'm not even defining a button, but something like
<input type="text" id= "example" onclick="someFunc(this.value)">
where example is the data that was put into the input text field?
What about using a listener?
var example = document.getElementById("example");
example.onclick = function(){
someFunc(example.value);
}
You can do this with jQuery: See this jsfiddle
HTML:
<input type="text" id="example" value="12345">
JavaScript:
$('#example').on('click',function() {
console.log($(this).val()); // 12345
});
The HTML 5 Recommended way, is to use data-* attributes. Like this:
HTML:
<div id="example2" data-product-id="my-product-1"></div>
<button id="getProductId">Get Product Id</button>
JavaScript:
$('#getProductId').on('click',function() {
console.log($('#example2').attr('data-product-id')); // my-product-1
});
<script type="application/javascript">
function someFunc() {
var value = document.getElementById('example').value;
// do something with value here
return false;
}
</script>
<input type="text" id="example">
<input type="button" value="Submit" onclick="someFunc()" >
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have this code:
<script>
newTextBoxDiv.after().html(<?php echo $do_shortcode('[dropdown]') ?>'<span class="wpcf7-form- control-wrap text-73'+ counter + '"> '+ '<input type="text" name="text-73'+ counter + '" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span>'+'pocet<br>');
newTextBoxDiv.appendTo("#test");
</script>
After .html( I need get value from php. Could you tell me how to do it?
You have to generate proper Javascript. You're not. What you're doing is the equivalent of:
... .html(some text from php'<span....);
^---no opening quote
^---no closing quote
^--- no + to concatenate
Never EVER directly echo text from PHP to Javascript. Always use json_encode():
... .html(<?php echo json_encode($do_shortcode('[dropdown'])) ?> + '<span ...
Of course, this assumes that whatever function that $do_shortcode is pointing at will return some plain text. Adjust as needed for whatever it DOES return.
1) Make sure that your file is being evaluated as PHP - that is, its a .php file
2) Test to see if echo "aaa" works instead of echo $do_shortcode to see if PHP evaluation is working, but what isn't working is the "do short code" part. That will help you troubleshoot.
3) Use View Source to inspect the output.
Pls dont do thinks link this.
if you already have your data when you running the php scripte, why do you need javascript for rendering?
when you have to do it with javascript or you dont have your data at the point of rendering: use ajax.
Its simply confusing to render javascript with php that generates html.