How to get button to add text to input form - javascript

Forgive me I
function addText() {
var input = document.getElementById('something');
input.value = input.value +'URGENT PLEASE READ';
}
<form name="frm1" action="?" onsubmit="addText()">
<p> Subject </p><input type="text" name="Subject" size="40" id="something" onsubmit="addText()"maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="20"></textarea>
<input type="submit" value="MAKE URGENT" id="URGENT"/>
</form>
am very new to JS and I am attempting to create a button that adds the words "URGENT PLEASE READ" to the subject of a message; however, the following code simply clears my subject head. Thank you in advance,

I'm not sure if you wanted a separate button for make urgent and submit - if so you can do it like this
function addText() {
var input = document.getElementById('something');
input.value = input.value + 'URGENT PLEASE READ';
}
<form name="frm1" action="?" onsubmit="addText()">
<p> Subject </p><input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="10"></textarea>
<button type="button" id="URGENT" onclick="addText()">MAKE URGENT</button>
<input type="submit" value="SUBMIT" id="SUBMIT"/>
</form>

Use proper event handlers on the forms submit event, and prevent the form from submitting, otherwise the page just reloads, and the changed value is lost.
document.getElementById('myForm').addEventListener('submit', function(e) {
e.preventDefault();
var input = document.getElementById('something');
input.value = input.value + 'URGENT PLEASE READ';
});
<form name="frm1" action="?" id="myForm">
<p> Subject </p>
<input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="100" rows="20"></textarea>
<input type="submit" value="MAKE URGENT" id="URGENT" />
</form>

Why not use a Checkbox?
<form name="frm1" action="?">
<p> Subject </p>
<input type="text" name="Subject" size="40" id="something" maxlength="30" />
<p>Message</p>
<textarea id="angryarea" name="Message" cols="50" rows="5"></textarea>
<br><br>
<input type="checkbox" name="Urgent" /> Make urgent
<br><br>
<input type="submit" value="Submit"/>
</form>

Related

Send value from another form

I have multiple forms that point to the same site where the datas are stored into a sql database. For each form the user has to fill out a textfield which is separated from the form. I don't understand how i could send for each form the same value from the separated textfield.
<form name="user" action="http://hello.xy/login.php" method="GET">
<input type="text" value="User" name="provider" hidden>
Name: <br/>
<input type="text" value="" name="user_name"><br/>
Email: <br/>
<input type="text" value= "" name="user_email"><br/>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="submit" value="submit">
</form>
<form name="google" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Google" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/google.png" value="submit">
</form>
<form name="twitter" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Twitter" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/twitter.png" value="submit">
</form>
<form name="facebook" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Facebook" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/facebook.png" value="submit">
</form>
Separated textfield, but on the same site:
<form name="comment" >
<textarea name="input" ></textarea>
</form>
I hope somebody can help me.
Thanks,
Misch
You can't send data from two forms at the same time without JavaScript.
The solution without JavaScript is to use one form:
<form action="http://hello.xy/login.php" method="GET">
<textarea name="comment"></textarea>
<label for="user_name">Name</label>
<input type="text" name="user_name" id="user_name">
<label for="user_email">Email</label>
<input type="text" name="user_email" id="user_email">
<button type="submit" name="provider" value="User">Submit</button>
<input type="image" src="images/logos/google.png" name="provider" value="Google">
...
</form>
Update
Since you're using jQuery, use:
<textarea name="comment" class="comment-visible"></textarea>
And include this in each form:
<input type="hidden" name="comment" class="comment-hidden">
jQuery:
$(document).on('input', '.comment-visible', function(){
$('.comment-hidden').val( $(this).val() );
});
A <textarea> doesn't have a value= attribute. The value is the text node inside. ex.
<textarea>value</textarea>

How do I get my form to submit using parsley.js?

I've gotten the validation to work and the message appear on submit, however the page doesn't seem to process the form/refresh. Otherwise I think I am good to go!
This my html:
<form parsley-validate id="frmContact" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<p>
<label for="yourName">name</label>
<input id="yourName" parsley-required="true" parsley-mincheck="2" parsley-focus="first" type="text" name="name" class="required textArea" placeholder="Please enter your full name"/>
</p>
<p>
<label for="email" >Email</label>
<input id="email" data-trigger="change" parsley-required="true" parsley-type="email" type="email" name="email" class="textArea" placeholder="Please enter your email address"/>
</p>
<p>
<label for="comments">Comments</label>
<textarea id="comments" data-trigger="change" required data-required="true" name="comments" class="textArea" title="Message field!"/>
</textarea>
</p>
<p>
<input type="submit" class="submit myButtons submitButton specificLink button button-block button-rounded button-large" name="submit" value="Submit" placeholder="">
</p>
<div id="results" class="results" style="text-align:center;">
<span>
<p class="success">Your message was sent succssfully!<br> I will be in touch as soon as I can.
</p>
</span>
</div>
</form>
js/jquery:
var dd= $.noConflict();
dd(function() {
dd(":text:first").focus();
dd(".success").hide();
dd('#frmContact').submit(function(e) {
e.preventDefault();
if ( dd(this).parsley('validate') ) {
dd.post("index.php", dd(".success").show());
}
});
});
Try replacing dd(this).parsley('validate') with true and false to eliminate parsley.js from the problem.
You may then notice that e.preventDefault(); does not work as you want it to. See this answer for more details.
Try this instead of your code:
dd(function() {
dd(":text:first").focus();
dd(".success").hide();
dd('#frmContact').submit(function(e) {
if ( dd(this).parsley('validate')) {
dd.post("index.php", dd(".success").show());
}
return false;
});
});
Here is a fiddle.

