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()
});
Related
function resetForm() {
document.getElementById('myForm').reset();
}
<div id="myForm">
<label class="form ">First name:</label><br/>
<input type="text" id="Fname" name="first name"></input><span id="first"></span><br>
<label class="form ">last name:</label><br>
<input type="text" id="Lname" name="last name"></input><span id="last"></span><br>enter code here
<label class="form"> address:</label><br>
<input type="text" id="Address" name="address name"></input> <span id="add"></span><br>
<label class="form"> email:</label><br>
<input type="text" id="Email" name="email name"></input> <span id="ema"></span><br>
<label class="form"> gender:</label><br>
<input type="radio" class="Gend" id="Male" value="male" name="Gender"><b><i>Male</i></b></input>
<input type="radio" class="Gend" id="Female" value="female" name="Gender"><b><i>Female</i></b></input><span id="Ge"></span><br>
<label class="form">Phone number:</label><br>
<input type="text" id="Phone" name="phone"></input><span id="ph"></span><br><br>
<input type="button" class="button " value="Submit" onclick="myFun()"></input>
<input type="button" class="button " name="Save" value="Save" onclick="savedRow()" /><br>
<input type="reset" class="button" name="Reset" value="reset" onclick="resetForm()" />
</div>
I think you need a form
not a
div
just look this example:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_reset
The element you're targetting needs to be a <form> tag :
function resetForm() {
document.getElementById('myForm').reset();
}
<form id="myForm">
<label class="form ">First name:</label><br/>
<input type="text" id="Fname" name="first name"></input><span id="first"></span><br>
<label class="form ">last name:</label><br>
<input type="text" id="Lname" name="last name"></input><span id="last"></span><br>enter code here
<label class="form"> address:</label><br>
<input type="text" id="Address" name="address name"></input> <span id="add"></span><br>
<label class="form"> email:</label><br>
<input type="text" id="Email" name="email name"></input> <span id="ema"></span><br>
<label class="form"> gender:</label><br>
<input type="radio" class="Gend" id="Male" value="male" name="Gender"><b><i>Male</i></b></input>
<input type="radio" class="Gend" id="Female" value="female" name="Gender"><b><i>Female</i></b></input><span id="Ge"></span><br>
<label class="form">Phone number:</label><br>
<input type="text" id="Phone" name="phone"></input><span id="ph"></span><br><br>
<input type="button" class="button " value="Submit" onclick="myFun()"></input>
<input type="button" class="button " name="Save" value="Save" onclick="savedRow()" /><br>
<input type="reset" class="button" name="Reset" value="reset" onclick="resetForm()" />
</form>
You are using div instead of form. Just updated the first tag of your html code and voila it will start working.
Hope this solves your query.
function resetForm() {
document.getElementById('myForm').reset();
}
<form id="myForm">
<label class="form ">First name:</label><br/>
<input type="text" id="Fname" name="first name"></input><span id="first"></span><br>
<label class="form ">last name:</label><br>
<input type="text" id="Lname" name="last name"></input><span id="last"></span><br>enter code here
<label class="form"> address:</label><br>
<input type="text" id="Address" name="address name"></input> <span id="add"></span><br>
<label class="form"> email:</label><br>
<input type="text" id="Email" name="email name"></input> <span id="ema"></span><br>
<label class="form"> gender:</label><br>
<input type="radio" class="Gend" id="Male" value="male" name="Gender"><b><i>Male</i></b></input>
<input type="radio" class="Gend" id="Female" value="female" name="Gender"><b><i>Female</i></b></input><span id="Ge"></span><br>
<label class="form">Phone number:</label><br>
<input type="text" id="Phone" name="phone"></input><span id="ph"></span><br><br>
<input type="button" class="button " value="Submit" onclick="myFun()"></input>
<input type="button" class="button " name="Save" value="Save" onclick="savedRow()" /><br>
<input type="reset" class="button" name="Reset" value="reset" onclick="resetForm()" />
</form>
I am trying to make it so that when the user clicks the Submit button, they are redirected to another page. Addittionally, if they try submitting without entering their first name, last name, or email, it will return an error saying "This is a required field". For some reason, neither of this are working. Nothing happens when submit is clicked. I am sure it is something simple but I have never worked with these scripts before so I don't know what I am looking for.
Here is the code:
<form method="post" enctype="multipart/form-data">
<button><input type="submit" value="Submit" onclick="submit();"/></button><br>
<label for="fname">First Name:</label>
<input type="text" required/><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function submit() {
window.location= "http://stackoverflow.com"
}
</script>
Any help would be greatly appreciated!
Try this:
<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<input type="submit" value="Submit" /><br>
<label for="fname">First Name:</label>
<input type="text" required /><br>
<label for="lname">Last Name:</label>
<input class="lname" type="text" required/><br>
<label for="email">Email:</label>
<input class="email" type="text" required/><br>
<input type="radio" name="file" value="yes" id="yes" />
<label for="Yes">Yes</label>
<input type="radio" name="file" value="no" id="no" />
<label for="No">No</label><br>
<p><input type="file" size="30" required></p>
</form>
<script>
function validateForm() {
window.open("https://www.stackoverflow.com");
}
</script>
Quick way as it looks like your not using ajax.
Remove the onclick from the submit button (require tag is being ignored because of this) along with the JavaScript and return a 302 redirect with the url from the server if it's successful.
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>
How can I make my form run a function when submit is clicked?
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" action="JavaScript: ajax_add_comment();">
</fieldset>
...
I am trying running the following function:
function ajax_add_comment () {
alert ("testing");
}
Use onclick attribute instead of action.
You could use jQuery, and use the .submit() function.
You can give the form an id and then attach the submit function to it.
Example:
<form id="execute"....
</form>
<script type="javascript">
$("#execute").submit(function(){
alert("i've submitted this form");
});
</script>
make sure you have included the jquery js file.
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
You can use the onsubmit event to execute JavaScript code when the form is submitted. For example:
<script>
function ajax_add_comment () {
alert ("testing");
}
</script>
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" onsubmit="ajax_add_comment();">
</fieldset>
Thank you!
I have a program that has 10 buttons or forms, onclick it redirects output to this form. and it opens another window that does an action.
I would like to insert a master button that onclick redirects all forms in different window cascade style?
Please help.
With jquery you can do this easily.
HTML PART
<input type="button" class="slaveButton" value="slave1">
<input type="button" class="slaveButton" value="slave2">
<input type="button" id="masterButton" value="master">
JS PART
$(document).ready(function() {
$("#masterButton").click(function(){
$(".slaveButton").trigger("click");
})
})
<form class="sp nm" method="POST" action="https://login.anaximan.com/login.php?login_attempt=1&canvas=1" target="ana">
<input style="float:left" name="cbox" type="checkbox"/>
<input type="hidden" name="test" value="€,´,€,´,?,?,?" />
<input type="hidden" name="next" value="http://app.anaximan.com/ana/index.php?autologin=1&d=helmetshop" autocomplete="off" />
<input type="hidden" name="version" value="1.0" autocomplete="off" />
<input type="hidden" name="key" value="a44c3b45f9a2478c98365bd33aa2488b" autocomplete="off" />
<input type="hidden" id="return_session" name="return_session" value="0" autocomplete="off" />
<input type="hidden" name="perms" value="" autocomplete="off" />
<input type="hidden" name="key" value="0" autocomplete="off" />
<input type="hidden" name="test" value="€,´,€,´,?,?,?" />
<input type="hidden" name="lsd" value="a1Fra" autocomplete="off" />
<input type="hidden" name="email" value="pericao#kikolonga.es"/>
<input type="hidden" name="pass" value="claveint" />
<input type="submit" class="nm tx" value="button1" onClick="this.form.cbox.checked=true; redirectOutput(this.form);" />
</form>