adding values entered by user in a separate text area - javascript

I need to display an HTML form where user enters a value in a field. A textarea is displayed in the same form. Once user inputs text into the text field and clicks on submit, the values submitted should be appended and displayed in the textarea box. Something like:
field 1: some text box
field 2: text box
Submit button
field 3: When i click submit, display the texts entered in field 1 and field 2 together in this textarea.
Any ideas on this will be very helpfull.

may be you want to do like this, try this one...
<input type="text" id="txt1"/>
<input type="text" id="txt2"/>
<input type="button" value="submit" id="btn1"/>
<textarea id="txt3">hello</textarea>
$(document).ready(function(){
$("#btn1").click(function(){
txt1=$("#txt1").val();
txt2=$("#txt2").val();
//alert(txt1+txt2;
$("#txt3").val(txt1+txt2);
});
});
click on this for live demo: http://jsfiddle.net/vwckksL6/1/
thank you

Related

Javascript on click set input before ajax

I have three inputs in the following form. Two inputs type is text and another one input type is hidden. Now when I click the submit button then two input values need to set the hidden input before run the ajax query. Because, ajax will get the data from the hidden input only. I have tried it myself but, it's not working for me. Now, when I click the submit ajax working first then set the both values to hidden input.
<form>
<input type="text" class="date" value="2018-11-09">
<input type="text" class="time" value="15:00:00">
<input type="hidden" class="date-time" value="">
<button type="button" class="button">Submit</button>
</form>
For the following code I am assuming that the 'Submit' button has its type changed to 'submit' as this will give you more control of when the form is submitted:
$('form').submit(function(event) {
event.preventDefault(); // stop the form from automatically submitting
$('.date-time').val($('.date').val() + $('.time').val());
console.log($('input[type=hidden').val());
// call your ajax here
});
The important line here for your question is:
$('.date-time').val($('.date').val() + $('.time').val());
This sets the value of the input .date-time to the input of .date and .time, although I would recommend using ids instead of classes as they are unique

Is it possible to add the value of a checkbox if checked into a text field?

Is it possible to add the value of a checkbox if checked into a text field?
I have this form...
http://xotio.com/photos/download/turk.html
I'm trying to add the value of a checkbox into a textbox if the checkbox has been clicked.
In my form there is one text box and three checkboxes per image (one of the checkboxes opens up more checkbox options and i'm not concerned about those color choices as much). I'm trying to add the 'value' of the three main checkboxes into the text field above. Is that possible?
the values of the checkboxes i would like are the ' lost' and ' none' and ' blurry' options and add their values to the textbox above if they get checked.
In the end I'm trying to use parsley to validate each of the textboxes for data before it submits my form. There are occasionally instances when no data is entered in the textbox, but the user has checked the right boxes and I want it to validate and can't come up with any ideas except this... any help or ideas would be great. thanks in advance and sorry for the long winded complex question.
I give you an example for your reference:
<html>
<body>
<input type="checkbox" value="lost" onclick="sendValueToTextBox(this)">lost
<br>
<input type="checkbox" value="none" onclick="sendValueToTextBox(this)">none
<br>
<input type="checkbox" value="blurry" onclick="sendValueToTextBox(this)">blurry
<br>
<input type="text" id="fg">
<script language=javascript>
function sendValueToTextBox(checkbox) {
var textbox=document.getElementById("fg");
if (checkbox.checked)
textbox.value=checkbox.value;
else
textbox.value="";
}
</script>
</body>
</html>

How to submit a form without action or submit button

I was looking at one image web site and was puzzled by the javascript they used. The web site has a image, below that there is a text input field you can input your comments. After you input your comments, you press the enter key to commit the comment.
The html looks like this:
<form class="-cx-PRIVATE-PostInfo__commentCreator" data-reactid=".0.1.0.0.0.2.2.1">
<input class="-cx-PRIVATE-PostInfo__commentCreatorInput" placeholder="Add a comment…" type="text" value="" data-reactid=".0.1.0.0.0.2.2.1.0">
</form>
There is no action in the form and no submit button. How can they submit the form?
The form's action attribute will default to the current URL.
Try filling in some text and hitting enter:
<form>
<input type="text" name="lookInTheUrlAfterHittingEnter" />
</form>
As #Traktor53 says, hitting enter whilst focus is on the text input will submit the form.
Input elements of type text (for a single line of text) have submitted their form if the enter key is pressed while filling them in since the year dot AFAIK. I did not find any mention of this in HTML5's documentation for this input type element.

Set default text in a text field for a form

I am making a form where almost every person filling out the form will be from the same city, state and zip code. Is there anyway I can have default text in the text area that will count when it sends? I have seen forms where there is text in the text area, but when the user clicks on the field the text disappears. I would not want the text to disappear on field click.
This is just a sample form with "default" inputs in the text box
<form action="test.php" method="post">
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>
<input type="submit" value="Submit form">
</form>
The thing to add is value="something here"
In this example the input boxes has John and Doe written not there as a placeholder
As you can see here at w3school
If you are useing a text area then you can do something like this:
<textarea name='someName'>Default value</textarea>
whatever you write between the tag is the default value for the textarea
<textarea id="txtarea">This is the Default Value</textarea>
This is different for input type=text. In that case you need to use the value attribute

How to reset input fields

I want to reset the input field.
If I click "Type 1" radio button and enter value in input field and again if i select "Type 2" radio button then the existing value in the input field should be reset to empty.
<div class="samples">
<input type="radio" id="samples_1" />Type1
<input type="radio" id="samples_2" />Type2
<input type="radio" id="samples_3" />Type3
</div>
<input type="text" id="demo" value=""/>
How can I implement this in javascript/jquery.
Fiddle: http://jsfiddle.net/wYuZL/
Use this, it works. And you haven't added jquery - add jquery in jsfiddle to make it work.
$(":radio").bind("change", function (event){
$("#demo").val("");
});
How can I implement this in JavaScript/jQuery?
Assuming I understand what you're trying to do (make it so that when you click on the radio buttons, the value of the input box is cleared) then you will have to set an event handler on the elements so that we can clear the input box:
$(function() {
$("#samples > input").click(function() {
$("#demo").val("");
});
});

Categories