I have this form
<form name="myForm" action="" method="post" onsubmit="return validations(this)" >
<span>
<label>Enter Your First Name</label><input id="name" name= "field[1]" type="text" class="element text" maxlength="255" size="8" value=""/>
</span>
<br /><br />
<span>
<label>Enter Your Last Name</label><input id="last" name= "field[2]" type="text" class="element text" maxlength="255" size="8" value=""/>
</span>
<br />
<br />
<span>
<input id="field[3]" name="field[3]" class="element radio" type="radio" value="1" />
<.label class="choice" for="field[3]">Male</label>
<input id="field[4]" name="field[4]" class="element radio" type="radio" value="2" />
<label class="choice" for="field[4]">Female</label>
</span>
<br /><br />
<label class="description" for="field[5]">Enter your city </label><input id="field[5]" name="element_3" type="text" class="element text medium" type="text" maxlength="255" value=""/>
<br /><br />
<span>
<input id="field[5]" name="field[5]" class="element checkbox" type="checkbox" value="1" />
<.label class="choice" for="field[5]">I am unemployed.</label>
<br /><br />
</span>
<input type="hidden" name="form_id" value="form1" />
</div>
.
<.input type="submit" value="Validate" >
</form>
and i want to validate the form on click "Validate". to check if all fields type=text are completed.How can i do this dynamically?
You can do it using
Plain JavaScript checks, write a function and validate each field on clicking of submit button
jQuery validation plugin if you are using jQuery. Include the jQuery and jQuery validation plugin in your html page, add class="required" to your text fields and finally add a JavaScript code to attach validation.
The second is simple as it only need to call validate function and set class="required" for your text fields
ex:
Including jQuery and validation plugin in your html head tag
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script>
to attach validation to your form, add this code in head section or anywhere in body
<script type="text/javascript">
jQuery(document).ready(function($){
$('form[name="myForm"]').validate();
});
</script>
Now your form fields:
<form name="myForm" action="" method="post">
<input type="text" class="required" name="..." ...>
or simply
<input type="text" name="..." required>
.... all other fields
</form>
Related
I have an old Html form already hooked up to Bronto already:
<div id="mc_embed_signup"><form id="lunar-form"><input name="fid" type="hidden" value="3yuzy87x8gjdf73zq9p6lav86dfdw" />
<input name="sid" type="hidden" value="01c3cd9e15ec122d6bada9aeba8dbe44" />
<input name="delid" type="hidden" value="" />
<input name="subid" type="hidden" value="" />
<input name="td" type="hidden" value="" />
<input name="formtype" type="hidden" value="addcontact" />
<input id="field_361909" class="hidden field" name="67765[361909]" type="hidden" value="Weekly" />
<input id="field_361796" class="hidden field" name="67746[361796]" type="hidden" value="Hair Shaman Lunar" />
<script type="text/javascript">
var fieldMaps = {};
</script>
<fieldset id="popupfieldset">
<div class="mc-field-group-email">
<input id="mce-EMAIL" class="text field fb-email" title="7 characters minimum" autocomplete="off" name="74662" pattern=".{7,}" required="" type="email" value="" placeholder="Email" />
i want to add another input for first name, how do I make sure it connects to the bronto database correctly?
I know that this might seem like a duplicate, but i can't seem to figure this out. I am wanting to submit a form in HTML to a Popup window. when i hit the submit button, it returns a blank page. I want the pop up to display all of the input that one filled out one the form. I want to do it in JavaScript. This is my code here. I want it to output all of the information entered in the form, from the Personal Information fieldset and the personal choices fieldset. I want it to display as an unordered list.
Heres the Javascript that i have so far:
<head>
<title>My Form</title>
<script type="text/javascript">
function display() {
dispWin = window.open('','NewWin',
'toolbar=no,status=no,width=300,height=200')
message = "<ul><li>First Name:" +
document.mdForm.first_name.value;
message += "<li>Last Name:" +
document.mdForm.the_lastname.value;
message += "<li>Address:" +
document.mdForm.the_address.value;
message += "</ul>";
dispWin.document.write(message);
}
</script>
Heres the HTML:
<body>
<h1>My Form</h1>
<form name="mdForm" method="post" action="">
<fieldset>
<legend>Personal Information</legend>
<p><label class="question" for="first_name">What is your First name?
</label>
<input type="text" id="first_name" name="first_name"
placeholder="Enter your First name."
size="50" required autofocus /></p>
<p><label class="question" for="the_lastname">What is your Last name?
</label>
<input type="text" id="the_lastname" name="the_lastname"
placeholder="Enter your Last name."
size="50" required /></p>
<p><label class="question" for="the_address">What is you address?
</label>
<input type="text" id="the_address" name="the_address"
placeholder="Enter your address."
size="50" required /></p>
<p><label class="question" for="the_email">What is your e-mail address?
</label>
<input type="email" id="the_email" name="the_email"
placeholder="Please use a real one!"
size="50" required /></p>
</fieldset>
<fieldset>
<legend>Personal Choices</legend>
<p><span class="question">Please check all your favorite foods:</span>
</br>
<input type="checkbox" id="food_one" name="some_statements[]"
value="Buffalo Wings" />
<label for="food_one">Buffalo Wings</label><br/>
<input type="checkbox" id="food_two" name="some_statements[]"
value="Enchiladas" />
<label for="food_two">Enchiladas</label><br/>
<input type="checkbox" id="food_three" name="some_statements[]"
value="Hamburgers" />
<label for="food_three">Hamburgers</label><br/>
<input type="checkbox" id="food_four" name="some_statements[]"
value="Spaghetti" />
<label for="food_four">Spaghetti</label></p>
<p><span class="question">Select your favorite online store:</span><br/>
<input type="radio" id="the_amazon" name="online_store"
value="amazon" />
<label for="the_amazon">Amazon</label><br/>
<input type="radio" id="bestbuy_electronics" name="online_store"
value="bestbuy" />
<label for="bestbuy_electronics">BestBuy</label><br/>
<input type="radio" id="frys_electronics" name="online_store"
value="frys" />
<label for="frys_electronics">Frys Electronics</label><br/>
</p>
<p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/>
<select id="my_band" name="my_band" size="4" multiple>
<option value="The Chi-Lites">The Chi-Lites</option>
<option value="Michael Buble">Michael Buble</option>
<option value="Frank Ocean">Frank Ocean</option>
<option value="Labrinth">Labrinth</option>
</select>
</p>
</fieldset>
<div id="buttons">
<input type="submit" value="Click Here to Submit" onclick="display();" />
or
<input type="reset" value="Erase and Start Over" />
</div>
</form>
</body>
Have you prevented the default submit functionality?
Try:
function display(e) {
//To stop the submit
e.preventDefault();
...
Do your Stuff
...
//Continue the submit
FORM.submit();
}
I am developing Universal windows 8.1 app and I have a page for creating new contact.
In purpose to validate input fields I put them in form. My form action not supposed to go to service it just need to validate fields and call custom function.
HTML:
<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
<div>
<label>
First name<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit"/>
<input type="button" value="Cancel"/>
</form>
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
function OnSubmitForm()
{
alert('click');
}
});
My alert is never calls in plain HTML project neither in WinJS app. I also tried with:
<form name="myform" onsubmit="return OnSubmitForm();">
and the same.
Does it a good approach at all, to use form just for input fields validation or there is better way, and why this does not work ?
Inline event-binding expects functions to be under global-scope and that is one of the reason one should not use it!
In your example, OnSubmitForm is under the local scope of DOMContentLoaded handler. Best approach would be to use addEventListener and with the current code, place OnSubmitForm out of DOMContentLoaded.
document.getElementById('myform').addEventListener('submit', function(e) {
e.preventDefault(); //to prevent form submission
alert('click');
});
<form name="myform" id='myform'>
<div>
<label>
First name
<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name
<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit" />
<input type="button" value="Cancel" />
</form>
With current approach:
function OnSubmitForm() {
alert('click');
}
<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
<div>
<label>
First name
<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name
<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit" />
<input type="button" value="Cancel" />
</form>
Have you tried parsley.js?
I created this fiddle to show you a quick example.
<form name="myform">
<div>
<label>
First name<br />
<input id="contactFirstName" data-parsley-required-message="First name required" class="win-textbox" type="text" name="firstName" required data-parsley-trigger="change focusout" data-parsley-pattern="/^[a-zA-Z]*$/"/>
</label>
</div>
<div>
<label>
Last name<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit"/>
<input type="button" value="Cancel"/>
<script src="http://parsleyjs.org/dist/parsley.js"></script>
<script>
window.ParsleyConfig = {
errorsWrapper: '<div></div>',
errorTemplate: '<div class="alert alert-danger parsley" role="alert"></div>',
errorClass: 'has-error',
successClass: 'has-success'
};
</script>
so i have a list of addresses each with edit links and i want to grab the ID of the input within the list item
<li class="last">
<div class="checkout-select-address"><input type="radio" name="checkout_selected_address" id="checkout_selected_address_3" value="" /></div>
<div class="checkout-select-address-details">
<p><label for="checkout_selected_address_3">(Mothers)</label> Edit Address</p>
<input type="hidden" id="checkout_selected_address_3_name" value="" />
<input type="hidden" id="checkout_selected_address_3_title" value="" />
<input type="hidden" id="checkout_selected_address_3_first_name" value="" />
<input type="hidden" id="checkout_selected_address_3_last_name" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_1" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_2" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_3" value="" />
<input type="hidden" id="checkout_selected_address_3_town_city" value="" />
<input type="hidden" id="checkout_selected_address_3_county" value="" />
<input type="hidden" id="checkout_selected_address_3_postcode" value="" />
<input type="hidden" id="checkout_selected_address_3_country" value="" />
</div>
<div class="clear"></div>
so clicking on the link with class "edit-link" it will get the ID for the radio input within the li
Thanks in advance
try this :
$(".edit-link").click(function(){
alert($(this).closest("li").find("input[type=radio]").attr("id"));
});
demo : http://jsfiddle.net/ZABBS/
I would like create registration form based on which country.
default address form is the default visible input
when customer click on the non-uk radio button then automatically hide uk form and oppen non-uk address form
I think I need to use javascript or JQuery for this function.
could any one give me an advice for this function.
if you think my question is not acceptable could you please don't decrease my rate.
I can remove my question if u don't like.
here is my form code
<form action="sent.php" name="form1" method="post">
Name
<input type="text" name="name" />
<br />UK
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />EU
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />Country
<input type="text" name="post_code" />
<br />
</form>
You can wrap all the input elements except the radiobuttons in two different divs so you can catch the change event for the radio buttons and show and hide two divs accordingly.
You can either add a class to represent which elements are UK address elements and which are EU or, as Élodie Petit, answered wrap them in a div and then either show or hide them depending on which radion button was selected.
Here is a JSFiddle using the latter option.
I don't think you need to show or hide the elements necessarily as the form elements seem to be the same on both 'forms', consider :
<form action="sent.php" name="form1" method="post">
Name <input type="text" name="name" /><br/>
UK <input type="radio" name="from" value="UK" > / EU <input type="radio" name="from" value="EU" ><br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</form>
And then when you request the "from" parameter, you'll know which country they're from?
I found simple solution for it with JQuery
With JQuery support
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Here is the javascript code
$(document).ready(function() {
$("input[name$='from']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#c" + test).show();
});
});
</script>
here is the html code suppurated with div
<form action="sent.php" name="form1" method="post">
<label>UK <input type="radio" name="from" value="1" ></label><br />
<label>EU <input type="radio" name="from" value="2" ></label><br />
<div id="c1" class="desc">
Name <input type="text" name="name" /> <br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</div>
<div id="c2" class="desc" style="display:none;">
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
Country <input type="text" name="post_code" /> <br />
</div>
</form>