Hey guys I have a question. I am trying to put what I select from a drop down box into a input field and I am not sure how to do it.
Here is my code:
<body>
<tr valign="top">
<select id="dropdown">
<option value="None">None</option>
<option value="manufactor">Manufactor *Pending</option>
<option value="commercial">Commercial Series *Pending</option>
<option value="part">Part</option>
<option value="motor">Motor</option>
</select>
<table>
<td>
<label for="Make1">Make:</label><br />
<input type="text" name="Make" id="Make1" value="" maxlength="20">
</td>
<td>
<label for="Manufactor1">Manufactor:</label><br />
<input type="text" name="Manufactor" id="Manufactor1" value="" maxlength="15">
</td>
<td>
<label for="Commercial1">Commercial:</label><br />
<input type="text" name="Commercial" id="Commercial1" value="" maxlength="15">
</td>
<td>
<label for="Part1">Part:</label><br />
<input type="text" name="Part" id="Part1" value="" maxlength="15">
</td>
<td>
<label for="motor1">Motor:</label><br />
<input type="text" name="Motor" id="motor1" value="" maxlength="30">
</td>
<td>
<label for="Dropdown1">Search Term:</label><br /> <--- want this to show what i selected from dropdown at the top.
<input type="text" name="Dropdown" id="Dropdown1" value="" maxlength="30">
</td>
</table>
</tr>
So I am wanting at the bottom Dropdown1 to show what I picked from the Dropdown but I am unsure of how this is done.
By using Jquery you can achieve your requirement.
By using Change function.
Here is the working fiddle for you. Fiddle
$('#dropdown').change(function(){
$('#Dropdown1').val($(this).find(":selected").text())
;
});
-Help
Related
I am trying to use an external JS file to validate some forms. I am just trying to change field colors if they are left blank. I can not get my JS file to work with the HTML file. When submitting blank fields the page just stays the same. I just need it to see that field are being left blank, and in return back with the red color on the blank fields.
Here is my HTML file:
<html>
<head lang="en">
<meta charset="utf-8">
<title>Form + JavaScript</title>
<link rel="stylesheet" href="lab6_problem1.css" />
<script type="text/javascript" src="lab6_problem1.js"></script>
</head>
<body>
<form method="get" action="" id="mainForm" onsubmit="return validateForm()">
<fieldset>
<legend>Photo Details</legend>
<table>
<tr>
<td colspan="2">
<p>
<label>Title</label><br/>
<input type="text" name="title" size="80" class="required" />
</p>
<p>
<label>Description</label><br/>
<textarea name="description" rows="5" cols="61" class="required"></textarea>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label>Continent</label><br/>
<select name="continent">
<option>Choose continent</option>
<option>Africa</option>
<option>Asia</option>
<option>Europe</option>
<option>North America</option>
<option>South America</option>
</select>
</p>
<p>
<label>Country</label><br/>
<select name="country">
<option>Choose country</option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</p>
<p>
<label>City</label><br/>
<input type="text" name="city" list="cities" size="40"/>
<datalist id="cities">
<option>Calgary</option>
<option>Montreal</option>
<option>Toronto</option>
<option>Vancouver</option>
</datalist>
</p>
</td>
<td>
<div class="box">
<label>Copyright? </label><br/>
<input type="radio" name="copyright" value="1">All rights reserved<br/>
<input type="radio" name="copyright" value="2" checked>Creative Commons<br/>
</div>
<div class="box">
<label>Creative Commons Types </label><br/>
<input type="checkbox" name="cc" >Attribution <br/>
<input type="checkbox" name="cc" >Noncommercial <br/>
<input type="checkbox" name="cc" >No Derivative Works <br/>
<input type="checkbox" name="cc" >Share Alike
</div>
</td>
</tr>
<tr>
<td colspan="2" >
<div class="rectangle">
<label>I accept the software license</label>
<input type="checkbox" name="accept" class="required">
</div>
</td>
</tr>
<tr>
<td>
<p>
<label>Rate this photo: <br/>
<input type="number" min="1" max="5" name="rate" />
</p>
<p>
<label>Color Collection: <br/>
<input type="color" name="color" />
</p>
</td>
<td>
<div class="box">
<p>
<label>Date Taken: <br/>
<input type="date" name="date" />
</p>
<p>
<label>Time Taken: <br/>
<input type="time" name="time" />
</p>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="rectangle centered">
<input type="submit" class="rounded"> <input type="reset" value="Clear Form" class="rounded">
</div>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Here is my JS file:
function validateForm() {
var requiredField = document.getElementByClassName("required")
var mainForm = document.getElementById("mainForm");
document.getElementById("mainForm").onsubmit = function(e){
var titleField = requiredField[0].value;
var descriptionField = requiredField[1].value;
var checkboxField = requiredField[2];
if(titleField === ""){
requiredField[0].parentNode.style.backgroundColor= "red";
requiredField[0].style.backgroundColor= "red";
e.preventDefault();
}
if(descriptionField === ""){
requiredField[1].parentNode.style.backgroundColor= "red";
requiredField[1].style.backgroundColor= "red";
e.preventDefault();
}
if(checkboxField.type=="checkbox"){
if(checkboxField.checked === false){
requiredField[2].parentNode.style.backgroundColor= "red";
e.preventDefault();
}
}
}
}
You can even run the your js function if your input field value or selected option changes.
Use the onchange="validateForm()" in the select,text area, and text html element.
It will look like this for a select option list.
<select name="country" onchange="validateForm()">
<option>Choose country</option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
I would like to only show a particular row in a form when the option selected includes the word 'split'
I have used a class on the row to be hidden and have got this far but can not get it to work
$(document).ready(function() {
$(".split td").hide();
$('#os0').change(function() {
var val = $(this).val();
if (val == "*split*") {
$('.split td').show();
} else {
$('.split td').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<tr>
<td>
<input type="hidden" name="product[]" value="Type" /> Type:
<select name="product[]" id="os0">
<option value="Anodised closed">Anodised closed </option>
<option value="Plain closed">Plain closed</option>
<option value="Black filled closed">Plain closed Black filled </option>
<option value="Anodised split">Anodised split</option>
<option value="Plain split">Plain split</option>
<option value="Black filled split">Plain split Black filled </option>
</select>
</td>
</tr>
<tr>
<td class="split">
<input type="hidden" name="product[]" value="yrno" />Please specify year if required:
<input type="text" name="product[]" id="os9" onkeypress="return numbersonly(this, event)" maxlength="4" class="formfill" style="width: 50px;" />
</td>
</tr>
can anyone tell me where I am going wrong please :)
You selection $(".split td") must be like $("td.split")
and to search for existence of substring use indexOf() which returns first index of substring in main string.
$(document).ready(function() {
$('td.split').hide();
$('#os0').change(function() {
var val = $(this).val();
if (val.indexOf("split") > -1) {
$('td.split').show();
} else {
$('td.split').hide();
}
});
});
td.split {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="hidden" name="product[]" value="Type" />Type:
<select name="product[]" id="os0">
<option value="Anodised closed">Anodised closed</option>
<option value="Plain closed">Plain closed</option>
<option value="Black filled closed">Plain closed Black filled</option>
<option value="Anodised split">Anodised split</option>
<option value="Plain split">Plain split</option>
<option value="Black filled split">Plain split Black filled</option>
</select>
</td>
</tr>
<tr>
<td class="split">
<input type="hidden" name="product[]" value="yrno" />Please specify year if required:
<input type="text" name="product[]" id="os9" onkeypress="return numbersonly(this, event)" maxlength="4" class="formfill" style="width: 50px;" />
</td>
</tr>
</table>
how can i select a radio button with its value is the only one which is unique via JS. This seems to be little odd, but i need to. the Html code is as follows
<td class="Customer_Name"><table>
<td>
<input name="Name" tabindex="4" id="Name" type="radio" value="01">John</td>
<input name="Name" tabindex="4" id="Name" type="radio" value="02">Sam</td>
<input name="Name" tabindex="4" id="Name" type="radio" value="03">Fred</td>
<input name="Name" tabindex="4" id="Name" type="radio" value="04">Peter</td>
<td>
You cannot have same id for multiple elements. id should be unique.
You can use querySelector with attribute-value selector.
document.querySelector('input[type="radio"][value="02"]')
Demo
document.querySelector('input[type="radio"][value="02"]').checked = true;
<td class="Customer_Name">
<table>
<td>
<input name="Name" type="radio" value="01" />John</td>
<td>
<input name="Name" type="radio" value="02" />Sam</td>
<td>
<input name="Name" type="radio" value="03" />Fred</td>
<td>
<input name="Name" type="radio" value="04" />Peter</td>
<td>
Using jQuery
$('input[type="radio"][value="02"]').prop('checked', true);
I have dynamic element and field on the form.
JS :
<script>
function hapus(i){
$("#field"+i).remove();
}
</script>
HTML :
<div class="fieldwrapper" id="field1">
<select class="fieldtype" id="labensmittel1" name="data[Tagebuch][labensmitell1]" style="width:160px;">
<option value="data">data</option>
</select>
<input type="text" value="" id="qty1" name="data[Tagebuch][qty1]" class="fieldname" />
<input type="text" value="" id="labendata1" name="data[Tagebuch][labendata1]" class="fieldname" />
<input type="button" class="hapus1" value="-" style="width:20px;" id="hapus1" onclick="hapus(1);" />
</div>
<div class="fieldwrapper" id="field2">
<select class="fieldtype" id="labensmittel2" name="data[Tagebuch][labensmitell2]" style="width:160px;">
<option value="data">data</option>
</select>
<input type="text" value="" id="qty2" name="data[Tagebuch][qty2]" class="fieldname" />
<input type="text" value="" id="labendata2" name="data[Tagebuch][labendata2]" class="fieldname" />
<input type="button" class="hapus2" value="-" style="width:20px;" id="hapus2" onclick="hapus(1);" />
</div>
<div class="fieldwrapper" id="field3">
<select class="fieldtype" id="labensmittel3" name="data[Tagebuch][labensmitell3]" style="width:160px;">
<option value="data">data</option>
</select>
<input type="text" value="" id="qty3" name="data[Tagebuch][qty3]" class="fieldname" />
<input type="text" value="" id="labendata3" name="data[Tagebuch][labendata3]" class="fieldname" />
<input type="button" class="hapus3" value="-" style="width:20px;" id="hapus3" onclick="hapus(3);" />
</div>
How can I reorder the fields by name? For example if I remove field2 div id='field3' will be changed into div id='field2' then the select and input field id and name from id="labensmittel3" and name="data[Tagebuch][labensmitell3]" will be moved to id="labensmittel2" and name="data[Tagebuch][labensmitell2]"
Thanks
How about a basic iteration after the delete happens that resets all of your ids:
var fields = $('.fieldwrapper');
var count = 1;
$.each(fields, function() {
$(this).attr('id','field' + count);
count++;
});
I have a form containing 13 fieldsets , each containing non uniform number of fields. I want to use tab to navigate between the fields and in the end it will move on to the next fieldset.
I have written one javascript in which i have
$('#formElem > fieldset').each(function(){
var $fieldset = $(this);
$fieldset.children(':last').find(':input').keydown(function(e){
if (e.which == 9){
$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
/* force the blur for validation */
$(this).blur();
e.preventDefault();
}
});
});
In my form when my page loads, when i click on tab button it moves on to the next page without traversing my fields in the current fieldset, but on the next fieldset clicking on tab makes makes my cursor to move to few fields then again without completing my fields it moves on to next fieldset.
I am giving details of my first fieldset in my form
<form id="formElem" name="formElem" action="report_form_submit.jsp" method="post">
<fieldset class="step">
<legend>General Information </legend>
<table>
<tr><td>
<p>
<label for="centers" >Name of the Center</label>
<%
if(user_gr.equals("MA") || user_gr.equals("Ad")){
%>
<select name="centers" id="centers" >
<option value="">Select Center</option>
<!-- Populate Combobox from Database -->
<%
while(rsCenters.next()){
%>
<option value="<%= rsCenters.getInt("id") %>"><%= rsCenters.getString("c_name") %></option>
<%
}
// rsCenters.beforeFirst();
%>
<!-- Populate Combobox from Database -->
</select>
<%
}
else{
//System.out.println("...SQL CENTER :::"+sqlCenter);
while(rsCenters.next()){
center_name=rsCenters.getString("c_code");
%>
<input type="hidden" name="centers" id="centers" value="<%= rsCenters.getInt("id") %>" />
<input type="text" name="" id="" value="<%= rsCenters.getString("c_name") %>" disabled/>
<%
}
}
%>
<!-- <input id="username" name="username" /> -->
<%
}
catch(Exception ex){
System.out.println(ex);
}
%>
</p>
</td>
<td>
<p>
<label for="dt_enrolment">Date of enrolment</label>
<input tabindex="1" id="dt_enrolment" name="dt_enrolment" type="text" onclick="gen_dt()" />
</p>
</td>
<td>
<p>
<label for="srl_no">Serial No</label>
<% if(!rsserial_no.next())
{center_serial_no=center_name+1;}
else
{
String received_serial_no=rsserial_no.getString("serial_no");
center_serial_no=received_serial_no.substring(0, 3);
String center_serial_no1=received_serial_no.substring(3);
//int new_serial_no=0;
int new_serial_no=Integer.parseInt(center_serial_no1);
new_serial_no=new_serial_no+1;
center_serial_no=center_serial_no+new_serial_no;}%>
<input type="hidden" name="srl_no" id="srl_no" value="<%= center_serial_no %>" />
<input id="" name="" type="text" value="<%=center_serial_no%>" disabled />
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="study_enrolment_no">Study enrolment No</label>
<input tabindex="2" id="study_enrolment_no" name="study_enrolment_no" type="text" />
</p>
</td>
<td>
<p>
<label for="nm">Name</label>
<input tabindex="3" id="nm" name="nm" type="text" />
</p>
</td>
<td>
<p>
<label for="age">Age</label>
<input tabindex="4" id="age" name="age" type="text"/>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="gender">Gender</label>
<!-- <input id="gender" name="gender" type="text" /> -->
<select id="gender" name="gender" tabindex="">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</p>
</td>
<td>
<p>
<label for="address">Address</label>
<input id="address" name="address" type="text" tabindex=""/>
</p>
</td>
<td>
<p>
<label for="ph_no">Phone No</label>
<input id="ph_no" name="ph_no" type="text" class="nocheck" tabindex=""/>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="occupation">Occupation</label>
<input id="occupation" name="occupation" type="text" tabindex=""/>
</p>
</td>
<td>
<p>
<label for="marital_status">Marital status</label>
<select id="maritial_status" name="maritial_status" tabindex="">
<option value="">Select</option>
<option value="Yes">Married</option>
<option value="No">Unmarried</option>
</select>
</p>
</td>
<td>
<p>
<label for="blood_gr">Blood group</label>
<input id="blood_gr" name="blood_gr" type="text" tabindex=""/>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label for="religion">Religion/Cast/Community</label>
<select id="religion" name="religion" class="nocheck" tabindex="">
<option value="">Select</option>
<option value="Hindu">Hindu</option>
<option value="Muslim">Muslim</option>
<option value="Christian">Christian</option>
<option value="Buddhist">Buddhist</option>
<option value="Other">Other</option>
</select>
</p>
</td>
<td>
<p>
<label for="vac_hbsag">Vaccinated for HBsAg</label>
<select id="vac_hbsag" name="vac_hbsag" tabindex="">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</p>
</td>
<td>
<p>
<label for="monthly_income">Monthly Income</label>
<input id="monthly_income" name="monthly_income" type="text" tabindex=""/>
</p>
</td>
</tr>
<tr>
<td colspan="3">
<p>
<label for="edu_level">Education level</label>
<select id="edu_level" name="edu_level" tabindex="">
<option value="">Select</option>
<%
while(rsLevel.next()){
%>
<option value="<%= rsLevel.getInt("id") %>"><%= rsLevel.getString("edu_name") %></option>
<%
}
%>
</select>
</p>
</td>
</tr>
</table>
</fieldset>
tell me how can i fix this problem. even though i have use tabindex but it is not working properly
Focus the initial element manually
document.getElementById("initFocus").focus();
and use tabindex, it works good. See the fiddle. Also read this - some interesting things about playing with tabindexes.