set input value by selected option values - javascript

what I am trying to do is to set the kabelname, which is setted by selcted options into the input field by ordering the name like the order of the option fields.
This should happen by selecting or deselecting a option and wihout overwritting the whole input fild. It should only add or remove the values of the selected option.
If a kabelart is selected and steckertyp 1, the value of steckertyp1 should be added with a "-" to the value of kabelart into the input field of kabelname.
Then if a Verwendung is selected it should be added to kabelname with a "." and the value. Else if Verwendung is selected but Steckertyp isn´t, it schould be added with a "-" to kabelname.
The same thing shoul happen with Anschlusstyp...
If kabelart is setted to "", then kabelname should be cleared. But if one of the other options is changed or setted to "" it only should be removed on its position.
I´m sorry for that bad describtion but I hope you know what I mean. If not feel free to ask.
Thank you
function changedKabelart(kabelartValue){
var kaValue = kabelartValue;
if(kaValue != ""){
document.getElementById("kabelname").value = kaValue;
}
else{
document.getElementById("kabelname").value = kaValue;
}
}
/* Steckertyp 1 */
function changedSteckertyp1(sttyp1Value){
var st1Value = sttyp1Value;
if(st1Value != ""){
document.getElementById("kabelname").value += "-" + st1Value;
}
else{
document.getElementById("kabelname").value += st1Value;
}
}
/* Verwendung */
function changedVerwendung(verwendungValue){
var vwValue = verwendungValue;
var st1Value = document.getElementById("steckertyp1").value;
if(vwValue != "" && st1Value != ""){
document.getElementById("kabelname").value += "." + vwValue;
}
else if(vwValue != "" && st1Value == ""){
document.getElementById("kabelname").value += "-" + vwValue;
}
else{
document.getElementById("kabelname").value += vwValue;
}
}
/* Anschlusstyp 1 */
function changedAnschluss1(anschluss1Value){
var ansch1Value = anschluss1Value;
if(ansch1Value != ""){
document.getElementById("kabelname").value += "-" + ansch1Value;
}
else{
document.getElementById("kabelname").value += ansch1Value;
}
}
<p> Kabelart </p>
<select name="kabelart" id="kabelart" required onchange="changedKabelart(this.value);">
<option value="" selected></option>
<option value="K" > Kabel</option>
<option value="K2" > Kabel 2</option>
<option value="K3" > Kabel 3</option>
</select>
<p> Steckertyp </p>
<select name="steckertyp1" id="steckertyp1" onchange="changedSteckertyp1(this.value);">
<option value="" selected></option>
<option value="ST1" >ST1</option>
<option value="ST2" >ST2</option>
<option value="ST3" >ST3</option>
</select>
<p> Verwendung </p>
<select name="verwendung" id="verwendung" onchange="changedVerwendung(this.value);" >
<option value="" selected></option>
<option value="VW1" >VW1</option>
<option value="VW2" >VW1</option>
</select>
<p> Anschlusstyp </p>
<select name="anschlusstyp1" id="anschlusstyp1" onchange="changedAnschluss1(this.value);" >
<option value="" selected></option>
<option value="A1" >A1</option>
<option value="A2" >A2</option>
<option value="A3" >A3</option>
</select>
<br><br><br>
<input type="text" name="kabelname" id="kabelname" placeholder="Kabelname" readonly />

Instead of using different functions to update kabelname, use only one. Then everything will be covered.
<p> Kabelart </p>
<select name="kabelart" id="kabelart" required onchange="update();">
<option value="" selected></option>
<option value="K" > Kabel</option>
<option value="K2" > Kabel 2</option>
<option value="K3" > Kabel 3</option>
</select>
<p> Steckertyp </p>
<select name="steckertyp1" id="steckertyp1" onchange="update();">
<option value="" selected></option>
<option value="ST1" >ST1</option>
<option value="ST2" >ST2</option>
<option value="ST3" >ST3</option>
</select>
<p> Verwendung </p>
<select name="verwendung" id="verwendung" onchange="update();" >
<option value="" selected></option>
<option value="VW1" >VW1</option>
<option value="VW2" >VW1</option>
</select>
<p> Anschlusstyp </p>
<select name="anschlusstyp1" id="anschlusstyp1" onchange="update();" >
<option value="" selected></option>
<option value="A1" >A1</option>
<option value="A2" >A2</option>
<option value="A3" >A3</option>
</select>
<br><br><br>
<input type="text" name="kabelname" id="kabelname" placeholder="Kabelname" readonly />
<script>
function update() {
var kabelname ;
if(document.getElementById("kabelart").value === "") {
kabelname = "";
}
else {
kabelname = document.getElementById("kabelart").value;
if(document.getElementById("steckertyp1").value!== ""){
kabelname += "-" + document.getElementById("steckertyp1").value;
if(document.getElementById("verwendung").value !== "") {
kabelname += "." + document.getElementById("verwendung").value;
if(document.getElementById("anschlusstyp1").value!== "") {
kabelname += "-" + document.getElementById("anschlusstyp1").value;
}
}
else {
if(document.getElementById("anschlusstyp1").value!== "") {
kabelname += "." + document.getElementById("anschlusstyp1").value;
}
}
}
else {
if(document.getElementById("verwendung").value !== "") {
kabelname += "-" + document.getElementById("verwendung").value;
if(document.getElementById("anschlusstyp1").value!== "") {
kabelname += "." + document.getElementById("anschlusstyp1").value;
}
}
else {
if(document.getElementById("anschlusstyp1").value!== "") {
kabelname += "-" + document.getElementById("anschlusstyp1").value;
}
}
}
}
document.getElementById("kabelname").value = kabelname;
}
</script>

