We Keep Coding

Redirect on submit based on search query and location

I am trying to add a search feature based on a text input and a drop-down.
So I am trying to make it work with the following form fields:
Text input {text_1}
Drop-down (2 options)
Submit button
If first option is selected in the drop-down the form should be submitted to https://url1/?={text_1}, if second option is selected it should be submitted to https://url2/?={text_1}.
I have written so far:
<form>
<input type="text" id="text_1" name="text_1" value="test" data-alias="" class="form-control">
<select id="selectlist_1" name="selectlist_1" data-alias="" class="form-control">
<option value="option_1" >Option_1</option>
<option value="option_2" >Option_2</option>
</select>
<button type="submit" id="button_1" name="button_1" class="btn btn-primary" >Submit</button>
</form>
Otherwise, there is also this example: https://hii.com/careers/

I give you an example:
<script>
function go(v){
if (v.url.value===1){
v.action="http://www.google.com"
}else {
v.action="http://www.apple.com"
}
}
</script>
<form onsubmit="go(this)">
<input type="text" name="text_1" value="txt">
<select name="url">
<option value="1">Google</option>
<option value="2">Apple</option>
</select>
<input type="submit" value="submit">
</form>

Augment a simple form with the controls you want, with a script that sets up a behaviour where the form's action attribute value changes with the selection in the drop-down control:
<form>
<input name="foobar" />
<select name="fruit">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
</select>
<script>
(script => {
const fruit_control = script.closest("form").elements.fruit;
fruit_control.addEventListener("change", ev => {
ev.target.form.action = ({
"apples": "https://url_1",
"oranges": "https://url_2"
})[ev.target.value];
});
})(document.currentScript);
</script>
</form>
The value of the text input control will be sent with the query string, i.e. as ?foobar=... at the end of the URL, as the form is submitted, to the URL that's correspondent with the option selected in the drop-down.
Whether you have a submit button at the end of the form, or not, makes no difference to the behaviour of the form because a form may be submitted even without a submit button.

