Comboboxes do not select given value using Javascript

Comboboxes do not select given value using Javascript - javascript

I have 2 comboboxes and I want to select a specific item by specifying a value using JS but they don't seem to work.
these are the Comboboxes:
<div class="row">
<div class="col-sm-6 form-group">
<label for="email"> Estado:</label>
<select class="form-control" id="Estado" name="cbmEstado" required>
<option value="" selected="selected"></option>
<option value="1">Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Exonerado:</label>
<select class="form-control" id="Exonerado" name="cbmExonerado" required>
<option value="" selected="selected"></option>
<option value="1">Sí</option>
<option value="0">No</option>
</select>
</div>
</div>
this is the code to select the item in the Combobox:
<script type="text/javascript">
window.onload = function() {
document.getElementById('Exonerado').value =1;
document.getElementById('Estado').value =1;
}
</script>

Chrome seems to do exactly what you wanted. But I suspect that the real problem here is that you pass a Number and not a String.
If you wrap them in quotes like in the following code snippet, it works like a charm.
window.onload = function() {
document.getElementById('Exonerado').value = "1";
document.getElementById('Estado').value = "0";
}
<div class="row">
<div class="col-sm-6 form-group">
<label for="email"> Estado:</label>
<select class="form-control" id="Estado" name="cbmEstado" required>
<option value="" selected="selected"></option>
<option value="1">Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Exonerado:</label>
<select class="form-control" id="Exonerado" name="cbmExonerado" required>
<option value="" selected="selected"></option>
<option value="1">Sí</option>
<option value="0">No</option>
</select>
</div>
</div>

window.onload = function() {
document.getElementById('Exonerado').value = "1";
document.getElementById('Estado').value = "1";
}
<div class="row">
<div class="col-sm-6 form-group">
<label for="email"> Estado:</label>
<select class="form-control" id="Estado" name="cbmEstado" required>
<option value="" selected="selected"></option>
<option value="1">Activo</option>
<option value="0">Inactivo</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Exonerado:</label>
<select class="form-control" id="Exonerado" name="cbmExonerado" required>
<option value="" selected="selected"></option>
<option value="1">Sí</option>
<option value="0">No</option>
</select>
</div>
</div>
Now this will help you out from your query

There is no problem in the code so far, it should work without any problem.

Related

jQuery class doesn't add on changing the option of a select box

I have attributes (color, size) and their units(black,blue || 32cm,42cm).
I want when selecting the color from the select box it should open the first unit's select box (black, blue) and when to click on size then it should open the 2nd select box (32cm,42cm). I've done almost everything but not been able to get the expected result.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).children().attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>

