Javascript Document Window - javascript

Why wont my popup window pop up?
My user should enter information for an appointment. Once Submit is hit a document window should pop up. The submit button appears to work. The clear button is working also. I programmed a function to handle the window and set the onSubmit to return the function.
< script type = "text/javascript" >
function popUpWindow() { //window should return user's name in a window
newWin = window.open('', 'NewWin', 'toolbar=no,status=no,width=500,height=200');
newWin.document.write("<body bgcolor='yellow'><h3>Appointment Confirmation</h3>);
newWin.document.write("
Your name is: " + document["
form "].name.value);
newWin.document.close();
}
</script>
<html>
<head>
<title>Project</title>
</head>
//this form should accept user's input
<body>
<form name="form" onSubmit="return popUpWindow();">
Please enter your name:
<input type="text" name="name" value="" size="50" />
</p>
<p>
Address:
<input type="text" name="address" size="50" />
</p>
<p>
Phone:
<input type="text" name="area_code" size="10" />
</p>
<p>
Email:
<input type="text" name="email" value="" size="20" />
</p>
<p>
<legend>Stylist</legend>
</p>
<input type="radio" name="stylist" id="stylist1" value="dream" />Dream
<input type="radio" name="stylist" id="stylist2" value="aubrey" />Aubrey
<input type="radio" name="stylist" id="stylist3" value="stag" />Stag
<input type="radio" name="stylist" id="stylist1" value="halo" />Halo
<p>
<legend>Services</legend>
</p>
<input type="checkbox" name="service" id="service1" value="cut" />Cut
<br/>
<input type="checkbox" name="service" id="service2" value="relaxer" />Relaxer
<br/>
<input type="checkbox" name="service" id="service1" value="weave" />Weave
<br/>
<input type="checkbox" name="service" id="service1" value="braids" />Braids
<br/>
<input type="checkbox" name="service" id="service1" value="wash" />Wash and Style
<br/>
<input type="checkbox" name="service" id="service1" value="natural" />Natural
<br/>
<p>Leave Comments</p>
<textarea name="comments" id="comments" align="left" rows "8" cols "75"></textarea>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</body>
</html>

Related

onclick event doesn't work after form closing tag

The problem is that onclick event button works fine before form starting tag (at the begining of the html document)
but it doesn't work after form closing tag!
I want to know why this happens?
What is the relation between the place of my button and js function call?
<form name="Register" action="#" method="post">
<fieldset>
<legend>Personal Information</legend>
<label>Username</label>
<input type="text" name="username" placeholder="Enter your name">
<br><br>
<label>Password</label>
<input type="password" name="password" placeholder="Enter your password">
<br><br>
<label>Message</label>
<br>
<textarea name="message" rows="8" cols="50" readonly>Your Message (currently disabled)</textarea>
<br><br>
<label>Upload your cv</label>
<input type="file" name="cv">
<br><br>
<label>Remember me</label>
<input type="checkbox" name="remember">
</fieldset>
<br><br>
<fieldset>
<legend>Favourits</legend>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser"> Oprera
<br>
<input type="radio" name="browser"> Chrome
<br>
<input type="radio" name="browser"> Firefox
<br><br>
<label>Choose your Mobile</label>
<br>
<input type="radio" name="mobile"> Samsung
<br>
<input type="radio" name="mobile"> Apple
<br>
<input type="radio" name="mobile"> Nokia
</fieldset>
<br><br>
<fieldset>
<legend>Button Options</legend>
<input type="hidden" value="testing">
<input type="submit" name="submit_Register" value="submit">
<input type="reset" name="" value="reset">
</fieldset
</form>
<input type="button" name="sayHello" value="sayHello" onclick="sayHello()" />
and here's the script
<script>
function sayHello()
{
alert("Hello");
}
</script>
Your button is not working because of invalid closing </fieldset> tag:
</fieldset
function sayHello()
{
alert("Hello");
}
<input type="button" name="sayHello" value="sayHello" onclick="sayHello()" />
<form name="Register" action="#" method="post">
<fieldset>
<legend>Personal Information</legend>
<label>Username</label>
<input type="text" name="username" placeholder="Enter your name">
<br><br>
<label>Password</label>
<input type="password" name="password" placeholder="Enter your password">
<br><br>
<label>Message</label>
<br>
<textarea name="message" rows="8" cols="50" readonly>Your Message (currently disabled)</textarea>
<br><br>
<label>Upload your cv</label>
<input type="file" name="cv">
<br><br>
<label>Remember me</label>
<input type="checkbox" name="remember">
</fieldset>
<br><br>
<fieldset>
<legend>Favourits</legend>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser"> Oprera
<br>
<input type="radio" name="browser"> Chrome
<br>
<input type="radio" name="browser"> Firefox
<br><br>
<label>Choose your Mobile</label>
<br>
<input type="radio" name="mobile"> Samsung
<br>
<input type="radio" name="mobile"> Apple
<br>
<input type="radio" name="mobile"> Nokia
</fieldset>
<br><br>
<fieldset>
<legend>Button Options</legend>
<input type="hidden" value="testing">
<input type="submit" name="submit_Register" value="submit">
<input type="reset" name="" value="reset">
</fieldset>
</form>
<input type="button" name="sayHello" value="sayHello" onclick="sayHello()" />

Not able to select radio button in jquery

I am new. I want the relevant inputs to be activated based on the selection made. Here is my page's HTML
<body>
<form id="add_employer" method="post" action=".">
<input type='hidden' name='csrfmiddlewaretoken' value='UAUPCMpOzGlCfPIZxAFkkhAqVVUxgoVw' />
<p><label for="id_ind_or_company_0">Is employer an individual or company:</label> <ul id="id_ind_or_company"><li><label for="id_ind_or_company_0"><input id="id_ind_or_company_0" name="ind_or_company" type="radio" value="True" /> Individual</label></li>
<li><label for="id_ind_or_company_1"><input id="id_ind_or_company_1" name="ind_or_company" type="radio" value="False" /> Company</label></li></ul></p>
<p><label for="id_emp_family_name">Employer's Family Name:</label> <input id="id_emp_family_name" maxlength="30" name="emp_family_name" type="text" /></p>
<p><label for="id_emp_first_name">Employer'sFirst Name:</label> <input id="id_emp_first_name" maxlength="18" name="emp_first_name" type="text" /></p>
<p><label for="id_emp_middle_name">Employer's Middle Name:</label> <input id="id_emp_middle_name" maxlength="18" name="emp_middle_name" type="text" /></p>
<p><label for="id_emp_coname">Company Name:</label> <input id="id_emp_coname" maxlength="87" name="emp_coname" type="text" /></p>
<input type="submit" value="Add" />
</form>
</body>
and here is my JS
$(document).ready(function(){
$("p:has(input)").hide()
$("[value^='Add']").hide()
//$( "#id_emp_family_name" ).click(function(){ });
});
$("label:contains('Individual')").click(function(){
$("p:has(input)").unhide()
});
Please tell me how to find if one of the radio button has been clicked.The input fields should unhide on clicking but they are not unhiding.
<body>
<form id="add_employer" method="post" action=".">
<input type='hidden' name='csrfmiddlewaretoken' value='UAUPCMpOzGlCfPIZxAFkkhAqVVUxgoVw' />
<p><label for="id_ind_or_company_0">Is employer an individual or company:</label> <ul id="id_ind_or_company"><li><label for="id_ind_or_company_0"><input id="id_ind_or_company_0" name="ind_or_company" type="radio" value="True" /> Individual</label></li>
<li><label for="id_ind_or_company_1"><input id="id_ind_or_company_1" name="ind_or_company" type="radio" value="False" /> Company</label></li></ul></p>
<div id="divIndividual">
<p><label for="id_emp_family_name">Employer's Family Name:</label> <input id="id_emp_family_name" maxlength="30" name="emp_family_name" type="text" /></p>
<p><label for="id_emp_first_name">Employer'sFirst Name:</label> <input id="id_emp_first_name" maxlength="18" name="emp_first_name" type="text" /></p>
<p><label for="id_emp_middle_name">Employer's Middle Name:</label> <input id="id_emp_middle_name" maxlength="18" name="emp_middle_name" type="text" /></p>
</div>
<div id="divCompany">
<p><label for="id_emp_coname">Company Name:</label> <input id="id_emp_coname" maxlength="87" name="emp_coname" type="text" /></p>
</div>
<input type="submit" value="Add" />
</form>
</body>
Javascript
$(document).ready(function(){
$("#divIndividual").hide();
$("#divCompany").hide();
$("[value^='Add']").hide();
//$( "#id_emp_family_name" ).click(function(){ });
});
$("label:contains('Individual')").click(function(){
$("#divIndividual").show();
$("#divCompany").hide();
$("[value^='Add']").show();
});
$("label:contains('Company')").click(function(){
$("#divIndividual").hide();
$("#divCompany").show();
$("[value^='Add']").show();
});
Solution without updating HTML:
$(document).ready(function(){
$("p:has(input)").hide()
$("[value^='Add']").hide()
//$( "#id_emp_family_name" ).click(function(){ });
});
$("label:contains('Individual')").click(function(){
$("p:has(input)").hide()
$("#id_emp_family_name").closest("p").show();
$("#id_emp_first_name").closest("p").show();
$("#id_emp_middle_name").closest("p").show();
$("[value^='Add']").show()
});
$("label:contains('Company')").click(function(){
$("p:has(input)").hide()
$("#id_emp_coname").closest("p").show();
$("[value^='Add']").show()
});

Fiddle works but test page doesn't (missing .ready handler)

I have a problem, I want to show some specific field when i select a specific radio button. I did that and I test on this page (http://jsfiddle.net/niklakis/cw0qLnk5/5/) but when i get the code (which is the below) it does not show the specific fields when I select the radio button.
Can you help me please?
THIS IS THE WHOLE CODE ....
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
$("input[type='radio']").change(function () {
if ($(this).val() == "Doctor") {
$("#DoctorRegister").show();
} else {
$("#DoctorRegister").hide();
}
if ($(this).val() == "Patient") {
$("#PatientGM").show();
$("#PatientGF").show();
$("#PatientAge").show();
$("#SelectDisease").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
}
});</script>
</head>
<body>
<fieldset>
<legend>Registration Form</legend>
<label>First Name
<input type="text" name="fname" required="required" />
</label>
<br/>
<br/>
<label>Last Name
<input type="text" name="lname" required="required" />
</label>
<br />
<br />
<label>Username
<input type="text" name="username" required="required" />
</label>
<br />
<br />
<label>Email
<input type="text" name="email" required="required" />
</label>
<br />
<br />
<label>Password
<input type="text" name="password" required="required" />
</label>
<br/><br/>
User Type:
<br/>
Doctor <input type="radio" name="answer" value="Doctor" />
Patient <input type="radio" name="answer" value="Patient" />
<br/>
<br/>
<input style="display:none;" type="text" name="DoctorRegister" id="DoctorRegister" />
<br/>
<br/>
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="PatientGM" value="male" id="PatientGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="PatientGF" value="male" id="PatientGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label style="display:none;" id="Disease">Disease:</label>
<select style="display:none;" id="SelectDisease">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
</fieldset>
</body>
</html>
You're executing your code before the document is rendered. Either:
Move your code to the end of the document before the closing body tag or
Put your code in a document ready handler in the head like:
$( document ).ready(function() {
// your code here
});
jsFiddle example
$("input[type='radio']").change() will fire for all inputs of type radio button. So, try with:
$("input[type='radio'][name='answer']").change()

Calling a Object Oriented function from jQuery

I am kind of new to JQuery and Javascript and need your help on what I am missing here. I know the code works in jsfiddle.net but when I actually run it on my computer it's not doing anything. I want to keep the Object Oriented functions in "updated-formcheck.js" file separately.
I have a form validation HTML file with a jQuery function that calls my "updated-formcheck.js" file that checks all the empty fields and returns a msg. But when a submit button is clicked, nothing happens. Can you tell me why?
HTML file:
<script src="updated-formcheck.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click(function(e) {
validateNow(e);
});
});
</script>
In "updated-formcheck.js" file:
function validateNow(eventObj){
var isValid = true;
$('input[type="text"].required, textarea.required, select.required').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false) {
eventObj.preventDefault();
alert(this.e);
}else
this.s;
}
Because
$('input[type="text"].required, textarea.required, select.required')
in your code currently return an empty array, so each function is not called.
This is because you are looking for dom elements with a css class "required" that you doesn't have.
To get your code working I added a "required" class, which your js code is looking for, on the city element. I also updated the jQuery bind event to the form submit instead of a button click.
<html>
<head>
</head>
<body>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" class="required" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="updated-formcheck.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myform').on('submit', function(e) {
//e.preventDefault();
validateNow(e);
return false;
});
});
</script>
</body>
</html>