I found a working solution after doing some searches.
Here is solution in case anyone need it.
jQuery('#search_page_form').submit(function() {
// get all the inputs into an array.
var stext = jQuery('#search_page_form #looking-for').val();
var cars = jQuery('#search_page_form #cars').val();
var url = '';
if(cars == 'nns'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext;
}else if(cars == 'mt'){
var url = 'https://tsd-careers.hii.com/en-US/search?keywords='+stext;
}else if(cars == 'is'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext+'&locationsearch=Pascagoula%2C+MS&geolocation=';
}else if(cars == 'ch'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext+'&locationsearch=Newport+News%2C+VA&geolocation=';
}
if(url != ''){
window.open(url, '_blank');
}else{
alert('Please select Division');
}
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="search_page_form" onsubmit="return false;">
<div class="form-group">
<label for="looking-for">What are you looking for ?</label>
<input type="text" id="looking-for" name="looking-for" class="form-control" placeholder="Enter keywords....">
</div>
<div class="form-group">
<select id="cars" name="cars" class="form-control nice-select">
<option selected="" value="">Division</option>
<option value="nns">NEWPORT NEWS SHIPBUILDING</option>
<option value="mt">MISSION TECHNOLOGIES</option>
<option value="is">INGALLS SHIPBUILDING</option>
<option value="ch">CORPORATE HEADQUARTERS</option>
</select>
</div>
<div class="form-group">
<input type="submit" value="SEARCH" class="btn white-btn search_btn">
</div>
</form>

Change disabled value in HTML document, if option element have specific value

I want if test2 is selected from <option> then disable all element inputs by via id element1. I try with if but dosnt work for me
function myFunction() {
if (document.getElementById("element0").value = "test2") {
document.getElementById("element1").disabled = true;
} else {
document.getElementById("element1").disabled = !0;
}
}
<select name="" id="element0">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
<div id="element1">
<label for="your-name">Name: </label>
<input type="text" name="your-name" id="" />
</div>

Generally, you should have better naming for your fields and elements. Element0 does not accurately describe what it is or does. I chose a simple name here, but please think of a better name yourself.
The function itself can be simplified. You can assign constants for the element references so that you can reuse some code. It is more readable like this and you don't have to search twice for the same element (with .getElementById).
The disabled attribute can be the outcome of the expression, since it correlates.
function myFunction() {
const dropdown = document.getElementById('dropdown');
const name = document.getElementById('name');
name.disabled = dropdown.value === 'test2';
}
<meta name="color-scheme" content="dark light" />
<body onload="myFunction()" oninput="myFunction()" style="zoom: 225%">
<select name="dropdown" id="dropdown">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
<div>
<label for="name">Name: </label>
<input type="text" name="name" id="name" />
</div>
</body>

First, the comparison operator should be "===", not "=". Secondly, you should disable the input element, not the whole div(obviously, you can't do so). So, I added the id in input. Thirdly, !0 also means true so I changed it to false
function myFunction() {
if (document.getElementById("element0").value === "test2") {
document.getElementById("element1").disabled = true;
} else {
document.getElementById("element1").disabled = false;
}
}
<select id="element0" onchange="myFunction()">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
<div>
<label for="your-name">Name: </label>
<input type="text" name="your-name" id="element1" />
</div>

So you have a couple of issues with your code.
First in your if clause you are making an assignment instead of a comparison:
= is only for assignments like: let i = 0 and == or === are used for comparison, being the latter the most used one because is does not make type inference.
Next you are disabling a div and not an input. So here's a rapid overview of my changes to your code:
<select name="myOption" id="element0">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
<div id="element1">
<label for="your-name">Name: </label>
<input id="inputElement1" type="text" name="your-name" id="" />
</div>
</body>
function myFunction() {
if (document.getElementById("element0").value === "test2" ) {
document.getElementById("inputElement1").disabled=true;
} else {
document.getElementById("inputElement1").disabled=false;
}
}
Edit: Also changed from !0 to false on the else clause because !0 is true and probably not what you want.

Select option change the text of a Textarea with JavaScript

I need help. I have this form:
<form name="user_cause" method="post">
<div class="form-group">
<select id="subject" required="required" class="form-control" onchange="showHide()">
<option value="subject">Subject</option>
<option value="test_1">Test_1</option>
<option value="test_2">Test_2</option>
</select>
</div>
<div class="form-group">
<textarea id="subject_message" required="required"
class="form-control" rows="5" disabled>
</textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
I wish I could change the text in the disabled textarea according to the choice. how to do it with javascript?

var ourArea = document.getElementById('subject_message');
var selectSubject = document.getElementById('subject');
ourArea.textContent = selectSubject.value; // omit this if you don't want initial value to be reflected in the text area
function showHide(){
ourArea.textContent = selectSubject.value;
}

Using jQuery, $("#subject").change(function(e) { $("#subject_message").val($(this).val())});

A jQuery way:
$("#subject").change (function() {
$("#subject_message").text($("#subject option:selected").text();
});

Changing number of text fields, depending on drop down list choice

I'm trying to show two test fields after choosing "id" from drop down list. It's set on hidden and im trying to make it visible when "id" is selected. Unfortunately it's not working. Please help!
<form>
<input class="hidden" type="text" id="textField2">
<input type="text" id="textField">
<select id="select" name="selectData">
<option value="firstName">Name</option>
<option value="id">Id</option>
</select>
<input id="filter" type="button" value="Filter">
<script>
var temp = document.getElementById("textField2").value;
if(document.getElementById("select")[0].value === "id"){
temp.style.visibility = "visible";
}else {
temp.style.visibility = "hidden";
}
</script>
</form>
There probably is a mistake somewhere or maybe there's any other (better) way to do this?

You can use the following solution:
<form>
<script>
function toggle() {
var temp = document.getElementById("textField2");
//check for selected option.
if(document.getElementById("select").value === "id"){
temp.style.visibility = "visible";
} else {
temp.style.visibility = "hidden";
}
}
</script>
<input class="hidden" type="text" id="textField2" style="visibility:hidden;">
<input type="text" id="textField">
<select id="select" name="selectData" onchange="toggle()">
<option value="firstName">Name</option>
<option value="id">Id</option>
</select>
<input id="filter" type="button" value="Filter">
</form>

javascript - How do i use .click on an <option>

I'm fairly new to JavaScript and I cant figure out why this won't work. My friend said to try use .click or .select to test for a click on the option but nether of them worked.
My html:
<body>
<form>General
<hr>Full Name:
<br>
<input Type="text" name="name">
<br>Gender:
<br>
<input type="radio" Name="gender" value="Male">Male
<input Type="radio" name="gender" value="female">Female
<br>Birthday:
<br>
<input type="text" name="bday" placeholder="mm/dd/yy">
<br>Email Adress:
<br>
<input type="text" name="email">
<br>PayPal address:
<br>
<input type="text" name="PayPal" placeholder="for when we start paying staff">
<br>Short Biography:
<br>
<textarea rows="4" cols="50"></textarea>
<br>
<br>Apply:
<hr>Username:
<br>
<input type="text" name="nick" placeholder="Your Ingame Name">
<br>What Rank Are You Applying For:
<br>
<select>
<option id="Dev" value="Developer">Developer</option>
<option id="Headadmin" value="HeadAdmin">Head Admin</option>
<option id="Headmod" value="HeadMod">Head Modetator</option>
<option id="Headbuilder" value="HeadBuilder">Head Builder</option>
<option id="admin" value="Admin">Admin</option>
<option id="mod" value="Moderator">Moderator</option>
<option id="builder" value="Builder">Builder</option>
</select>
<br>Why do WE want you (Rank you picked above):
<br>
<textarea rows="4" cols="50"></textarea>
<br>How Many Hours Can You Be On a day:
<br>
<input type="text" name="day">
<br>how many days can you be on a week:
<br>
<input type="text" name="week">
<br>have you been staff before?
<br>
<select>
<option value="yes">yes
<option value="no">no</select>
<br>Test:
<hr>
<div id="DevTest">Devtest</div>
<div id="admintest">admin test</div>
<div id="modtest">mod test</div>
<div id="HAtest">head admin test</div>
<div id="HMtest">head mod test</div>
<div id="HBtest">headbuilder test</div>
<div id="buildertest">buildertest</div>
<br>
<hr>
<textarea readonly rows="5" cols="30">Staff Contract: ---------------- 1. As a staff member, YOU, are represent the "Piggalot Gaming Network" both online and offline. this means; A. If WE, The "Piggalot Gaming Network" Community,</textarea>
<hr>
<input type="checkbox" value="test" required>by clicking this you agree to the staff contract
<br>
<input type="reset">
<input type="submit" value="Send Application">
</form>
My JavaScript:
$(document).ready(function(){
$("#Dev").Click(function(){
$("#DevTest").show();
$("#HAtest").hide();
$("#HMtest").hide();
$("#HBtest").hide();
$("#admintest").hide();
$("#modtest").hide();
$("#buildertest").hide();
});
$("#Headadmin").Click(function(){
$("#HAtest").show();
$("#DevTest").hide();
$("#HMtest").hide();
$("#HBtest").hide();
$("#admintest").hide();
$("#modtest").hide();
$("#buildertest").hide();
});
});
Here the link to a Fiddle of it: http://jsfiddle.net/a2nw2sus/1/

<option> does not work that way. Listen for a change in <select> instead:
$('#id_for_your_select').change(function () {
var selected_value = $(this).val();
switch (selected_value) {
case 'Developer': {
// do something
break;
}
case 'HeadAdmin': {
// do something else
break;
}
}
});
In http://jsfiddle.net/a2nw2sus/2/ I fixed the spelling error (click() vs Click()), and lo: it does not work in Chrome. In Firefox it works, but you must not take this for granted!

You don't select options like you have. You're meant to give your select menu a reference (ID/class/name) and select that instead.
<select id="mySelectMenu">
<option value="Developer">Developer</option>
<option value="HeadAdmin">Head Admin</option>
<option value="HeadMod">Head Modetator</option>
<option value="HeadBuilder">Head Builder</option>
<option value="Admin">Admin</option>
<option value="Moderator">Moderator</option>
<option value="Builder">Builder</option>
</select>
If you just want to detect a click on the select:
$('#mySelectMenu').click(function() {
var currentValue = $(this).find(":selected").val();
console.log("The current selected option is "+ currentValue +".");
});
or maybe you want to get value of the select after a change was detected:
$('#mySelectMenu').on('change', function() {
var selectedValue = $(this).val();
if (selectedValue === "Dev") {
$("#DevTest").show();
$("#HAtest, #HMtest, #HBtest, #adminTest, #modtest, #buildertest").hide();
} else if (selectedValue === "HeadAdmin") {
$("#HAtest").show();
$("#DevTest, #HMtest, #HBtest, #adminTest, #modtest, #buildertest").hide();
}
});