I have a form that contains an user input (i.e. their name) and on the text area I'd like for it to have something like this:
Hello, [their name]!
I was thinking of something like this:
<form>
<label for="yname">Your name:</label><br>
<input type="text" id="yname" name="yname"><br>
<input type="submit" value="Submit">
</form>
<textarea variable="yname">
Hello, $variable
</textarea>
<form>
<label for="yname">Your name:</label><br>
<input type="text" id="yname" name="yname" onkeyup="update()"><br>
</form>
<textarea variable="yname">
Hello,
</textarea>
<script>
function update() {
document.querySelector("textarea").value = `Hello, ${yname.value}`
}
</script>
You may have to use javascript.
So first
Select the element to want to read. document.getElementById("yname")
then use .value to get the value.
Select the element where you want to put these values to show to user .. document.getElementById("show") and print the values.. .innerText.
Now put the logic inside a function showName() and call this function on onclick event of submit button.
function showName(e){
var name= document.getElementById("yname").value;
document.getElementById("show").innerText = "Hello, " +name;
}
<body>
<form>
<label for="yname">Your name:</label><br>
<input type="text" id="yname" name="yname"><br>
<input type = "button" onclick="showName()" value="submit">
</form>
<br>
<br>
<textarea variable="yname" id="show">
</textarea>
</body>
If you want your textarea to be hidden, add a property display:none;
document.getElementById('showName').addEventListener('click', function(){
var textarea = document.getElementById("show");
textarea.value = "Hello, " + document.getElementById("yname").value;
textarea.style.display = "block";
})
<form>
<label for="yname">Your name:</label><br>
<input type="text" id="yname" name="yname"><br>
<input type = "button" id="showName" value="submit">
</form>
<br>
<br>
<textarea variable="yname" id="show" style="display:none;">
</textarea>
</form>
Related
Code is the variable with the URL in it.
That's how it is supposed to work: User enters code (ex: 123342) in Textbox and the Text inside the text box is saved inside variable Code. Then, its goes to the website page 123342.
<form for="Code" action='https://website.com/ + Code'>
//makes a label
<label for="Answer" >URL:</label>
<input type="Answer" id="Code" Answer="Answer"><br><br>
<input type="submit" value="Join" class="Join">
</form>
You can set it at onload:
window.onload = function(){
var id = 789
document.getElementById("form").action = "https://test.com/"+id
};
<form for="Code" id="form">
<label for="Answer" >URL:</label>
<input type="Answer" id="Code" Answer="Answer">
<input type="submit" value="Join" class="Join">
</form>
I wanted to try and verify input before being submitted therefore I used the required attribute at the end of input, but it's not working and I've already tried some of the recommended solution like wrapping the input in form tag or trying to close the tag of input () but when i submit my form with an empty input it stills submited normally and doesn't declare a required field .
I would appreciate any help, thank you!!
this is a part of my code
<form id="form" style="background-color:honeydew ;" class="container text-center">
<div><br><h2> Contact Us </h2></div>
<div id="contact">
<div>
<label> Name</label>
<input type="text" placeholder="Your name " name="name" required/>
</div>
<br>
<div>
<label> Email</label>
<input type="email" placeholder="name#gmail.com" name="email" name="email">
</div>
<br>
<div>
<label> Message</label>
<input type="text" style="height:50px;" name="message">
</div>
<br>
<div><input type="button" value="submit" name="submit"><br></div>
<br>
</div>
<br>
</form>
and this is the javascript file linked to it :
//we take informations subbmitted by user from the form and we replace the form with a reply
//containing these pieces of information on the click on the submit button
var form=document.getElementById('form'),
contactForm=document.getElementById('contact'),
submitButton=contactForm.children[6].children[0];
var processForm= function(){
name=document.getElementsByName('name')[0].value,
email=document.getElementsByName('email')[0].value,
sitereplyText=document.createTextNode('this is a initialiazing value'),
sitereplyEl=document.createElement('p');
mytext= 'Hey '+name+'! Thanks for your message :) We will email you back at '+email;
sitereplyText.nodeValue=mytext;
sitereplyEl.appendChild(sitereplyText);
form.replaceChild(sitereplyEl,contactForm);
}
submitButton.addEventListener('click',processForm);
So i firstly corrected the input type into submit
<input type="submit" value="submit" name="submit">
then in the javascript file i changed
submitButton.addEventListener('click',processForm);
to
submitButton.addEventListener('form.submit()',processForm);
and it seems to work :)
How to make a form that submit to a text field below
<form action="">
Text: <input type="text" name="firstname">
<input type="submit" value="Submit"><br><br>
Post text: <input type="text" name="firstname">
</form>
You will need to use JavaScript for that:
<script>
function submitted() {
formValue = document.getElementsByName("firstname")[0].value;
document.getElementsByName("firstname")[1].setAttribute("value", formValue); // Copy the value
return false;
}
</script>
<form onsubmit="return submitted()"> <!-- Call submitted when the form is submitted -->
Text: <input type="text" name="firstname">
<input type="submit" value="Submit"><br><br> Post text: <input type="text" name="firstname">
</form>
However, there is no need for a form for that. The onsubmit attribute is mostly used for when you want to alert the user that the form was submitted; the actual submission is done on the server through PHP or something else, and not through JavaScript (since the user has access to the JavaScript code and could change the input checking process as he wishes). Here you could simply have something like this:
<script>
function submitted() {
formValue = document.getElementById("firstname").value;
document.getElementById("postFirstname").setAttribute("value", formValue); // Copy the value
}
</script>
Text: <input type="text" id="firstname">
<button onclick="submitted()">Submit</button>
<br><br> Post text: <input type="text" id="postFirstname">
How can I add a string to the text written by the user of my form?
For example, if he wants to search for "test", my form should submit "site:mysite.de test".
(The name where I'm trying to send the string to is q.)
I tried with
<form action="https://searx.me" method="get" accept-charset="UTF-8">
<input type="text" name="q" placeholder="Search with Searxes" required>
<input type="hidden" name="q" value="site:mysite.de">
</form>
How expected only the first value is submitted https://searx.me/?q=test
I would prefer a solution with pure html without javascript.
Here is an ugly way to do that, looks like binding ;)
var hidden = document.getElementsByClassName('hidden')[0];
var hidden_attr = hidden.getAttribute('value');
var show = document.getElementsByClassName('show')[0];
function magic(){
hidden.setAttribute('value', hidden_attr + show.value);
console.log(hidden.getAttribute('value'));
}
<form action="https://searx.me" method="get" accept-charset="UTF-8">
<input class="show" onkeyup="magic()" type="text" name="q" placeholder="Search with Searxes" required>
<input class="hidden" type="hidden" name="q" value="site:mysite.de ">
</form>
This format of html form control doesn't pass form data
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label class="field" for="firstName">First Name:</label>
<input type="text">
</fieldset>
<input type="submit">
</form>
but this one does
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label>First Name:</label>
<input type="text" name="firstName">
</fieldset>
<input type="submit">
</form>
Unless I'm missing something obvious, the difference is in the label control..Are both valid and if so, can anyone explain to me why only the second one passes form data to my PHP controller method.
<input type ="submit"> is not part of the fieldset in the first bit of code, but I don't think that's really the issue.
I believe changing the code on the first bit to:
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label for = "firstName">First Name: </label>
<input type="text" name = "firstName">
<input type="submit">
</fieldset>
</form>
will work. You need to make sure the name of the input is the same as the property you are trying to set.