Text box change text on submit - html

When the user hits submit, it will show a different text in the box based on user input. For example: "www.link.com/page".
Here is the HTML:
<form method="post" action="">
<textarea name="comments" cols="25" rows="5">
page
</textarea><br>
<input type="submit" value="Submit" />
</form>

Try this (if this is what you are trying to do) :
<input type="text" id="txtInput" value="" />
<input type="button" value="Submit" onclick=" javascript: document.getElementById('comments').value = document.getElementById('txtInput').value;" /><br />
<textarea name="comments" id="comments" cols="25" rows="5">
page
</textarea>
If you are trying to do something else, please provide more details. :)

Related

"contact us" button and "reset fields" button doesn't redirect to links

I'm trying to make a "contact" button that doesn't allow you to submit until the required fields are filled, then redirects you to another html site. It currently doesn't allow you to submit correctly, but when the fields are filled it just resets the page instead of redirecting it. I think it's ignoring the "form action" part.
Also the reset button just doesn't work at all.
Does anyone see anything that might be the reason?
Thanks!
<form method="get">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<form action="contact2.html" method="post">
<input type="submit" value="Contact" />
</form>
<form action="contactus.html">
<input type="reset">
</form>
</form>
Here's an image of what it looks like when you click contact without filling in the fields
https://i.gyazo.com/dc3a77b5eed0dbad2d6f6e2da1cf3075.png
Below is working code
<form method="post" action="/abc.html">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<input type="submit" value="Contact"/>
<input type="reset">
</form>
Explanation:
All form-elements buttons, textarea, input should be wrapped in one form element.
you need to add form method as post and in action pass the URL of the page where you want to redirect after successful form submission.

how to expand the rows of an input field while keeping it part of the form

I know there quite a few people that say to get a multi-line input you need to use a textarea, but I can't because then it wouldn't be part of the form. Here is my code.
<form action="form.php" method="POST">
<input name="field1" type="text" value="type here" />
<input type="submit" name="submit" value="enter">
</form>
You can't. The only HTML form element that's designed to be multi-line is <textarea>
<form action="form.php" method="POST" id="myForm">
Name: <input type="text" name="usrname" />
<input type="submit" name="submit" value="enter">
</form>
<textarea name="comment" form="myForm"></textarea>
The texarea is outside the form, but by adding the ID of the <form> it's still a part of the form.
Is there a reason you can't use:
<form action="form.php" method="post">
<textarea name="field1"></textarea>
<input type="submit" name="submit" value="enter">
</form>

Change form submit from image to text link

I have a search form that has a image as the button which is great, but i can't get the image to look the same as other text, i would like to remove this image and just use it as text instead then style it accordingly, if someone could give me some advice on doing this the simplest way possible that would be appreciated.
<form action=".php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query"></label>
<input type="text" name="search_query" id="search_query" class="Textbox" value="Search" autocomplete="off">
<input type="image" src="Search.gif" class="Button">
</form>
Many thanks.
You can replace the image with a submit button and remove the borders and background with css. That should show just plain text
<form action=".php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query"></label>
<input type="text" name="search_query" id="search_query" class="Textbox" value="Search" autocomplete="off" />
<input type="submit" value="The text you want" class="Button" />
</form>

Can't see the send button in HTML contact form

I'm trying to make a simple HTML contact form, but when I upload the HTML page to the internet, the send and clear buttons are not showing up - they're invisible.
The funny thing is if I hover the mouse over where they are supposed to be, I can see that there is a button there.
Why could this be?
<form action="contact.php" method="post">
<div>
<label for="contactname">Name</label>
<input type="text" name="contactname" class="textfield" id="contactname" value="" />
<span class="require"> *</span>
<label for="contactsubject">Subject</label>
<input type="text" name="contactsubject" class="textfield" id="contactsubject" value=""/>
<span class="require"> *</span>
<label for="contactemail">Your E-mail</label>
<input type="text" name="contactemail" class="textfield" id="contactemail" value="" />
<span class="require"> *</span>
<label for="contactmessage">Your Message</label>
<textarea name="contactmessage" id="contactmessage" class="textarea" cols="8" rows="12"></textarea>
<span class="require"> *</span>
<input type="submit" value="Send">
<input type="reset" value="Clear">
add / end slash to both send & clear
<input type="submit" value="Send"/>
and
<input type="reset" value="Clear"/>
or you can also do like this:
<input type="submit" value="Send"></input>
<input type="reset" value="Clear"></input>
<input> is starting tag
</input> is ending tag
UPDATE 1: answer for how to use image for submit button
change input type to "image"
<input type="image" value="submit" src="submit1.jpg" alt="submit Button" onMouseOver="this.src='submit1.jpg'">

Why isn't my textarea's placeholder showing up?

I am using placeholders for all my form elements and it's showing up in them all apart from the textarea. Just looked at it in safari now, and have realised that my input of type="number" isn't showing the placeholder either.
The page is here and you need to click the 'book now' link at the top of the page.
My html:
<form id="booking" action="single-workshops.php">
<input type="text" required="required" placeholder="name"/><br />
<input type="text" required="required" placeholder="your phone number"/><br />
<input type="email" required="required" placeholder="email"/><br />
<input type="number" required="required" placeholder="how many in your party" /><br />
<textarea rows="5" cols="30" placeholder="enter optional message">
</textarea><br />
<input type="button" value="submit"/>
</form>
Because you have something as text in your textarea with a linebreak in it.
<textarea rows="5" cols="30" placeholder="enter optional message">
</textarea><br />
Should be:
<textarea rows="5" cols="30" placeholder="enter optional message"></textarea><br />