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

Why is my javascript window.opener.location.reload reloading a different URL?

OK, so I have a form, which allows a user to make a booking on an event as follows:
<h3>Booking Form</h3>
<p><form method="post" action="/heroes-and-heroines-larp-and-lrp-events.php?task=submitBooking" class="bookingForm">
<label for="role">Booking:</label>
<select name="role" id="role">
<option value="Player">Play</option>
<option value="Monster">Monster</option>
<option value="MIA">Unable to Attend</option>
<option value="Referee">Referee</option>
</select><br />
<div id="AttendeeName"><label for="bookingName">Attendee Name:</label><select name="bookingName" id="listedBookingName">
<option value="1">3rd spearman</option>
<option value="2">4th spearman</option>
</select></div>
<div id="CharacterName"><label for="characterName">Character Name:</label><select name="CharacterName" id="listedCharacterName">
<option value="1">Jack Dawkins</option>
<option value="2">Reverand Blighty Shrewson</option>
<option value="3">Sydion</option>
**</select><button class="button" onClick="window.open('http://www.heroesandheroines.org/index.php?task=siteForm', '', 'width=500, height=500');"><span class="formButton">create a new character</span>**</button></div>
<div id="telephoneNumber"><label for="telephone">Telephone Number:</label>
<input required type="tel" id="telephone" name="telephone" value="0123456789" /></div>
<div id="emailAddress"><label for="email">E-mail Address:</label>
<input required type="email" id="email" name="email" value="madeup#email.com" /></div>
<div id="notes"><label for="notes">Notes:</label>
<textarea id="notes" name="notes" rows="4" cols="50" placeholder="notes" /></textarea>
</div><input type="hidden" name="returnPage" value="http://heroesandheroines.org/heroes-and-heroines-larp-and-lrp-events/124_tbc.html" />
<input type="hidden" name="dungeonid" value="124" />
<input type="submit" name="submit Booking" value="Submit Booking" />
CANCEL</p>
</form>
The button <button class="button" onClick="window.open('http://www.heroesandheroines.org/index.php?task=siteForm', '', 'width=500, height=500');"> fires open a new window, which allows a user to create a a new character for use on the event.
The new window has the folowing javascript:
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload()
}
</script>
Now, it's a work in progress, but what I WANT is for the child window to refresh the parent window, HOWEVER, the child window doesn't refresh the original content of the parent window (http://heroesandheroines.org/heroes-and-heroines-larp-and-lrp-events.php?task=bookingForm&eventID=124)... It loads http://heroesandheroines.org/heroes-and-heroines-larp-and-lrp-events.php?task=submitBooking which is the target of the form... How do I get the parent window to refresh its URL rather than the form submit URL?
Also, I'm quite confused as to WHY it's behaving like this... surely window.opener.location.reload SHOULD simply refresh the page from the request URI or something?

A <button> has a type attribute, which defaults to submit. IE when you click your button, as well as opening the new window, it's also submitting the form in the background, which is updating your URL. Add in the type attribute to your button, and specify it as button - this will stop the form from submitting in the background:
<button type="button" class="button" onClick="window.open('http://www.heroesandheroines.org/index.php?task=siteForm', '', 'width=500, height=500');">

Changing 2 hidden input fields on select

I have a form that is need to be passed to my CRM.
the form is simple and contains 2 important fields that defines under what category the data will be received in my crm.
<form method="post" action="http://api.leadmanager.co.il/v1/submit" id="lm_form">
<input type="hidden" name="lm_form" value="5750" />
<input type="hidden" name="lm_key" value="cc0ce4fe280e46e986e5716f9feedaab" />
<input type="hidden" name="lm_tyt" value="" />
<input type="submit" value="submit"/>
</form>
I want to add a drop down list with 2 options first will send the form i mentiond above as is.
the second will modify the values of "lm_key" and "lm_form" to other values.

Plain JS code can be like this. But I would advice you to use some JS library like JQuery, AngulerJS or another one.
<form method="post" action="http://api.leadmanager.co.il/v1/submit" id="lm_form" name="form">
<input type="hidden" name="lm_form" value="5750" />
<input type="hidden" name="lm_key" value="cc0ce4fe280e46e986e5716f9feedaab" />
<input type="hidden" name="lm_tyt" value="" />
<select name="selectField" onchange="changeValues()">
<option value="1">1</value>
<option value="2">2</value>
</select>
<input type="submit" value="submit"/>
</form>
<script>
function changeValues() {
form.lm_key.value = form.selectField.value;
form.lm_form.value = form.selectField.value;
}
</script>

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.

how to get the value by javascript?

HTML:
I want to pass the value from the gsearch to the q parameter. The following is the ways I make but it couldn't work. How should I do it?
action="http://test.com/search.php?q=<script type="text/javascript">document.getElementById('gsearch').value;</script>">
updated:
in my site. i want to make a google custom search: so i put the following code in the homepage. 0156290304977:8texhu0mrk the google search value. gsearch.php page which i put the google custom search code in and show the searched result
<form method="get" action="http://test.com/gsearch.php?cx=0156290304977:8texhu0mrk&cof=FORID:11&ie=UTF-8&q=..." >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>
now, i want to when the user input the searched text in the gsearch text box, if he click the submit button,. then on the gsearch.php page shows the searched result.

if you want to submit to this: http://test.com/search.php?q=theinput
just do this:
<form target="_top" method="get" action="http://www.cnn.com/search.php" >
<input type="text" title="" value="theinput" name="q" class="search-input" id="gsearch" />
<input type="submit" value="submit" id="search-button"/>
</form>
the entire idea behind the <form> element is that it is making sure that all of the inputs from the user will be sent to the action.
the form will take the input from the q and add it to the action automatically.
so in your simple case. no manipulation is required.
Test it here
http://jsfiddle.net/L4rHG/1/
this will be submitted to http://edition.cnn.com/search.php?q=theinput

Or you need over javascritpt
<script>
function SubmitForm(){
window.open("http://test.com/search.php?q="+document.getElementById('gsearch').value)
return false;
}
</script>
<form method="get" action="http://test.com/search.php" onSubmit="SubmitForm();false" >
<input type="text" title="" value="" name="q" class="search-input" id="gsearch" />
<input type="submit" value="" name="sa" id="search-button"/>
</form>

<form action="http://test.com/search.php?q=">
<script>
document.forms[0].action += 'new_action.html';
</script>