Form1 is to add text, and Form2 should populate the same text as Form1, but convert it using the replace method. I am having trouble populating the text in Form2..
<form id="form1">
<input type="text" name="input" value="">
<button type="submit" name="submit" value="submit">Submit</button>
</header>
<div>
<label>Plain Text:</label>
<form id="form2">
<input type="text" name="input" value="" onchange="convertMarkdown()">
</div>
</div>
<script>
function convertMarkdown() {
const form = document.getElementById("form1");
const input = form.querySelector("input");
const form2 = document.getElementById("form2");
const convertedMarkdown = input.replace(/[(\*)(\>)(\#)(\[)(\))]/g, "").replace(/[(\]\()]/g, " ");
form.addEventListener('submit', (e) => {
// prevent browser default
e.preventDefault();
// contain text content
const text = input.value;
// print text content in form1
form1.textContent = text.text
});
form2.addEventListener('onchange', (e) => {
// prevent browser default
e.preventDefault();
// contain text content
const text = input.value;
// print converted text in form2
form2.textContent = input.replace(/[(\*)(\>)(\#)(\[)(\))]/g, "").replace(/[(\]\()]/g, " ");
};
</script>
This below js code will give your expected output.
const submit = document.getElementById("submit");
const input = document.getElementById("ip1");
submit.addEventListener('click', (e) => {
// prevent browser default
e.preventDefault();
const convertedMarkdown = input.value.replace(/[(\*)(\>)(\#)(\[)(\))]/g, "").replace(/[(\]\()]/g, " ");
// contain text content
const text = input.value;
// print text content in form1
document.forms["form2"]["input2"].value = convertedMarkdown;
});
<form name="form1">
<input id="ip1" type="text" name="input" value="">
<button id="submit" type="submit" name="submit" value="submit">Submit</button>
</form>
<div>
<label>Plain Text:</label>
<form name="form2">
<input type="text" name="input2" value="">
</form>
</div>
Related
I have a form that request user data(name) and then when they click the "check" button the form will get replaced by a div and display the name in it.
Then when the user clicks the "edit" button the user gets prompt back to the form but with the previous entered data. I want to know how to display the details back in the form.
<html>
<body>
<div id="container">
<h2 id="heading">Query Form</h2>
<br>
<div id="formdiv">
<form id="form" method="POST">
<div>
<label for="name">Name: </label>
<input id="name" name="name" type="text">
</div>
<br>
<button id="checkbutton" onclick=submitform()>Check</button>
<input type="submit" id="formbutton" value="Submit" onclick=validateForm()>
</form>
</div>
<div id="for_replacement">
<div id="display_replacment" style="display: none;">
<form>
<label for="name_submit">Name: </label><span id="name"></span>
<span id="display_name"></span><br><br>
<input type="submit" id="formbutton" value="Edit" onclick="editform()">
</form>
</div>
</div>
<script>
function validateForm() {
var formrefresh = document.getElementById("form");
function handleForm(event) {
event.preventDefault();
}
var namevalidate = document.getElementById("name").value;
if(namevalidate.length == 0) {
alert("Please Enter Name");
formrefresh.addEventListener("submit", handleForm);
return;
}else {
form.action = "mailto:mail#gmail.com"
}
}
function submitform() {
globalThis.name = document.getElementById("name").value;
document.getElementById('container').innerHTML = document.getElementById("display_replacment").innerHTML;
document.getElementById("display_name").innerText = name;
}
function editform() {
alert(globalThis.name);
}
</script>
</body>
</html>
What should happen is when edit is clicked the data entered in the form should be displayed again in the form to edit.
Instead of removing the form why don't you set its display to none:
document.getElementById('heading').style.display = "none";
document.getElementById('form').style.display = "none";
document.getElementById('display_replacment').style.display = "block";
and when you want the get it back reverse
document.getElementById('heading').style.display = "block";
document.getElementById('form').style.display = "block";
document.getElementById('display_replacment').style.display = "none";
and you can get the name from the display_name:
const name =document.getElementById("display_name").innerText;
document.getElementById("name").value = name;
I'm submitting a form with input text to my server through my web client. What I'm trying to do is to check whether the user has passed in text into the input field before sending the form by hitting the submit button.
What I have tried so far:
var form = document.getElementById("id");
document.getElementById("id").addEventListener("click", function() {
var input = document.getElementById("content").value;
if (input == "") {
alert("write something in the textfield");
} else {
form.submit();
}
});
<form action="" method="post" id="id">
<input type="text" name="name" id="content">
<button type="submit" id="submit-id">submit text</button>
</form>
Any good tips on how to do this?
You want preventDefault on the submit event
document.getElementById("id").addEventListener("submit", function(e) {
const input = document.getElementById("content").value;
if (input.trim() === "") {
alert("write something in the textfield");
e.preventDefault()
}
});
<form action="" method="post" id="id">
<input type="text" name="name" id="content">
<button type="submit" id="submit-id">submit text</button>
</form>
Alternatively just add required attribute - no need for script:
<form action="" method="post" id="id">
<input type="text" name="name" id="content" required>
<button type="submit" id="submit-id">submit text</button>
</form>
you can use the simple code snippet instead :
<form action="" method="post" id="id">
<input type="text" name="name" id="content" required>
<button type="submit" id="submit-id">submit text</button>
</form>
function submitIt(e) {
var formData = new FormData(e);
var object = {};
formData.forEach(function(value, key) {
object[key] = value;
});
if (object.name == "") {
alert("null");
} else {
alert("ok");
return true;
}
return false;
}
<form onsubmit="return submitIt(this)">
<input type="text" name="name">
<button>submit text</button>
</form>
I'm new to HTML and js, and I am currently trying to make it so that the user will type in a password, and if correct, it will reveal a hidden message. This is what I got so far. I can't get it to work.
Here's the HTML:
<form id="form" onsubmit="return false;">
<input type="text" id="userInput" />
<input type="submit" onclick="othername();" />
</form>
<p id="hidden_clue"></p>
And here's the js:
var pass1 = 3736.62417618;
var input = document.getElementById("userInput").value;
alert(input);
if (input == pass1) {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
You were close, but on the getElementById you need to select the ID of the element that you want to get.
function othername() {
var pass1 = 3736.62417618;
var input = document.getElementById("userInput").value;
if (input == pass1) {
document.getElementById("hidden_clue").textContent = "Hello JavaScript!";
}
}
<form id="form" onsubmit="return false;">
<input type="password" id="userInput" />
<input type="submit" onclick="othername();" />
</form>
<p id="hidden_clue"></p>
html
<form name="AdminForm" onsubmit="return Updateit()">
<input type="text" id="name" required>
<input type="email" id="email" required>
<input type="number" id="phoneNumb" required>
<input type="text" id="address" required>
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset">
</form>
Javascript
var database = {}
function Updateit(){
const Name = document.forms["AdminForm"]["name"].value;
const Email = document.forms["AdminForm"]["email"].value;
const PhoneNumb = document.forms["AdminForm"]["phoneNumb"].value;
const Address = document.forms["AdminForm"]["address"].value;
database[Name] = [Email,PhoneNumb.toString(),Address];
console.log(database[Name]);
}
the data in object is vanished after a Millisecond
After input data in form i used to save that data in database object but is not shown in it when i try to display in console or alert.
You have not specified your Html structure and when this function was triggered, but if so, what is the problem with its operation ?
var database = {}
let button = document.getElementById("get-form");
button.addEventListener("click", Updateit)
function Updateit() {
const Name = document.forms["AdminForm"]["name"].value;
const Email = document.forms["AdminForm"]["email"].value;
const PhoneNumb = document.forms["AdminForm"]["phoneNumb"].value;
const Address = document.forms["AdminForm"]["address"].value;
database[Name] = [Email, PhoneNumb.toString(), Address];
console.log(database[Name]);
}
<form name="AdminForm">
<input type="text" name="name">
<input type="email" name="email">
<input type="text" name="phoneNumb">
<input type="text" name="address">
<button type="button" id="get-form">Get Form Items</button>
</form>
var database = {}
database.Name = document.forms["AdminForm"]["name"].value;
database.Email = document.forms["AdminForm"]["email"].value;
database.PhoneNumb = document.forms["AdminForm"]["phoneNumb"].value;
database.Address = document.forms["AdminForm"]["address"].value;
function Updateit(){
console.log(database[Name]);
}
}
How can I execute copy to clipboard with many inputs? I have this code
HTML CODE
<input type="text" value="Hello" id="myInput1">
<input type="text" value="World" id="myInput2">
<button onclick="myFunction()">Copy text</button>
SCRIPT CODE
<script>
function myFunction() {
var copyText1 = document.getElementById("myInput1");
var copyText2 = document.getElementById("myInput1");
copyText1.select();
copyText1.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
You can add a third input field (or a textarea if you also want to add a newline character) and simply hide it. And, just before executing the text select and copy commands, unhide the textarea and then again hide it.
function myFunction() {
var copyText1 = document.getElementById("myInput1");
var copyText2 = document.getElementById("myInput2");
var hiddenInput = document.getElementById("hiddenInput");
hiddenInput.value = "Description1: " + copyText1.value + "\nDescription2: " + copyText2.value;
hiddenInput.style.display = "";
hiddenInput.select();
hiddenInput.setSelectionRange(0, 99999);
document.execCommand("copy");
hiddenInput.style.display = "none";
alert("Copied the text:\n" + hiddenInput.value);
}
<input type="text" value="Hello" id="myInput1">
<input type="text" value="World" id="myInput2">
<textarea id="hiddenInput" style="display:none;"></textarea>
<button onclick="myFunction()">Copy text</button>
maybe this one ?
for more clipboard usage info => https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#Using_the_Clipboard_API
btCopy.onclick=_=>
{
// step 1: collect the input values (a method like so many others)
let inputs = {}
Array.from(new FormData(myForm),entry=>{inputs[ entry[0] ] = entry[1]})
let All_inputs = JSON.stringify(inputs)
// step 2 : write All_inputs into the clipboard
navigator.clipboard.writeText(All_inputs)
// as in your wishes...
alert('Copied the text: ' + All_inputs)
}
<form id="myForm">
<input type="text" name="Description1" value="Hello">
<input type="text" name="Description2" value="world">
</form>
<button id="btCopy">copy</button>