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>
Related
I am trying to implement a crud application in MVC.NET with React. I am displaying the displaying the Employee table data along with edit/delete links corresponding to each records. On clicking the edit link, I display the form with the corresponding values filled in the text field. But I am not able to alter or edit the values in the text field. Please let me know how to correct it.
Employee table:
Edit Form:
Please find the code below:
const element = <div>
<form name="contactForm" noValidate onSubmit={this.handleSubmit}>
<p>EmployeeID
<br />
<input type="text" value={data.EmployeeID}/></p>
<br /><p>FirstName
<br />
<input type="text" value={data.FirstName} /></p>
<br /><p>LastName
<br />
<input type="text" value={data.LastName} /></p>
<br /><p>Gender
<br />
<input type="text" value={data.Gender} /></p>
<br /><p>Designation
<br />
<input type="text" value={data.Designation} /></p>
<br /><p>Salary
<br />
<input type="number" value={data.Salary} /></p>
<br /><p>City
<br />
<input type="text" value={data.City} /></p>
<br /><p>Country
<br />
<input type="text" value={data.Country} /></p>
<button type="submit">Submit</button>
</form>
</div>;
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>
I want to pass same value on multiple input boxes. At the moment below script only display in one box but want show main box result in all multiple input boxes
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#main').change(function() {
$('#catt1').val($(this).val());
});
});//]]>
Main input box
<input type="text" name="name" id="main" />
Multiple inputs
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
For example for one - http://jsfiddle.net/SDHNY/
http://jsfiddle.net/SDHNY/319/
$('#name').change(function() {
$('input').val($(this).val());
});
id should only be used once per page.
If you want to give multiple items an identifier use class
class="catt1"
from this your code would then change to
$('#name').change(function() {
$('.catt1').val($(this).val());
});
where the '.' before catt1 signifies to jquery that you are looking for classes not id's
DEMO : http://jsfiddle.net/SDHNY/321/
You should not use same id for multiple input. Use class for this types of purposes.You should have different name for each input field if you not get value in the jquery by its id and submit it.
TRY THIS:
Main: <input type="text" name="name_main" id="main" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name1" class="catt1" />
<input type="text" name="name2" class="catt1" />
<input type="text" name="name3" class="catt1" />
<input type="text" name="name4" class="catt1" />
JQUERY:
$('#main').change(function() {
$('.catt1').val($(this).val());
});
Already a few answers are there, here I am trying to provide a solution using pure javascript without any additional plugins like jQuery,etc..
document.getElementById("main").addEventListener("input",function(){
document.querySelectorAll(".catt1").forEach((e) => e.value = this.value);
});
<input type="text" name="name" id="main" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
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>
I need to change the text before the input based on "year" entered on the input field,
and when changing the "Years to Show", disable the unnecessary income/assets fields.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript">
window.onload=function() {
// On "year" change, validate it and cahnge the text befor the input fields.
var year = document.getElementsByName("year");
year.onclick=function() {
this.year0_text.value = year[this.value];
this.year1_text.value = year[this.value]+1;
this.year2_text.value = year[this.value]+2;
}
// and on "years" change, disable the unnecessary income/assets fields.
}
</script>
</head>
<body>
<form name="ar" action="." method="post">
Year:<br />
<input type="number" name="year" value="2011"><br />
<br />
Years to Show:<br />
<input type="radio" name="years" value="0.5">first period (not full year)<br />
<input type="radio" name="years" value="1">1 year<br />
<input type="radio" name="years" value="2">2 years<br />
<input type="radio" name="years" value="3">3 years<br />
<br />
Income:<br />
<span class="year0_text">20XX-0</span> <input type="number" name="year0_income" value="0"><br />
<span class="year1_text">20XX-1</span> <input type="number" name="year1_income" value="0"><br />
<span class="year2_text">20XX-2</span> <input type="number" name="year2_income" value="0"><br />
<br />
Assets:<br />
<span class="year0_text">20XX-0</span> <input type="number" name="year0_assets" value="0"><br />
<span class="year1_text">20XX-1</span> <input type="number" name="year1_assets" value="0"><br />
<span class="year2_text">20XX-2</span> <input type="number" name="year2_assets" value="0"><br />
</form>
</body>
</html>
DEMO - http://jsfiddle.net/92GaE/2/
Whats up rami? (ma kore?)
Just add an event listener, you may want to take a look at this for instance:
Event Listeners