clear certain text fields in tabbed form - javascript

I have this tabbed form with four different text fields and two similar submit buttons. The form is used by patrons to login to their library account. A problem arises when someone tries to login using the text fields in one tab, is unsuccessful, and proceeds to login using the text fields in the other tab. When patrons attempt to login both ways, the information from their last unsuccessful attempt is not cleared out. When switching back and forth between the two different login areas, how do I clear user entered information?
function tabSwitch(new_tab, new_content) {
document.getElementById('ldap_login').style.display='none';
document.getElementById('barcode_login').style.display='none';
document.getElementById(new_content).style.display='block';
document.getElementById('ldap_tab').className='';
document.getElementById('barcode_tab').className='';
document.getElementById(new_tab).className='active';
}
<div id=" " class="tabbed_area">
<form name="patform" method="POST">
<ul id="tabs">
<li>Active students, faculty, and staff</li>
<li>Community, alumni, emeriti, and others</li>
</ul>
<div id="ldap_login" class="content">
Clemson Username: <br />
<input type="text" name="extpatid" id="extpatid" value="" size="20" maxlength="40">
Your iRoar, Blackboard, etc., username <br/>
Password:* <br />
<input name="extpatpw" id="extpatpw" type="text" value="" size="20" maxlength="40">
*Passwords cannot contain the special characters < and >. <br /><br />
<input type="image" src="/screens/pat_submit.gif" border="0" name="" value="submit">
</div>
<div id="barcode_login" class="content">
Last Name: <br />
<input type="text" name="name" id="name" value="" size="20" maxlength="40">
For example, type "Smith." <br />
Barcode: <br />
<input name="code" id="code" type="text" value="" size="20" maxlength="40">
Type the letter plus 10 digit number located on the back of your TigerOne ID card (or 9 digit number plus "1" for old library cards).<br /><br />
<input type="image" src="/screens/pat_submit.gif" border="0" name="" value="submit">
</div>
</form>
</div>

Wrap your 2 tabs into their own forms. That way the submits will only take the inputs from their respective tabs and ignore whatever is on the other tab.
<div id="ldap_login" class="content">
<form>
Clemson Username: <br />
<input type="text" name="extpatid" id="extpatid" value="" size="20" maxlength="40">
Your iRoar, Blackboard, etc., username <br/>
Password:* <br />
<input name="extpatpw" id="extpatpw" type="text" value="" size="20" maxlength="40">
*Passwords cannot contain the special characters < and >. <br /><br />
<input type="image" src="/screens/pat_submit.gif" border="0" name="" value="submit">
</form>
</div>
Etc..

Related

Not able to update the values in text box in forms implemented using MVC.NET with React

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>;

Submitting Form in a popup window

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();
}

Dynamic validation of forms javascript

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>

radio button hide and show form content

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>

javascript query string for multiple buttons

Hi I am trying to create a query string similar to the one available here:
http://andrewu.co.uk/tools/request/examples/example1.html
The problem that I am having is that I have more than one button on my page and even though my id's are unique all of my data is displaying on the action page at the same time. The code that i am using for my buttons is:
<label for="name_1">Name:</label>
<input type="text" name="name" id="name_1" tabindex="1" size="40" value="Donald Duck" />
<br />
<br />
<input type="submit" id='view1' value="Submit" tabindex="2" />
<label for="name_1">Name:</label>
<input type="text" name="name" id="name_2" tabindex="1" size="40" value="Mickey Mouse" />
<br />
<br />
<input type="submit" id='view2' value="View" tabindex="2" />
I have a lot more than 2 buttons on my page. when a button is clicked I would like to see a result like what is on this page:
http://andrewu.co.uk/tools/request/examples/example1_process.html?name=Andrew+Urquhart
but instead I am getting Name: Donald Duck, Name: Mickey Mouse. What would I have to add or change to obtain just one Name to display at a time but have it be different depending on which button is pressed?
The button is simply submitting the form it is contained in. It's not tied to any particular field.
If you only want one name/value pair to be sent to the server, you'll need separate form elements:
<form id="name_1_form">
<input name="name" value="Andrew" />
<button>Submit</button>
</form>
<form id="name_2_form">
<input name="name" value="Mickey" />
<button>Submit</button>
</form>
the problem with your form is that both inputs have name="name"
and when you submit the form both are send.
you can either:
use different names for you input and select the correct one based on the pressed button, or
use 2 forms, one for each button
use javascript to send the correct data (this can help: http://api.jquery.com/serialize/, http://api.jquery.com/submit/)
<input type="submit" id='view1' name="Name" value="Mickey Mouse" tabindex="2" />
<input type="submit" id='view2' name="Name" value="Donald Duck" tabindex="2" />
or
<input type="text" name="name_1" id="name_1" tabindex="1" size="40" value="Donald Duck" />
<input type="submit" id='view1' name="Name" value="Submit" onClick="this.name=this.form.name_1.value" tabindex="2" />
<input type="text" name="name_2" id="name_2" tabindex="1" size="40" value="Mickey Mouse" />
<input type="submit" id='view2' name="Name" value="View" onClick="this.value=this.form.name_2.value" tabindex="2" />
you can disable the input if you do not want to send the name it twice

Categories

Resources