Develop Reference

How to send a pre-defined text of a <form> element into action page, without having the user to type

As you know, the <input type="text" name = "input_field"> element creates a space for the user to type in an HTML form. But in this case, I know what the user is going to enter.
For instance, the user wants to send 'hello' to the action page. It isn't a particular piece of information like his/her name, email id, etc. It will be the same for everyone. Then why not just create a button like this:
<input type="submit" value="click to send 'hello'">
When the user will click on the button, 'hello' will be sent to the action page specified in the action attribute of the <form> element.
How do I do it? Also, I need to mention that I am not much experienced in HTML or JS, so I would appreciate a beginner-like solution.
I apologize if this question already exists somewhere.
Thanks in advance!

You can include predefined information when submitting a form by using a type="hidden" field:
<input type="hidden" name="input_field" value="hello">
That doesn't appear visibly on the page, but is submitted just like any other field when you submit the form.

As far as I understand your problem, you want to create a form where few fields will have predefined information
I would suggest not to hide the input according to the UI/UX perspective but instead, you can show those fields as read-only.
In this way, the user will have an idea of predefined values
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="number" disabled readonly id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>

Changing the recipient of the mailto to what is entered in the text field

I wanted to know if it possible to make a form where one could change the email to which the mailto action is set, to what is entered in the text field.
for example:
<form enctype="text/plain" method="get" action="mailto:getElementByName='friend1'" action="cc:manager#crill.com">
Friend 1 <input type="text" name="friend1"><br>
Friend 2 <input type="text" name="friend2"><br>
Friend 3 <input type="text" name="friend3"><br>
<input type="submit" value="Send">
</form>
So if in the first field named "Friend 1" I would enter: "example1#mail.com", then when I press submit I wanted it to take the info that was placed into the first field and make it the mailto.
I apologise for my english, hope whom ever reads this understands it.
Thank you in advance.

You could do it by using:
<form method="post" action="javascript:;" onSubmit="this.action='mailto:'+document.getElementById('friend1').value;" enctype...>
Check here too: Is it possible to dynamically set the recipient of MAILTO: with only HTML and JavaScript?

Onclick function not working with CFINPUT validation

I am trying to validate the fields using CFINPUT and then calls a popup window function to do more stuff BEFORE submitting the form but it's not working. The onclick function seems to take precedent over the CFINPUT validation. As soon as I click on the Submit button it's calling the popup window function first without validating the fields. I need it to:
first validate the fields
call the popup function
then submit the form after the popup closes itself
(p.s. I see other similar case on here but there is no answer given)
The code looks like this:
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
....
<input type="submit" value=" Send " onclick="popup()">
....
Please help. Thank you.

This is an old blog posting so not sure how accurate things are today but it shows how you can run the CFFORM validation via the _CF_checkTaskForm() function. So it seems like if you change the submitting of the form to a button via <input type="button" value="Send" onclick="popup(this.form)" /> then change the popup function to first validate the form via the _CF_checkTaskForm() and if that passes to proceed with the other JS you are doing.
http://www.neiland.net/blog/article/triggering-cfform-validation-when-using-ajax/
To expand on that, I just looked at a CF8 and CF11 installations and looks like the function in those is _CF_checkCFForm_1 if using that version of CF then something like this should get you in the correct direction:
<script>
popup = function(formreference) {
var check = _CF_checkCFForm_1(formreference);
if (!check) {
//if the rules failed then do not submit the form
return false;
} else {
// Do the popup
}
}
</script>
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
<input type="button" value=" Send " onclick="popup(this.form)" />
</cfform>

The cfinput validation you're attempting to do is the client-side equivalent to
<cfif len(trim(string)) gt 0>
(Edit: That is not to imply that you should depend wholly on client side validation. Client-side validation is more of a feature to help your visitors. Server side validation is still important.)
Which I have to say is really weak validation. Anything consisting of at least 1 non-whitespace character will pass the test. People will be able to have usernames like "!" which isn't fanstastic, but that's just some information.
On the jQuery Validate link you provided, they show an example form (along with a link of the same form in action)
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
This very basic example shows how simple Validate can be to install, and a simple format of
<input name="ele" type="text" required>
is exactly the same level of validation you're attempting. So, to begin with, you can almost copy and paste the code. (Aside from from the different requirements you can make, setting minlength requires a certain number of characters and requires that at least one not be whitespace).
jQuery Validate can get quite extensive but is very easy to basically install and once you become familiar, make custom classes as needed
As a final note, don't disregard the disdain for CFForm elements. It may seem like others are disregarding your question, but that's not the case.
To be honest, they began to be introduced at a different time in the life of the internet, but have always been kind of finicky to work with. Expansion to them, in the opinions of many, have not been done well and have frequently exasperated the flaws.
It's super attractive to be able to say <cfinput...required> but the tags become a nuisance and you don't easily have the fine control over them that you might desire. They're a crutch, and a rusty crutch at that.
You might check out CFUI The Right Way # Github or this hosted version for some great insight and examples.

do something if element hidden [duplicate]

This question already has answers here:
How do I check if an element is hidden in jQuery?
(65 answers)
Closed 9 years ago.
how can i check a if an element is visible or hidden with jquery and perform some action?
below given is my form related code,
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
Full name: <input type="text" name="fullname"><br>
DOB: <input type="text" name="dob">
Address: <input type="text" name="address">
</form>
i need to hide the full name text field when first name text field or last name text field is displaying.

try something like this
if($('#testElement').is(':visible')){
//what you want to do when is visible
}
for your code
if($('input[name="firstname"], input[name="lastname"]').is(':visible')){
$('input[name="fullname"]').hide();
}
REFERENCE
http://api.jquery.com/visible-selector/

if($('input[name="firstname"], input[name="lastname"]').is(':visible') === true)
$('input[name="fullname"]').hide();

you should change
<input type="text" name="fullname">
to
<input type="hidden" name="fullname">
to make an input field hidden

this should work $(element).is(":visible")

I don't know the logic behind your question, but this demo should do the trick. DEMO
$(document).ready(function(){
if($('#firstname').is(':visible') || $('#lastname').is(':visible'))
$('#fullname').parent().hide();
})
I added some parent divs to hide the text and the input on once. If you want you can wrap the text in label tag for more clearly output.

The original state of using Angular.js to validate form input

the code below is part of signin.html. when i visit that page, nick and password is surely empty, so the myForm.nick.$error.required is true. the error message is displayed. What i want is, when i visited the page, there's no error message on the page. What should i do? Thanks
<form ng-submit="signin()" name="myForm">
<input type="text" name="nick" ng-model="data.nick" required>
<span class="error" ng-show="myForm.nick.$error.required">Required</span><br>
<input type="password" name="password" ng-model="data.password" required>
<span class="error" ng-show="myForm.password.$error.required">Required</span><br>
</form>

You should add a $dirty condition to prevent the required field message being displayed at the beginning of page.
myForm.nick.$error.required && myForm.nick.$dirty
myForm.password.$error.required && myForm.password.$dirty
$dirty===true means that user has already interacted with the form.
Here is a jsfiddle demo
Hope this helpful.