Related

Populate one dropdown list based on another dropdown list and get "value" instead of dropdown showing value

I am trying to make two drop down which populate by another dropdown
Here is code
html
<form type=get action="action.php">
<select name="meal" id="meal" onChange="changecat(this.value);">
<option value="" disabled selected>Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="category" id="category">
<option value="" disabled selected>Select</option>
</select>
<input type="submit">
</form>
JavaScript
<script>
var mealsByCategory = {
A : {one:"Soup", two:"Juice"},
B : {three:"Water", four:"Others"},
C : {five:"Coffee", six:"Tea"}
};
function changecat(value) {
if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
else {
var catOptions = "";
for (categoryId in mealsByCategory[value]) {
catOptions += "<option value='" + mealsByCategory[value][categoryId] +"'>" + mealsByCategory[value][categoryId] + "</option>";
}
document.getElementById("category").innerHTML = catOptions;
}
}
</script>
I know my java script is not wrong.
I am looking for output like in dropdown value must be the object name and in the dropdrown the object value.
ie
when I click submit
site go
action.php?meal=B&category=Juice
Here you can see juice is passed (which apears on drop down) instead of it I need to pass "two" which is object name of juice
like action.php?meal=B&category=two
assign categoryId as value of options
var mealsByCategory = {
A: {
one: "Soup",
two: "Juice"
},
B: {
three: "Water",
four: "Others"
},
C: {
five: "Coffee",
six: "Tea"
}
};
function changecat(value) {
if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
else {
var catOptions = "";
for (categoryId in mealsByCategory[value]) {
catOptions += "<option value='" + categoryId + "'>" + mealsByCategory[value][categoryId] + "</option>";
}
document.getElementById("category").innerHTML = catOptions;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form type=get action="action.php">
<select name="meal" id="meal" onChange="changecat(this.value);">
<option value="" disabled selected>Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="category" id="category">
<option value="" disabled selected>Select</option>
</select>
<input type="submit">
</form>

show the image with specific named using javascript

I have some picture in folder "../../images"
I give the name of picture with example
101_2018_1_1.jpg
101_2018_1_2.jpg
101_2018_1_3.jpg
101 is on var1
2018 is on id year
and 1 is on var3
and the last is auto increment
how can I call all the images with specific named based on combo box I chose with javascript and show the image on my page?
here the example of my form
<form>
<select name="var1" id="var1" >
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="<?php echo date('Y'); ?>">
<select name="var3" id="var3" >
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<button type="submit" name="search">search</button>
</form>
Using jQuery you can do something like:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
var URL = "www.example.com/image/";
//Get the values of form element
var var1 = $("#var1").val();
var year = $("#year").val();
var var3 = $("#var3").val();
//Check Up to 10 increments
for (i = 1; i <= 10; i++) {
var img = URL + var1 + "_" + year + "_" + var3 + "_" + i + ".jpg";
getImage(img);
}
return false;
});
});
/*
Check if image exist and add it.
If not, just console
*/
function getImage(image_url) {
$.get(image_url)
.done(function() {
// Image does exist - append on #image-container container
$("#image-container").append('<img src="' + image_url + '">');
}).fail(function() {
// Image doesn't exist - do nothing.
console.log(image_url + " does not exist.");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select name="var1" id="var1">
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="2018">
<select name="var3" id="var3">
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<div id="image-container"> </div>
<button type="submit" name="search">search</button>
</form>
If I understand correctly, you would do something like:
var imgUrl, counter = 3;
document.getElementById('search').addEventListener('click', function() {
imgUrl = "../../" + document.getElementById('var1').value + "_" + document.getElementById('year').value + "_" + document.getElementById('var3').value + "_";
alert(imgUrl);
for (var i = 0; i < counter; i++) {
var img = document.createElement("IMG");
var url = imgUrl + i.toString() + ".jpg"
//img.setAttribute('src', );
alert(url);
}
});
<form>
<select name="var1" id="var1">
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="<?php echo date('Y'); ?>">
<select name="var3" id="var3">
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<input type="submit" name="search" id='search'>
</form>
That would get you the image url, set the src attribute to that url, then append it to the body.

html get Method sending wrong url

on using html get method my url should be shown as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text=10.1.17.20&subquery=&subfilter=&sub_search_text=
but it shows as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=
there is a plus sign between query=ip&filter=like&search_text+=10.1.17.20
which creates problem in getting data
my html form code is like
<form method="get" action="log_table_view.php" onsubmit="return submit_query_form_check();" enctype="multipart/form-data">
<label>Log for Year</label>
<select id="year" name="year">
<option value="">Select Year</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<br>
<label>From</label>
<select id="frommonth" name="frommonth">
<option value="">Select Month</option>
</select>
<select id="fromdate" name="fromdate">
<option value="">Select Date</option>
</select>
<label>To</label>
<select id="tomonth" name="tomonth">
<option value="">Select Month</option>
</select>
<select id="todate" name="todate">
<option value="">Select Date</option>
</select>
<br>
<label>Query</label>
<select name="query" id="query">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="filter" id="filter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="search_text" id="search_text">
<label>AND</label>
<label>Sub-Query</label>
<select name="subquery" id="subquery">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="subfilter" id="subfilter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="sub_search_text" id="sub_search_text">
<button type="submit" class="search">Search</button>
</form>
function submit_query_form_check() {
var year = $("#year").val();
var frommonth = $('#frommonth').val();
var fromdate = $('#fromdate').val();
var tomonth = $('#tomonth').val();
var todate = $('#todate').val();
var query = $('#query').val();
var subquery = $('#subquery').val();
if (year == "") {
alert("Year Not Selected");
$("#year").focus();
return false;
}
if (frommonth == "") {
alert("From Month Not Selected");
$("#frommonth").focus();
return false;
}
if (fromdate == "") {
alert("From date Not Selected");
$("#fromdate").focus();
return false;
}
if (tomonth == "") {
alert("To Month Not Selected");
$("#tomonth").focus();
return false;
}
if (todate == "") {
alert("To date Not Selected");
$("#todate").focus();
return false;
}
if (query != "") {
var filter = $('#filter').val();
var search_text = $('#search_text').val();
if (filter == "") {
alert("You have not selected any filter for query");
$('#filter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any search text for query");
$('#search_text').focus();
return false;
} else if (query == "groupname") {
if (filter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#filter').focus();
return false;
}
}
}
if (subquery != "") {
var subfilter = $('#subfilter').val();
var sub_search_text = $('#sub_search_text').val();
if (query == "") {
alert("You have not selected any for query before using sub query");
$('#query').focus();
return false;
}
if (subfilter == "") {
alert("You have not selected any sub filter for query");
$('#subfilter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any sub search text for query");
$('#sub_search_text').focus();
return false;
} else if (subquery == "groupname") {
if (subfilter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#subfilter').focus();
return false;
}
}
}
return true;
}
Right before you actually pass in the string to be called to the endpoint, just strip the '+' out of the URL using the str_replace method.
<?
$badUrl = "http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=";
$goodUrl = str_replace('?/', '?', $badUrl);
then you simply pass the goodUrl to make the GET request

Verify values of selctbox using jquery

i'm new to this. I'm using in a html page with 2 selctboxs, one for min price and the other for max price and a hidden input to put on it the combination of the two values of the selectboxs.
<div class="option-bar mini first">
<label><?=__("Min Price")?></label>
<span class="selectwrap">
<select name="min-price" id="pmin" class="search-select">
<option value=""></option>
<option value="1000">$1000</option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>
</select>
</span>
</div>
<div class="option-bar mini">
<label><?=__("Max Price")?></label>
<span class="selectwrap">
<select name="max-price" id="pmax" class="search-select">
<option></option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>
<option value="10000">$10,000</option>
</select>
</span>
</div>
<input type="hidden" id="prix" name="prix" class="sel2" value="" />
and i got this jquery code :
$("#pmin, #pmax").change(function(){
update();
});
function update() {
$("#prix").val($('#pmin').val() + "-" + $('#pmax').val());
}
So what i want to do is when the user select options in the two selectbox, verify if the min price value is lower than the max price value and if not show a message.
Thnx a lot guys.
$("#pmin, #pmax").change(function() {
if ($("#pmin").val() && $("#pmax").val()) { //check if both have values
if (parseFloat($("#pmin").val()) > parseFloat($("#pmax").val())) { //check if valid range
alert('invalid range')
return;
}
}
update();
});
$(".search-select").change(fucntion(){
var max_val = $("#pmax").val();
var min_val = $("#pmin").val();
if(max_val != '' && min_val != '' && max_val < min_val){
alert("Max value is less than Min value.");
}
});
Try this..!!
You should modify the change and update method as shown below:
$("#pmin, #pmax").change(function() {
if ($('#pmin').val() != "" && $('#pmax').val() != "") {
update();
}
});
function update() {
var computedValue = parseInt($('#pmin').val()) - parseInt($('#pmax').val());
if (computedValue < 0) {
alert('Invalid selection.');
}
$("#prix").val(computedValue);
}
Refer the demo.

Javascript form verification help

Hey guys, I just updated my signup form to include drop down menu selectors to select gender and class and section. But I don't know how to verify them and check that a value is selected.
Here is the code:
<form name="registration_form" method="post" action="register.php" onsubmit="return Validate();"><input type=hidden name=todo value=post>
<table>
<tr><td class="label">First Name:</td><td><input type="text" name="fname"></td></tr>
<tr><td class="label">Last Name:</td><td><input type="text" name="lname"></td></tr>
<tr><td class="label">Gender:</td><td><select name="gender">
<option>Select your gender:</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select></td></tr>
<tr><td class="label">E-Mail Address:</td><td><input type="email" name="email"></td></tr>
<tr><td class="label">Username:</td><td><input type="text" name="username"></td></tr>
<tr><td class="label">Password:</td><td><input type="password" name="password"></td></tr>
<tr><td class="label">Password Confirmation:</td><td><input type="password" name="password_confirmation"></td></tr>
<tr><td class="label">Class:</td><td><select name="class">
<option>Select your class:</option>
<option value="1">Grade 1</option>
<option value="2">Grade 2</option>
<option value="3">Grade 3</option>
<option value="4">Grade 4</option>
<option value="5">Grade 5</option>
<option value="6">Grade 6</option>
<option value="7">Grade 7</option>
<option value="8">Grade 8</option>
<option value="9">Grade 9</option>
<option value="10">1S</option>
<option value="11">2S</option>
<option value="12">3S</option>
</select></td></tr>
<tr><td class="label">Section:</td><td><select name="section">
<option>Select a section:</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="S">S</option>
<option value="SE">SE</option>
<option value="GS">GS</option>
<option value="LS">LS</option>
</select></td></tr>
<tr><td>Are you human?</td></tr>
</table>
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);
require_once('recaptchalib.php');
$publickey = "6LfF478SAAAAAFR1_ZfSFzGyEhkcXlNVRg8iJeWU"; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>
<table>
<tr><td class="label"><input class="submitButton" type="submit" value="Register"></td></tr>
</table>
</form>
</div>
<script language = "Javascript">
function Validate()
{
if (document.registration_form.fname.value == '')
{
alert('Please fill in your first name!');
return false;
}
if (document.registration_form.lname.value == '')
{
alert('Please fill in your last name!');
return false;
}
if (document.registration_form.email.value == '')
{
alert('Please fill in your email address!');
return false;
}
if (document.registration_form.username.value == '')
{
alert('Please fill in your desired username!');
return false;
}
if (document.registration_form.password.value == '')
{
alert('Please fill in your desired password!');
return false;
}
if (document.registration_form.password_confirmation.value == '')
{
alert('Please fill in your password again for confirmation!');
return false;
}
if (document.registration_form.password.value !=
document.registration_form.password_confirmation.value)
{
alert("The two passwords are not identical! "+
"Please enter the same password again for confirmation!");
return false;
}
return true;
}
</script>
My question is what can I add to the Validate function so that it returns false if the values selected are "Please select your ... "
Edit(1): Ok I tried this but it didn't seem to work, what's wrong?
var selectedClass = document.getElementById("class");
if(selectedClass.selectedIndex ==0){
alert('Please select your class!');
return false;
}
Edit(2): Never mind I got it to work.
function validate(){
var selectedClass = doument.getElementById("Class");
if(selectedClass.selectedIndex ==0){
alert(selectedClass.options[0].text);
return false;
}
}
The selectedIndex of "Please select your... " would be 0 so your code should check that the selectedIndex of the select control is always greater than 0.

Categories