Change Data Based on Radio Button

How do I do this in javascript where when a radio button is selected only certain fields show up to type in?? Please show work (preferably with JSFiddle) :)
<form action="inc/add_p_c_validate.php" method="post">
Professor<input type="radio" name="addType" value="Professor" />
Course<input type="radio" name="addType" value="Course" />
<br><br>Name: <input type="text" name="name" /><br>
Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select>
Email: <input type="text" name="email" /><br>
<input type="submit" name="submit" />
</form>
set onclick event of your radiobuttons to call a function that will check radiobutton status and then will show or hide elements of your form inside specified div elements.
jsfiddle sample
<script language="javascript">
function ChangeForm()
{
if(document.getElementById('Professor').checked)
document.getElementById('fieldset1').style.display = "inline";
else
document.getElementById('fieldset1').style.display = "none";
if(document.getElementById('Course').checked)
document.getElementById('fieldset2').style.display = "inline";
else
document.getElementById('fieldset2').style.display = "none";
}
</script>
<form action="inc/add_p_c_validate.php" method="post">
Professor<input type="radio" name="group1" onclick="ChangeForm()" id="Professor" name="addType" value="Professor" />
Course<input type="radio" name="group1" onclick="ChangeForm()" name="Course" id="Course" value="Course" />
<br><br>
<div id="fieldset1">Name: <input type="text" name="name" /><br>
Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select></div>
<div id="fieldset2">Email: <input type="text" name="email" /><br>
<input type="submit" name="submit" /> </div>
</form>

Categories