We Keep Coding

How to show input and remove it based on select box?

I have two input I need to show one of them based on the select box:
html code:
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" name="Numeric">
</div>
<div id="input_type2">
<input type="text" name="Percentage">
</div>
jQuery code:
$('#type-price').on('change',function(){
if($(this).val()=== "numeric"){
$("#input_type1").show();
$("#input_type2").hide();
}else if ($(this).val()=== "percentage"){
$("#input_type1").hide();
$("#input_type2").show();
}
});
Now it's totally fine like that but my issue I have php request when I show input_type1 then hide input_type2 the request pick up second one which is null so I need to delete the hide one at all form Dom tree!

You can empty the div which contain the input and you will have only one input in your DOM. On each change of select, it will fill the concerne div by the input html.
Also you'd used wrong selector, the # selector is for id and you have used an class in your HTML code.
The JQuery class selector is ..
function removeAll() {
$("#input_type1").html('');
$("#input_type2").html('');
}
removeAll();
$('#type-price').on('change',function(){
removeAll();
if ($(this).val() === "numeric"){
$("#input_type1").append('<input type="text" value="numeric">');
} else if ($(this).val() === "percentage"){
$("#input_type2").append('<input type="text" value="percentage">');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="" disabled selected>Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" value="numeric">
</div>
<div id="input_type2">
<input type="text" value="percentage">
</div>

Here is an example with one field.
$(function() {
$("#type-price").change(function(e) {
$(".input-type").fadeIn("slow").find("input").attr("name", $(this).val().toLowerCase());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input-type" style="display: none;">
<input type="text">
</div>

Besides some syntax problem in your jQuery class selector, Thinking about performance, It's simply better to prevent the (non-visible) input from being sent.
Shorter coding and less dom manipulation.
$('#type-price').on('change',function(){
$('.input_type1').toggle($(this).val()=="numeric");
$('.input_type2').toggle($(this).val()=="percentage");
});
//To prevent the non-visible from being posted
//Eithr we check the form using submit handler or the button and prevent the
//from being sent do our stuff then send it...
$('#myForm').submit(function() {
$('input:hidden').attr('name', '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input_type1">
<input name="inp1" type="text" placeholder="1">
</div>
<div class="input_type2">
<input name="inp2" type="text" placeholder="2">
</div>
<input type="submit" value="Send">
</form>

Change form action based on form select field

I can't get the form action to change based on a user's drop-down selection. What I want to do is have the form redirect to a different page, then the default for the form if a user selects "Student Loans" from the select field named "agency".
In other words, what I want to do is that if someone select "student loans" for the agency, I want the page to submit to /quote/quotes-sl.php instead of quote/quotes.php (the default of the form).
Here is my form code:
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" onsubmit="submit_function(this)" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
<input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="test" />
<label class="edit-owed" for="edit-owed"> Amount Owed: <span class="form-required" title="This field is required.">*</span>
</label><select id="owed" class="form-select required" name="owed">
<option selected="selected" value="">Select...</option>
<option value="$10,000 to $14,999">$10,000 to $14,999</option>
<option value="$15,000+">$15,000+</option>
</select>
<label class="edit-agency" for="edit-agency"> Problem With: <span class="form-required" title="This field is required.">*</span>
</label><select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="FEDERAL">Federal Taxes</option>
<option value="STATE">State Taxes</option>
</select></div>
<input id="edit-submit" class="form-submit" height="31" name="submit" src="test.com/test.jpg" type="image" value="Submit" width="214" />
<input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" />
<input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" />
</form>
Here is the javascript:
<script>
function submit_function(form) {
var selected = document.getElementById('Agency');
var dataset = selected[selected.selectedIndex].dataset;
if (dataset.action) {
form.action = dataset.action;
}
return true;
};
</script>

Add trigger on selected option val = "Student Loan" , then change attribute "action" form to url "/quote/quotes-sl.php"
$('#agency').on('change',function(){
var selected = $(this).val();
if(selected == "Student Loan")
$('#tdhcustom-pre-1-form').prop('action',"/quote/quotes-sl.php");
});
CMIIW :D

You want to change the form action based on an onchange event from your <select> ... but you'll also want to remove the onsubmit attribute from your form, like so:
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
Assuming you're going to have data attributes on all the options like this:
<select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="FEDERAL" data-action="/quote/quotes-s2.php">Federal Taxes</option>
<option value="STATE" data-action="/quote/quotes-s3.php">State Taxes</option>
</select>
You can just replace your <script> block with:
<script>
(function() {
var theForm = document.getElementById('tdhcustom-pre-1-form');
var theSelector = document.getElementById('agency');
theSelector.onchange = function() {
theForm.action = theSelector[theSelector.selectedIndex].getAttribute('data-action');
}
})();
</script>
That's pure JavaScript - so without jQuery (or any other framework).

How can I insert a variable into the resulting url parameter string after submitting my GET form?

I have a form that queries a library database on another site. It works perfectly if I only include input fields for the "format" and "keyword" because the resulting parameters passed to the url come out in the correct order and the destination site recognizes it.
However, I also need my form to have an input field to select to search by "Author", "Title", "Subject" etc. This is what causes the problem. The destination site only recognizes this parameter if it is in the middle of the url (inside the keyword parameter).
My current resulting url:
http://alpha2.suffolk.lib.ny.us/search~S50/X?SEARCH=harry&searchscope=50&SORT=D&m=b
What I need the url to look like:
http://alpha2.suffolk.lib.ny.us/search~S50/X?SEARCH=t:(harry)&searchscope=50&SORT=D&m=b
If you compare the two you will notice a couple differences. First, ignore the parentheses around harry. That doesn't make a difference. The real issue is how do I get the "t:" to be inserted into my url? The "t:" comes from selecting "Title" as the thing to search by.
Here is my current form HTML (If you remove the "searchtype" select box at the bottom the form will execute without errors, but I need it to execute with it.)
<form class="form-inline" role="search" method="get" name="searchform" id="searchform" action="http://alpha2.suffolk.lib.ny.us/search~S50/X">
<div class="form-group" style="float: left; margin-top: 6px;">
<label class="form-title">Search Collection</label>
</div>
<div class="form-group">
<input type="text" value="" name="SEARCH" id="SEARCH" placeholder="Enter Search Terms..." />
<input type="hidden" value="50" name="searchscope" />
<input type="hidden" value="D" name="SORT" />
</div>
<div class="form-group" style="float: left; margin-top: 3px;">
<label for="searchformat">For:</label>
<select name="m" id="m">
<option value="">ANY</option>
<option value="a">BOOK</option>
<option value="e">EBOOK DOWNLOAD</option>
<option value="l">LARGE PRINT BOOK</option>
<option value="b">BLU-RAY</option>
<option value="g">DVD</option>
<option value="i">AUDIO BOOK CD</option>
<option value="h">AUDIO BOOK MP3CD</option>
<option value="x">EAUDIOBOOK DOWNLOAD</option>
<option value="q">PLAYAWAY</option>
<option value="j">MUSIC CD</option>
<option value="p">MAGAZINE/NEWSPAPER</option>
<option value="n">EMAGAZINE DOWNLOADS</option>
<option value="v">PLAYAWAY VIEW</option>
<option value="s">VIDEO GAME</option>
<option value="r">CD-ROM</option>
<option value="d">VHS</option>
<option value="t">GAMES/PUZZLES</option>
<option value="f">DIGITAL IMAGE</option>
<option value="z">EVIDEO DOWNLOADS</option>
<option value="y">EMUSIC DOWNLOADS</option>
<option value="c">SHEET MUSIC</option>
<option value="m">MAP</option>
<option value="w">ONLINE RESOURCE</option>
<option value="o">OTHER MATERIALS</option>
</select>
</div>
<div class="form-group" style="float: left; margin-top: 3px;">
<label for="searchtype">By:</label>
<select name="" id="searchtype">
<option value="a:"> Author</option>
<option value="t:"> Title</option>
<option value="d:"> Subject</option>
<option value="N:"> Note</option>
<option value="" selected="selected"> Keyword</option>
</select>
</div>
<button class="btn btn-primary" id="searchsubmit" type="Submit">GO</button>
</form>
EDIT:
The attempted Javascript (as requested in the comments):
<script>
function searchSubmit() {
m = document.getElementById("m").value;
t = document.getElementById("searchtype").value;
a = document.getElementById("searcharg").value;
var newurl = "alpha2.suffolk.lib.ny.us/search/X~S22?SEARCH="; + t + a + "&searchscope=50&SORT=D&m=" + m;
var searchform = document.getElementById("searchform");
searchform.action = newurl; searchform.submit();
}
</script>

What I would do is get the searchtype-value and add it to the input-search before submitting. Here is a JS-fiddle example:
$(document).ready(function(){
$("#searchform").on("submit", function(e){
var keyWord = $("#SEARCH").val();
var searchtype = $("#searchtype").val();
$("#SEARCH").val(searchtype + keyWord);
});
});

If you want to use the JavaScript approach, you will have to use AJAX and prevent the default behavior of the button.
document.getElementById("searchsubmit").addEventListener("click", function(event){
event.preventDefault();
var xhttp = new XMLHttpRequest();
//here you set up your variables. One example is
var mysearch = "SEARCH=" + document.getElementById("searchtype").value + document.getElementById("SEARCH").value;
xhttp.open("GET", "yourURL?" + yourVariables, true);
xhttp.send();
});

Angular: Conditional field doesn't work with server side

i have a conditional field like this :
<form ng-app="myApp" name="frm">
<select ng-model="NewBranchRequest.BranchTypeCode">
<option selected="selected" value="0">third</option>
<option value="1">first</option>
<option value="2">second</option>
</select>
<input class="ng-pristine ng-valid" type="text" name="power" ng-model="NewBranchRequest.PwrCnt" placeholder="sad" ng-required="NewBranchRequest.BranchTypeCode==0">
<span style="color:red" ng-show="frm.power.$invalid">
*
</span>
<button>Submit</button>
</form>
Demo
it works, but option fill from server and it doesn't work.
UPDATE
Check This Demo which is not working .
All i want is after select Bug in select list, input get rquired .
Any idea ?

In http://jsfiddle.net/sadeghbayan/MTfRD/1452/
change
ng-required="form.type==0"
to
ng-required="form.type=='bug'"
I made the changes here: http://jsfiddle.net/MTfRD/1453/
In addition, if you want to get the json object in form.type you can change this
ng-options='option.value as option.name for option in typeOptions'
to
ng-options='option.value for option in typeOptions'

javascript change onblur value

I have 2 selections and a textbox. I want to change the onBlur value of the textbox when i select one of the selections. Here is my code:
function changeBlurValue(){
$selection = document.getElementById("searchtype")
$onblurvalue= document.getElementById("searchbox")
if ($selection.value="location"){
$onblurvalue.value="Enter a location name";
};
}
//html
<select name= "searchtype" id="searchtype" onclick="changeBlurValue()">
<option value="gymname">Gym Name
<option value="location">Location
</select><br><br>
<input name="searchterm" type="text" size="39" style="color:#888;" id="searchbox"
value="Enter a gym name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
The problem is that the selection is permanent at "Location" and I can't change it to "Gym Name"
Thanks for the help.

The problem lies here:
if ($selection.value="location"){
You should change it to
if ($selection.value=="location"){
because you are making a comparision.

I would try using onChange instead of onClick for your select.
<select name= "searchtype" id="searchtype" onchange="changeBlurValue()">
Also close your <option> tags, as such:
<select name= "searchtype" id="searchtype" onchange="changeBlurValue()">
<option value="gymname">Gym Name</option>
<option value="location">Location</option>
</select>