Develop Reference

how can I use JS to Remove a tag off when a Option is selected in a HTML form?

I'm creating an artist's site. There is a contact form on the site, and I am trying to create a JS script to remove the hidden class I put on the commission rules, so it can be visible when the Commission option is selected on the form. I'm new to JS, but From the documentation I've read HTMLOptionElement type seems to be the best way to do this in vanilla JS. Here is the form, and my approximations of trying to remove the element:
<form action="action_page.php" id="contactform" method="post" action="FormToEmail.php">
<input name="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" type="text" class="feedback-input" placeholder="Email" />
<select id="reason" name="contact-reason">
<option value="None" selected disabled hidden>Reason for contact</option>
<option value="Brand">Brand</option>
<option id="Comission"value="Comission">Commission</option>
<option value="Other">Other</option>
</select>
<a class="invis hidden center" href=""> Commission rules</a>
<textarea name="contact-message" class="feedback-input" placeholder="Comment"> </textarea>
<input type="submit" class="button form-buttion" value="SUBMIT"/>
</form>
I've also tried selecting by ID, by tags, and other selectors. The JS is here.
var action = document.HTMLOptionElement("Commission")
if(action == true){
element.classList.remove("invis");
}

document.HTMLOptionElement is not a function. The correct way to check if an option is selected is:
document.getElementById('reason').value === "Commision";
You can also remove the id from the option element.
So:
if(document.getElementById('reason').value === "Commision"){
element.classList.remove("invis");
}

Django/JQuery: can't stop Django form submission with JQuery (preventDefault(), etc. not working)

I'm trying to do some simple client-side validation because my form is really simple and just needs to know if all of its fields have been filled out.
Here is the relevant part of the template:
{% block content %}
<form id="location_form" action="{% url "mountain_results" %}" method="GET">
<h2>Enter your location</h2>
<input id="location_autocomplete" placeholder="Enter your address" name="address"
onFocus="geoLocate()" type="text"></input>
<h2>Enter your maximum drive time</h2>
<input name="drive_time"
placeholder="Enter your maximum drive time (hours)" type="text"></input>
<h2>Are you shredding today or tomorrow?</h2>
<select name="shred_day">
<option value="today">Today</option>
<option value="tomorrow">Tomorrow</option>
</select>
<br>
<button type="submit">Find me snow</button>
</form>
{% endblock content %}
Here is the relevant part of the JS:
$('#location_form').on('submit', function(event) {
alert('dude you totally clicked');
event.preventDefault();
return false;
});
Interestingly, the alert doesn't even fire, so it feels like the event handler isn't even being triggered. Any thoughts? As you can see, I tried both commonly used methods of preventing the default event from firing to no avail.

You can use onsubmit event handler to validate the form.I have kep the action attribute empty for demo. You can add it along with onsubmit. Also is there any specific reason to for GET method.
Here is a snippet.
HTML
<form id="location_form" action="" method="POST" onsubmit="return _validateForm()">
<h2>Enter your location</h2>
<input id="location_autocomplete" placeholder="Enter your address" name="address"
onFocus="geoLocate()" type="text"></input>
<h2>Enter your maximum drive time</h2>
<input name="drive_time"
placeholder="Enter your maximum drive time (hours)" type="text"></input>
<h2>Are you shredding today or tomorrow?</h2>
<select name="shred_day">
<option value="today">Today</option>
<option value="tomorrow">Tomorrow</option>
</select>
<br>
<button type="submit">Find me snow</button>
</form>
JS
function _validateForm(){
alert('dude you totally clicked');
}
Here is a DEMO.Hope this will be helpful

Here is the another approach. Change
<button type="submit">Find me snow</button>
With
<button id="submit_form">Find me snow</button>
and add following JavaScript code
$('#submit_form').click(function(){
if(for_is_valid()){
$('#location_form').submit();
}
else{
alert('Your message');
}
});
Hope this will work.

Form won't submit when showing certain fields

