I'm new to HTML/CSS and have created a simple contact form to enter a name, number, and have a populated textarea with a short message but would like to automatically populate the name area within the text field with whatever was put into the name's input field previously in the contact form. What is the best way to do this?
<fieldset>
<h1>Contact Form</h1>
<label for="name">Patient Name:</label>
<input name="name" id="name" type="text" size="40" maxlength="100">
<label for="number">Patient Number:</label>
<input name="number" id="number" type="text" size="40" maxlength="12">
<label for="message">Text Messge:</label>
<textarea name="message" id="message" cols="40" rows="10">
Hi [name], thank you for visiting us!
</textarea>
<input class="btn" name="submit" type="submit" value="Send">
</fieldset>
Some JavaScript should solve your problem.
Insert this script tag into your HTML file after the form.
<script>
// save the location of the name field
var name_field = document.getElementById('name');
//add an event listener to activate if the value of the field changes
name_field.addEventListener('change', function() {
// when the field changes run the following code
// copy the text (value)
var name = name_field.value;
// concatenate it with the desired message
var autoFill = 'Hi ' + name + ', thank you for visiting us!';
// and paste it into the message field.
document.getElementById('message').value = autoFill;
})
</script>
For dynamic behavior you are gonna need some javascript.
<input name="number" id="number" type="text" oninput="getNumber()" size="40" maxlength="12">
<script>
var getNumber = function() {
document.getElementById("message").innerHTML = "Hi " + document.getElementById("name").value + ", thank you for visiting us";
}
</script>
And as it looks right now, you probably shouldn't be using a textArea to display this message, rather use a paragraph element.
AngularJS is perfect for a scenario like this if you are more interested.
Related
I would like to have 2 mutually exclusive fields.
One will be a FileField and other TextBoxField.
Is there a ready html form I can get my hands on to.
I have searched the web and couldnt find any.
Oh I am a little sorry..
I meant that I wanted to do this via Django Templates
You can make an onInput event listener and handle it using javascript, so that if the user types in one field it empties the other.
For example:
<form>
<label for="first">Fill This:</label>
<input type="text" name="first" id="first" oninput="run('first')"><br><br>
<label for="second">Or This:</label>
<input type="text" name="second" id="second" oninput="run('second')"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function run(activeField) {
if (activeField == 'first') {
const second = document.querySelector('#second')
second.value = ''
} else {
const first = document.querySelector('#first')
first.value = ''
}
}
</script>
For Your textbox, you can use this:
<input type="text" name="name" placeholder="Please enter your name">
And for your files:
<input type="file" name="fileName">
But for file name it needs to be encrypted. HTML won't let you submit a form with a file. But you can override this in the form attr, like this:
<form action="dirToForm.py" method="POST" enctype="multipart/form-data"></form>
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">
I need to get information from my online form added in to my URL string and get it submitted to the dialler.
I have a working URL string that submits data to our dialler ok.
I need to get the first name, last name and phone number from the form submission in to the URL string.
This is how the URL string looks;
http://domain.com/scripts/api.php?user=admin&pass=password&function=add_lead&source=MobileOp&phone_number=07000000000&phone_code=44&list_id=3002&first_name=NAME&last_name=SURNAME&rank=99&campaign_id=campaign&callback=Y&callback_datetime=NOW
This is the form I have;
<form id="contact_form" method="post" action="">
<div class="contactform">
<fieldset class="large-12 columns">
<div class="required">
<label>Your First Name:*</label>
<input name="first_name" type="text" class="cms_textfield" id="first_name" value="" size="25" maxlength="80" required="required" />
</div>
<div class="required">
<label>You Last Name:*</label>
<input name="last_name" type="text" class="cms_textfield" id="last_name" value="" size="25" maxlength="80" required="required" />
</div>
<div class="required">
<label>Phone Number:*</label>
<input name="phone_number" type:"number" id="phone_number" size="25" maxlength="11" required="required"></input>
</div>
</fieldset>
<p class="right"><strong>Call us now on 01656 837180</strong></p>
<div class="submit"><input type="submit" value="Submit" class="button small radius"></div>
</div>
</form>
I am struggling to get anywhere with this. I have a basic knowledge of PHP.
If you change your form to method="GET" and the action to your url action="http://domain.com/scripts/api.php" it will include it in the URL string. That said, showing a user's password as a query string variable is probably a bad idea in the long run.
Instead, you can process the input from the form in PHP by referring to the $_POST array in your code. For example, to get the first name you'd just use $_POST['first_name']
Change
<form id="contact_form" method="post" action="">
to
<form id="contact_form" method="GET" action="">
(notice the method 'GET'). GET sends form variables through the URL.
You can use PHP for this.
if you have an input field of name attribue 'first_name', It'll be stored in the variable $_POST['first_name'] in case of POST as method and $_GET['first_name'] in case of GET method
If you have a url
http://domain.com/scripts/api.php?user=admin&pass=password&function=add_lead&source=MobileOp&phone_number=07000000000&phone_code=44&list_id=3002&first_name=NAME&last_name=SURNAME&rank=99&campaign_id=campaign&callback=Y&callback_datetime=NOW,
notice the x=y pattern repeating in it, like user=admin. Here, the first element, x becomes the key to tha PHP array and the second becomes the value.
You can use this function. on your submission page
<script type="text/javascript">
function iter() {
var str = "";
$("#contact_form .contactform .required :input").each(function () { // Iterate over inputs
if ($(this).attr('id')) {
str += $(this).attr('id') + "=" + $(this).val() + "&"; // Add each to features object
}
});
str = str.substring(0, str.length - 1);
$.ajax({
type: "GET",
url: "http://domain.com/scripts/api.php",
data: str,
async: true,
error: function (error) {
},
success: function (data) {
}
});
}
</script>
just attach it to the submit button as shown below
$("#contact_form .submit").on("click", function () {
iter();
return false;
});
This question already has answers here:
Concatenate multiple HTML text inputs with stored variable
(2 answers)
Closed 9 years ago.
I have my code like this
First name : <input type="text" name="txtFirstName" /> <br><br>
Last name : <input type="text" name="txtLastName" /> <br><br>
Full name : <input type="text" name="txtFullName" > <br><br>
if i give abc in first name text box and def in last name text box the result should be displayed as abcdef in full name text box. How to do this?
It's actually quite simple with a tiny bit of inline JavaScript using the form oninput attribute.
<form oninput="txtFullName.value = txtFirstName.value +' '+ txtLastName.value">
First name : <input type="text" name="txtFirstName" /> <br><br>
Last name : <input type="text" name="txtLastName" /> <br><br>
Full name : <input type="text" name="txtFullName" > <br><br>
</form>
http://jsfiddle.net/RXTV7/1/
I'd also suggest using HTML5 <output> element instead of third input. To learn more start here: http://html5doctor.com/the-output-element/
Bind a function that generates the full name on keyup events for your inputs...
<script type="text/javascript">
function generateFullName()
{
document.getElementById('fullName').innerText =
document.getElementById('fName').value + ' ' +
document.getElementById('lName').value;
}
</script>
First Name <input type="text" id="fName" onkeyup="generateFullName()" /><br/>
Last Name <input type="text" id="lName" onkeyup="generateFullName()" /><br/>
Full Name <span id="fullName" />
if you want, you can have the FullName as a input too, and set it's Value.
Try this (using jQuery). it will work. But the fullname field will remain empty if the individual fields are empty
<script>
$(document).ready(function(){
$("fullName").focus(function(){
var fullname = $("fName").val() + $("lName").val();
$("fullName").val(fullname);
});
});
</script>
First Name <input type="text" id="fName" /><br/>
Last Name <input type="text" id="lName" /><br/>
Full Name <span id="fullName"/>
For manipulating HTML you'll need to use JavaScript. There are tons of good tutorials out there, for example on w3schools.com.
You may also want to check out jQuery, which makes this kind of manipulations a lot easier and more straightforward.
you can use the below code for that:
<script type="text/javascript">
function generateFullName()
{
document.getElementById('txtFullName').value =
document.getElementById('fName').value + ' ' +
document.getElementById('lName').value;
}
</script>
First Name <input type="text" id="fName" /><br/>
Last Name <input type="text" id="lName" oninput="generateFullName()" /><br/>
Full name <input type="text" id="txtFullName" name="txtFullName" > <br><br>
Also, instead of oninput event , you can opt for onblur also.
I have a standard HTML form.
<form method="post" name="myemailform" action="form-to-email.php">
Enter Name: <input type="text" name="name">
Enter Email Address: <input type="text" name="email">
Enter Message: <textarea name="message"></textarea>
<input type="submit" value="Send Form">
</form>
The problem is that when a value is input that is larger than the field size, upon clicking away, the field skips back to the beginning of the field so the end is cut off.
Is there a way to get it so that the view of the field stays where the carat was?
This is a javascript problem (client side), not a PHP one (server side).
You need to do this:
<input type="text" name="name" size="10" onblur="if (this.length > 10) {this.dir = 'rtl';} else {this.dir = 'ltr';}">
just check what is the proper length to use in order to change the input direction
You can use the HTML attribute size.