HTML/JavaScript: How to detect a blank submission Form?

below is a simple form requesting user feedback.
Using HTML and/or JavaScript, how do you create an alert box that pops up whenever it detects the the entire Form or a portion of the Form is blank? E.g. whenever the user clicks to submit a blank/incomplete form, alert box: "You forgot to fill out Name/Email/Comments".
Thanks lot.
<div>
<form method="post" enctype="text/plain" action="MAILTO:name#example.com">
Your Name<br>
<input type="text" size="40" name="name">
<br><br>
Email Address<br>
<input type="text" size="40" name="email">
<br><br>
Any Comments or Questions?<br>
<textarea name="comments" rows="8" cols="40"></textarea>
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
<br><br>
</form>
</div>
You could use HTML5 required attribute for this
<div>
<form method="post" enctype="text/plain" action="MAILTO:name#example.com">
Your Name<br>
<input type="text" size="40" name="name" required>
<br><br>
Email Address<br>
<input type="text" size="40" name="email" required>
<br><br>
Any Comments or Questions?<br>
<textarea name="comments" rows="8" cols="40"></textarea>
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
<br><br>
</form>
</div>
Expand your Form Tag
<form onsubmit="return validate();" method="post" enctype="text/plain" action="MAILTO:name#example.com">
Basic info here: The validate() method is called whenever you try to submit the form. The boolean return of the validate() function decides if the form is sumbmitted or not.
For convenience, add id attributes to all fields. Example:
<input type="text" size="40" name="email" id="email">
The validate() method
This is the heart of your form test.
<script type="text/javascript">
function validate()
{
var messages = new Array();
if (document.getElementById('email').value.length == 0)
{
messages.push('E-Mail missing');
}
if (document.getElementById('name').value.length == 0)
{
messages.push('Name missing');
}
if (0 == messages.length)
{
return true;
}
// Do something with the messages array
return false;
}
</script>
Have fun.
If you know javascript it's a piece of cake.If not, you can use this.

Make form run a javascript function?

How can I make my form run a function when submit is clicked?
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" action="JavaScript: ajax_add_comment();">
</fieldset>
...
I am trying running the following function:
function ajax_add_comment () {
alert ("testing");
}
Use onclick attribute instead of action.
You could use jQuery, and use the .submit() function.
You can give the form an id and then attach the submit function to it.
Example:
<form id="execute"....
</form>
<script type="javascript">
$("#execute").submit(function(){
alert("i've submitted this form");
});
</script>
make sure you have included the jquery js file.
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
You can use the onsubmit event to execute JavaScript code when the form is submitted. For example:
<script>
function ajax_add_comment () {
alert ("testing");
}
</script>
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" onsubmit="ajax_add_comment();">
</fieldset>
Thank you!

Stay on current page, when form validation is false

I want to stay on the current page, if the "Name" input field is empty.
Right now, it shows the error message, and when you click ok, it still goes to the next page (contactcaptcha.php).
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
<form id="action" action="contactcaptcha.php" method="post">
<fieldset>
<textarea id="message" name="Message" placeholder="What's on your mind?"></textarea>
<input id="Name" name="Name" placeholder="Enter your full name" type="text">
<input id="Email" name="Email" placeholder="Enter your email address" type="email">
<input type="submit" onclick="notEmpty(document.getElementById('Name'), 'Please enter your name')" name="submit" value="Send your message">
</fieldset>
try like so, returning your function at submit event of the form element
<form id="action" action="contactcaptcha.php" method="post"
onsubmit="return notEmpty(document.getElementById('Name'), 'Please enter your name')">
<fieldset>
...
<input type="submit" name="submit" value="Send your message">
</fieldset>
</form>
Misssing return keyword:
<input type="submit"
onclick="return notEmpty(document.getElementById('Name'), 'Please enter your name')"
name="submit" value="Send your message">
As you use HTML5 anyway, you might want to use the required attribute: http://www.w3schools.com/html5/att_input_required.asp
<form>
<input id="message" required>
<input type="submit" value="Submit">
</form>

Categories