You need to target only the selected option and its corresponding data-attr.
$(document).ready(function(){
//attr selector with options of units
$('.attr-selector').change(function(){
var data = $(this).find('option:selected').attr('data-link');
$('.unit-select').removeClass('active');
$('#'+data).addClass('active');
});
});
.unit-select{
display: none;
}
.unit-select.active{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--*** ATTR ****-->
<div class="col-2">
<div class="form-group">
<select class="form-control attr-selector">
<option>Select</option>
<option value="" data-link="1"><b>Color</b></option>
<option value="" data-link="2"><b>Size</b></option>
<option value="" data-link="3"><b>Space</b></option>
</select>
</div>
</div>
<!--***Units Of attr 1***-->
<div class="col-2 unit-select" id="1">
<div class="form-group">
<select class="form-control">
<option value=""><b>Red</b></option>
<option value="" ><b>Green</b></option>
<option value=""><b>Blue</b></option>
</select>
</div>
</div>
<!--***Units Of attr 2***-->
<div class="col-2 unit-select" id="2">
<div class="form-group">
<select class="form-control">
<option value=""><b>32</b></option>
<option value="" ><b>40</b></option>
<option value=""><b>42</b></option>
</select>
</div>
</div>
<!--***Units Of attr 3***-->
<div class="col-2 unit-select" id="3">
<div class="form-group">
<select class="form-control">
<option value=""><b>Color</b></option>
<option value="" ><b>Size</b></option>
<option value=""><b>Space</b></option>
</select>
</div>
</div>
</div>

How to send mp3 file with Text data to php using JQuery

I am trying to send form data along with MP3 file to PHP page using jQuery. I am facing a problem with MP3 file. Please see the below code for better understanding.
My HTML code
<form id="AddSongProcess" method="post" enctype="multipart/form-data">
<div class="col-md-9">
<div class="form-group label-floating">
<label class="control-label">Song Title</label>
<input id="song_title" type="text" class="form-control" name="songtitle" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<select name="alphbit" class="form-control" id="alphabit">
<option value="" selected disabled>Select Alphabit</option>
<option value"A">A</option>
<option value"Aa">Aa</option>
<option value"I">I</option>
<option value"EE">EE</option>
<option value"U">U</option>
<option value"Uu">Uu</option>
<option value"E">E</option>
<option value"EI">EI</option>
<option value"O">O</option>
<option value"Oo">Oo</option>
<option value"Ka">Ka</option>
<option value"Ga">Ga</option>
<option value"Cha">Cha</option>
<option value"Ja">Ja</option>
<option value"Tha">Tha</option>
<option value"Da">Da</option>
<option value"Na">Na</option>
<option value"Pa">Pa</option>
<option value"Ba">Ba</option>
<option value"Bha">Bha</option>
<option value"Ma">Ma</option>
<option value"Ya">Ya</option>
<option value"Ra">Ra</option>
<option value"La">La</option>
<option value"Va">Va</option>
<option value"Ssa">Ssa</option>
<option value"Sha">Sha</option>
<option value"Sa">Sa</option>
<option value"Ha">Ha</option>
</select>
</div>
</div>
<div class="col-md-9">
<div class="form-group label-floating">
<textarea id="song_lyrics" name="song_lyrics" class="form-control" rows="15" placeholder="Type Your Song here"></textarea>
</div>
</div>
<div class="col-md-9">
<div class="form-group label-floating">
<label class="control-label">Author Title</label>
<input id="author" type="text" class="form-control" name="author">
</div>
</div>
<div class="col-md-12">
<input id="audio" type="file" name="audio" accept="audio/*">
</div>
<p> </p>
<div id="loading"></div>
<div class="clearfix"></div>
<button type="submit" class="btn btn-primary pull-left" style="margin-left:20px;">Save Song</button>
</form>
and bellow is my jQuery
<script>
$('form#AddSongProcess').on('submit',function(e){
e.preventDefault();
tinyMCE.triggerSave();
var formData = new FormData($('#AddSongProcess')[0]);
var formData = $(this).serialize();
$('#loading').show();
$.ajax({
type:'post',
url:'new-songs-process.php',
fileElementId:'audio',
data:formData,
success: function(AddSong){
$('#loading').hide();
alert(AddSong);
//window.location = "dashboard.php";
}
});
});
</script>
I am getting resopnse of form data except mp3 file. I checked using print_r($_POST) and print_r($_FILES). How to send mp3 file to php page using jQuery?

HTML form with JS does not work properly in PHP

I have a form with JS where I hide and show form's fields after choosing option with radiobuttons.
<?php require_once 'resources/menus/adminMenu.php'; ?>
<div class="col-lg-offset-3 col-lg-6 ">
<div class="well bs-component">
<form class="form-group" method="post">
<fieldset>
<legend>Wyszukaj</legend>
<div class="form-group" style="display: block" id="queryIndex">
<label for="index" class="control-label">Indeks</label>
<input class="form-control" id="index" name="index" type="text">
</div>
<div class="form-group" style="display: none" id="queryName">
<label for="name" class="control-label">Imię</label>
<input class="form-control" id="name" name="name" type="text">
<label for="surname" class="control-label">Nazwisko</label>
<input class="form-control" id="surname" name="surname" type="text">
</div>
<div class="form-group" style="display: none" id="queryFaculty">
<label for="faculty" class="control-label">Wydział</label>
<select class="form-control" id="faculty" name="faculty" required="required">
<option value=""></option>
<option value="Wydział A">Wydział A</option>
<option value="Wydział B">Wydział B</option>
<option value="Wydział C">Wydział C</option>
<option value="Wydział D">Wydział D</option>
<option value="Wydział E">Wydział E</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySubject">
<label for="subject" class="control-label">Kierunek</label>
<select class="form-control" id="subject" name="subject" required="required">
<option value=""></option>
<option value="Kierunek AA">Kierunek AA</option>
<option value="Kierunek AB">Kierunek AB</option>
<option value="Kierunek AC">Kierunek AC</option>
<option value="Kierunek BA">Kierunek BA</option>
<option value="Kierunek BB">Kierunek BB</option>
<option value="Kierunek BC">Kierunek BC</option>
<option value="Kierunek CA">Kierunek CA</option>
<option value="Kierunek CB">Kierunek CB</option>
<option value="Kierunek CC">Kierunek CC</option>
<option value="Kierunek DA">Kierunek DA</option>
<option value="Kierunek DB">Kierunek DB</option>
<option value="Kierunek DC">Kierunek DC</option>
<option value="Kierunek EA">Kierunek EA</option>
<option value="Kierunek EB">Kierunek EB</option>
<option value="Kierunek EC">Kierunek EC</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySystem">
<label for="system" class="control-label">System</label>
<select class="form-control" id="system" name="system" required="required">
<option value=""></option>
<option value="st">Stacjonarne</option>
<option value="nst">Niestacjonarne</option>
</select>
</div>
<div class="form-group" style="display: none" id="queryDegree">
<label for="degree" class="control-label">Stopień</label>
<select class="form-control" id="degree" name="degree" required="required">
<option value=""></option>
<option value="I">1. stopień (inżynierskie/licencjat)</option>
<option value="II">2. stopień (magisterskie)</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySemester">
<label for="semester" class="control-label">Semestr</label>
<select class="form-control" id="semester" name="semester" required="required">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="form-group">
<input type="radio" name="search" value="index" checked="checked"
onClick="changeForm('queryIndex')"> Indeks
<input type="radio" name="search" value="name"
onClick="changeForm('queryName')"> Imię i nazwisko
<input type="radio" name="search" value="faculty"
onClick="changeForm('queryFaculty')"> Wydział
<input type="radio" name="search" value="subject"
onClick="changeForm('querySubject')"> Kierunek
<input type="radio" name="search" value="system"
onClick="changeForm('querySystem')"> System
<input type="radio" name="search" value="degree"
onClick="changeForm('queryDegree')"> Stopień
<input type="radio" name="search" value="semester"
onClick="changeForm('querySemester')"> Semestr
</div>
<script type="text/javascript">
function changeForm(element) {
document.getElementById('queryIndex').style.display = 'none';
document.getElementById('queryName').style.display = 'none';
document.getElementById('queryFaculty').style.display = 'none';
document.getElementById('querySubject').style.display = 'none';
document.getElementById('querySystem').style.display = 'none';
document.getElementById('queryDegree').style.display = 'none';
document.getElementById('querySemester').style.display = 'none';
document.getElementById(element).style.display = 'block';
}
</script>
<div class="form-group col-lg-4">
<div class="control-label">
<button type="submit" class="btn btn-primary" name="submit" value="searchStudent">Szukaj
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Also I have PHP file, where I get data from this form.
function studentWindow()
{
$this->setView("AdminPanel", "StudentWindow");
if (isset($_POST['submit']) && $_POST['submit'] == 'searchStudent') {
$query="";
$data=array();
if($_POST['search']=='index'){
$data['index']=sanitizeString($_POST['index']);
$query="st_index LIKE '?%'";
}
elseif($_POST['search']=='name'){
$data['name']=sanitizeString($_POST['name']);
$data['surname']=sanitizeString($_POST['surname']);
$query="name LIKE '?%' AND surname LIKE '?%'";
}
elseif($_POST['search']=='faculty'){
$data['faculty']=$_POST['faculty'];
$query='AS st INNER JOIN subject AS s ON st.id_subject=s.id_subject INNER JOIN faculty AS f ON s.id_faculty=f.id_faculty WHERE f.name=?';
}
elseif($_POST['search']=='subject'){
$data['subject']=$_POST['subject'];
$query='AS st INNER JOIN subject AS s ON st.id_subject=s.id_subject WHERE s.name=?';
}
elseif($_POST['search']=='system'){
$data['system']=$_POST['system'];
$query='system=?';
}
elseif($_POST['search']=='degree'){
$data['degree']=$_POST['degree'];
$query='degree=?';
}
elseif($_POST['search']=='semester'){
$data['semester']=$_POST['semester'];
$query='semester=?';
}
$this->loadModel("AdminPanel");
$model = new AdminPanelModel();
$model->getStudents($query,$data);
}
}
This is a problem. I can't get data from forms and also the button doesn't work. I made other forms like this but without JS. This may be the cause. Do you have any suggestions or solutions?
P.S. Sorry for my English ;)