I am trying to create a drop down menu that allows a user to select which area they would like to login to. Currently, the drop down feature works and hides whichever areas the user is not logging into and shows only the area that they have selected. Using just the form without the dropdown works great and opens a new window while also logging the user in to the system.
However, when I add the dropdown menu and surround the form in tags, it allows me to enter the data but does not process the data.
If possible I would also like to have the form open a new tab in the current browser window(not in a completely new window).
-I cannot change the forms at all besides things that won't matter because they have been given to me from an external source.
Here is my code:
$(document).ready(function() {
toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
//this will call our toggleFields function every time the selection value of our repository field changes
$("#member").change(function() {
toggleFields();
});
});
//this toggles the visibility of the 3 different forms depending on which repository the user is logging into.
function toggleFields() {
if ($("#member").val() == 1)
$("#depo").show();
else
$("#depo").hide();
if ($("#member").val() == 2)
$("#records").show();
else
$("#records").hide();
if ($("#member").val() == 3)
$("#reporter").show();
else
$("#reporter").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="member" name="member">
<option value="0">---</option>
<option value="1">Deposition Repository</option>
<option value="2">Records Repository</option>
<option value="3">Reporter Area</option>
</select>
<div id="depo">
<p>Login to Access your Deposition Repository</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/rbweb/attorney/WC_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=30>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="records">
<p>Login to Access your Records Repository.</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/mrweb8/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/mrweb8/WC_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="reporter">
<p>Login to the Reporter Area.</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebreporter" method="post" action="http://clients.texasdepos.com/rbweb/reporter/WR_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebreporter,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebreporter,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
Any help will be greatly appreciated!

There's a few problems with your code that can each individually cause issues like this.
The fact that you have duplicate names and ids are your primary issues. I.e. you have 3 forms named frmrbwebattorney and all your submit buttons are id'ed btnptarbweb. When you call document.frmrbwebattorney, it is likely getting the wrong form.
Simple solution: replace your <input type="button" ...> with <input type="submit" ...> and remove the onclick from them. Thus your buttons will look like:
<input type="button"
value="Log In"
style="font-size:11px; width:64px"
id="something-unique"
name="btnptarbweb" />
Also note: you can't have multiple style attributes. I combined them into one.

Instead of the onclick attribute with the javascript code change the button type to submit. That will work.

Form post Send data to another page , verify and then post

I have a form with ,
In the form after user clicks on Submit , he will be taken to another page which would show all the data entered, Which would allow the user to verify the content.(User will have a look at the content , to see what he entered is correct).
Once user verifies he would submit the data and Insert to DB should be done.
I want to know a method in which i could carry on the approach, to do this.
How can i implement this
EDIT MORE EXPLAIN
addemp.php
The Main Div With Form
<div class="panel-body">
<form>
Employee : <input Type="text" id="name">
<input type="submit" value="check">
</div>
The Second Div in the same form should show once submit is clicked
<div class="submit panel-body">
<form>
Employee : <Employee Name asin main div>
<input type="submit" > <--! this submit would post data
</form>
</div>
how to pass the value from 1st div to the second , and from the second INSERT to db.how can i do without page refresh ?

Use following script on location file
$action='';
if(isset($_POST['submit'])){
//create form here
//Change the action of form
$action = 'save.php';
}
echo '<form method="POST" action="'.$action.'">
<input type="text" name="nric" value="'.isset($_POST['nric'])?$_POST['nric'].'" />
<input type="text" name="empName" value="'.isset($_POST['empName'])?$_POST['empName'].'" />
<input type="text" name="location" value="'.isset($_POST['location'])?$_POST['location'].'" />
<input type="submit" value="Submit"/>
</form>';

EDIT: You don't need to use a form in this case. You can simply use JQuery to show the data from text boxes in a DIV and a button that will POST the data for you on the server.
<input type="text" name="nric" id="nric" />
<input type="text" name="empName" id="empName" />
<input type="text" name="location" id="location" />
<input id="sndData" type="button" value="Submit" />
<div id="showData"></div>
JQuery:
$('#sndData').click(function(){
var makeData = "<p>NRIC: "+$('#nric').val()+"</p><p>Employee Name: "+$('#empName').val()+"</p><p>Location: "+$('#location').val()+"</p>";
$('#showData').html(makeData);
});
When you've done that, just create/show a HTML button that will POST the data for you.
If this answers your question, please mark it as an answer.

Blur Function Not working In Firefox

I have a problem with jQuery Blur Function
I code it like this:
<head>
<script src="_js/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#l').blur(function(){
if($(this).val()=='')
alert('Invalid');
});
});
</script>
</head>
I am using this to identify if the input field is empty or not. If I run this code then if I leave it empty and click somewhere else, the Blur function is not called and no alert is generated
I am using Firefox 10.1 to run the code
HTML:
<form method="post" action="Login.php" id="Log">
<select id="Login" name="Type">
<option value="Sel" selected="selected">Select Login type</option>
<option value="Student">Student</option>
<option value="Faculity">Faculity</option>
</select>
<div id="type">
<p id="Ch">Group Id: <input id="l" name="log" type="text"/></p>
<p id="Pass">Password: <input id="p" name="Pass" type="password" /></p>
<input id="Cond" type="Text" />
<input type="submit" value="Login" />
</div>
<p id="Invalid" style="padding-top:.75em; color:#FF0000;">Login Field Empty </p>
</form>
The content of code changes through selection and code is this
The Group id And Password Are Hidden At The Beginning And Changes When The Option Is Selected In Below Code
$('#Login').change(function() {
if($(this).val()=='Sel')
$('#type').hide();
else if($(this).val()=='Student')
{
$('#Ch').html('<p id="Ch">Group Id: <input id="l" name=" log" type="text" /></p>')
$('#type').show(10);
}
else
{
$('#Ch').html('<p id="Ch">Faculity Id: <input id="l" name="log" type="text" /></p>')
$('#type').show(10);
}
});
I Think It Is Causing Problem Kindly Check And Tell Me What's It Alternative If It Causes Some Problem Or I Am Doing It Wrong??

$('#input') the # is for ID selector, try the $('input') tag name selector.

Unless your input has an ID of "input", you should be referencing your input as $('input'). This will create a jQuery object with all the elements of type "input".

In your post, you have this chunk of JavaScript code:
$('#Login').change(function() {
if($(this).val()=='Sel')
$('#type').hide();
else if($(this).val()=='Student')
{
$('#Ch').html('<p id="Ch">Group Id: <input id="l" name=" log" type="text" /></p>')
$('#type').show(10);
}
else
{
$('#Ch').html('<p id="Ch">Faculity Id: <input id="l" name="log" type="text" /></p>')
$('#type').show(10);
}
Can I ask where this code is placed within the page? There may be an issue with the order of execution.