The problem is using required='required' when the form fields are not required.
The user can submit at any time and it is not evident that you must click each radio button in turn to fill out that portion, if that was the intention.
I ran your code as plain HTML and examined the POST data in the Chrome Dev Tools and it works fine if you fill out all fields with required...
You will get an error in console that says the following:
An invalid form control with name='faculty' is not focusable.
Chrome is trying to focus the field to add error messages, but you set style.display = 'none' so it can't.

$(this).closest(("select[name*='FIELD2']") not working

I have this form:
<div id="div_id_form-0-FIELD1" class="form-group">
<label for="id_form-0-FIELD1" class="control-label col-sm-2">
Amount Type
</label>
<div class="controls col-sm-3">
<select class="select form-control" id="id_form-0-FIELD1" name="form-0-FIELD1">
<option value="">---------</option>
<option value="d" selected="selected">Dollars</option>
<option value="p">Percent of</option>
</select>
</div>
</div>
<div id="div_id_form-0-FIELD2" class="form-group">
<label for="id_form-0-FIELD2" class="control-label col-sm-2">
Deduct from total
</label>
<div class="controls col-sm-3">
<select class="select form-control" id="id_form-0-FIELD2" name="form-0-FIELD2">
<option value="" selected="selected">---------</option>
<option value="g">Gross Pay</option>
<option value="n">Net Pay</option>
<option value="h">Hourly Rate</option>
</select>
</div>
</div>
I haveFIELD1 in ($this), I want to get FIELD2. This is not getting it for me:
$(this).closest(("select[name*='FIELD2']")

Use the .next() method, like so:
$(this)
.closest("div.form-group")
.next("div.form-group")
.find("select[name*='FIELD2']");

Hide And show html tab with a drop down menu

here is my code ..i code a php page where i want, if we select scholarship status yes then some options show below like bank name , branch etc and if we select scholarship status no , then not show any option.
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
and if we select yes then show that options otherwise if we select no ..not show below options....
<div class="controls">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls">
<select id="" name="account number">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="<?php echo
set_value('accountnumber'); ?>" />
</div>

LIVE DEMO
$(document).ready(function() {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
});
$("select[name='Scholarship info']").change(function() {
var selectedVal = $(this).val();
if(selectedVal == 'yes') {
$("select[name='Bank name']").show();
$("select[name='Branch name']").show();
$("select[name='account number']").show();
$("input[name='acoountnumber']").show();
} else {
$("select[name='Bank name']").hide();
$("select[name='Branch name']").hide();
$("select[name='account number']").hide();
$("input[name='acoountnumber']").hide();
}
});

If you add an extra class, withScholarship to the divs you want to show and hide, it is gets even easier. See this JSFiddle
<div class="controls">
<select id="" name="Scholarship info">
<option value="">select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Bank name">
<option value="">select</option>
<option value="state bank">State bank</option>
<option value="Canera Bank">Canera bank</option>
</select>
</div>
<div class="controls withScholarship">
<select id="" name="Branch name">
<option value="">select</option>
<option value="amethi">amethi</option>
<option value="lucknow">lucknow</option>
</select>
</div>
<div class="controls withScholarship">
<input type="text" class="span6 typeahead" name="acoountnumber" placeholder="account number" value="121"/>
</div>
<script type="text/javascript">
$(".withScholarship").hide();
$("select[name='Scholarship info']").change(function() {
var flag = $(this).val() == "yes";
$(".withScholarship").toggle(flag);
})
</script>

We Keep Coding

JavaScript is the programming language of the Web.

Comboboxes do not select given value using Javascript - javascript

There is no problem in the code so far, it should work without any problem.

Related

jQuery class doesn't add on changing the option of a select box

How to send mp3 file with Text data to php using JQuery

HTML form with JS does not work properly in PHP

$(this).closest(("select[name*='FIELD2']") not working

Hide And show html tab with a drop down menu

Categories

Resources