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?
Related
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.
I m trying to clone one div with some elements on a tag click event when clone is happening I am changing a tag to delete and bind click event. Whenever I add more clone I will remove a delete tag from all previous clone and keep it on last clone. when user click on last a tag with click event, I will remove last clone tag and add delete to previous clone which will become last clone.
Every thing works until when "delete to previous clone which will become last clone" but my delete a tag will stop working. Kindly let me know what I am doing wrong.
My jsfiddle https://jsfiddle.net/milindsaraswala/6mt29a6x/ (Sorry for not putting any css in my jsfiddle as it is huge)
Sample code of jQuery
$(document).ready(function () {
$(".addFlightBtn").click(function () {
$(".flightRows").append($(".flightRow:first").clone());
$(".flightRow").find(".exclude").removeClass("exclude");
var flightLength = $(".flightRows").children(".flightRow").length;
$(".flightRow:last").find("#lbFlight").html("Flight " + flightLength);
$(".flightRow:last").find(".addFlightBtn").addClass("exclude delFlightBtn").removeClass("addFlightBtn").html("Delete Flight");
$(".flightRow").not(':first').find('a').not('.exclude').remove();
$(".flightRow:last").find(".delFlightBtn").bind("click", function () {
$(this).closest(".flightRow").prev().find(".searchBtnHolder").html('Delete Flight');
$(this).closest(".flightRow").remove();
});
});
});
Your code is fine except use delegate event binding when you adding html
dynamically.
I have only changed your delete event handler this is how. Here's Working Fiddle
$(document).on("click", ".delFlightBtn", function() {
if ($(".flightRow").length > 2) {
$(this).closest(".flightRow").prev()
.find(".searchBtnHolder")
.html('Delete Flight');
}
$(this).closest(".flightRow").remove();
});
After fixing the event handler you will find another problem which is fixed by this line
if ($(".flightRow").length > 2) {
$(this).closest(".flightRow").prev()
.find(".searchBtnHolder")
.html('Delete Flight');
}
$(document).ready(function() {
$(".addFlightBtn").click(function() {
$(".flightRows").append($(".flightRow:first").clone());
$(".flightRow").find(".exclude").removeClass("exclude");
var flightLength = $(".flightRows").children(".flightRow").length;
$(".flightRow:last").find("#lbFlight").html("Flight " + flightLength);
$(".flightRow:last").find(".addFlightBtn").addClass("exclude delFlightBtn").removeClass("addFlightBtn").html("Delete Flight");
$(".flightRow").not(':first').find('a').not('.exclude').remove();
});
$(document).on("click", ".delFlightBtn", function() {
if ($(".flightRow").length > 2) {
$(this).closest(".flightRow").prev().find(".searchBtnHolder").html('Delete Flight');
}
$(this).closest(".flightRow").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="midcontainer pad20">
<div class="content-area fullWidth whiteBg">
<div class="pad15">
<div class="flightRows">
<div class="row flightRow">
<p><strong><span id="lbFlight">Flight 1</span></strong></p>
<div class="depCol1">
<label for="seldcity1" id="lbDeptCity">Departure city</label>
<br>
<select>
<option>Abu Dhabi (AUH)</option>
<option>Amman (AMM)</option>
<option>Bahrain (BAH)</option>
<option>Bangkok (BKK)</option>
<option>Beirut (BEY)</option>
<option>Cairo (CAI)</option>
<option>Thiruvananthapuram (TRV)</option>
</select>
</div>
<div class="depCol1">
<label for="seldcity2" id="lbArvlCity">Arrival city</label>
<br>
<select>
<option>Abu Dhabi (AUH)</option>
<option>Amman (AMM)</option>
<option>Bahrain (BAH)</option>
<option>Bangkok (BKK)</option>
<option>Beirut (BEY)</option>
<option>Cairo (CAI)</option>
<option>Thiruvananthapuram (TRV)</option>
</select>
</div>
<div class="depCol1">
<label for="selddate1" id="lbDeptDate">Departing</label>
<br />
<input name="selddate1" type="text" id="selddate1" autocomplete="off" class="datepicker calIcon hasDatepicker">
</div>
<div class="searchBtnHolder">Add another Flight</div>
<div class="clear"></div>
<hr />
</div>
</div>
<!--<div class="row">
<p><strong>Flight 2</strong></p>
<div class="depCol1">
<label for="seldcity1" id="lbDeptCity">Departure city</label><br>
<select>
<option>Abu Dhabi (AUH)</option>
<option>Amman (AMM)</option>
<option>Bahrain (BAH)</option>
<option>Bangkok (BKK)</option>
<option>Beirut (BEY)</option>
<option>Cairo (CAI)</option>
<option>Thiruvananthapuram (TRV)</option>
</select>
</div>
<div class="depCol1">
<label for="seldcity2" id="lbArvlCity">Arrival city</label><br>
<select>
<option>Abu Dhabi (AUH)</option>
<option>Amman (AMM)</option>
<option>Bahrain (BAH)</option>
<option>Bangkok (BKK)</option>
<option>Beirut (BEY)</option>
<option>Cairo (CAI)</option>
<option>Thiruvananthapuram (TRV)</option>
</select>
</div>
<div class="depCol1">
<label for="selddate1" id="lbDeptDate">Departing</label><br />
<input name="selddate1" type="text" id="selddate1" autocomplete="off" class="datepicker calIcon hasDatepicker">
</div>
<div class="searchBtnHolder">Delete Flight</div>
<div class="clear"></div>
<hr />
</div>-->
<div class="row">
<p><strong>Passengers</strong></p>
<div class="depCol1">
<label for="seladults" id="lbAdults">Adults</label>
<br>
<select name="seladults" id="seladults" class="wth70 noMargin">
<option value="1" selected="">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>
<option value="9">9</option>
</select>
<br>
<span class="ageCount" id="lbAge12">(Age 12+)</span>
</div>
<div class="depCol1">
<label for="selchildren" id="lbChildren">Children</label>
<br>
<select name="selchildren" id="selchildren" class="wth70">
<option value="0" selected="">0</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>
<br>
<span class="ageCount" id="lbChild">(Age 2-11)</span>
</div>
<div class="depCol1">
<label for="selinfants" id="lbInfants">Infants</label>
<br>
<select name="selinfants" id="selinfants" class="wth70">
<option value="0" selected="">0</option>
<option value="1">1</option>
</select>
<br>
<span class="ageCount" id="lbInfant">(Age <2)</span>
</div>
<div class="depCol1">
<label for="class" id="lbClass">Class</label>
<br>
<select name="selcabinclass" id="class" class="wth150">
<option selected="" value="0">Economy Class</option>
<option value="1">Business Class</option>
<option value="2">First Class</option>
</select>
</div>
<div class="depCol1">
<label for="payBy" id="lbpayBy">Pay By</label>
<br>
<select name="payBy" id="payBy" class="wth130">
<option value="KNET">K-Net</option>
<option selected="" value="CC">Credit Card</option>
</select>
</div>
<div class="depCol2">
<label for="promocode" id="lbPromoCode">Promo Code</label>
<br>
<input type="text" name="promocode" id="promocode" class="wth100 margin10">
</div>
<div class="clear"></div>
<br />
<br />
<div>
<input name="btnFindFlight" type="button" class="searchBtn" id="btnFindFlight" value="Find Flights">
</div>
<div class="clear"></div>
<hr />
</div>
</div>
</div>
</div>
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.
I have the following html code which uses twitter bootstrap framework, where I am not able to select the input fields,its focus gets removed when I click on it and also I am not able to select a radio button.Even if I select one,it moves to the first radio button and Im not able to select the second one.Please help me resolve this issue.And the main thing is that this is happening in firefox browser and in chrome and IE its working fine!
<form action="test.php" style="border: solid 1px #eee;box-shadow: 10px 10px 5px #888888;margin-top:20px" class="panel-body" method="POST" id="myForm" data-validate="parsley">
<div id="alert" style="display:none" class="alert alert-danger text-center">Please enter a valid card number !</div>
<div>
<div class="col-md-4">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC"><label for="radio43" class="css-label cb3">Credit Card</label>
</div>
<div class="col-md-4">
<input type="radio" name="cardType" id="one" class="" value="DB"><label for="radio53" class="css-label cb3">Debit Card</label>
</div>
<div class="col-md-4">
<img src="certificate.png" width="120" class="bw">
</div>
</div>
<!-- Card Payment -->
<div id="a">
<br>
<br>
<br>
<input type="hidden" id="ccType" name="ccType">
<ul style="float:right;display:none" class="cards">
<li class="visa"></li>
<li class="visa_electron"></li>
<li class="mastercard"></li>
<li class="maestro"></li>
</ul>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputEmail1">Card number</label>
<div class="fake-input">
<input type="text" class="form-control zwitch_data" autocomplete="off" data-required="true" data-trigger="change" id="ccnumber" name="ccnumber" onblur="testCreditCard () ">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputPassword1">CVV</label><input type="password" maxlength="4" class="form-control" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Month</label>
<select name="expiry_month" class="form-control" data-required="true" data-trigger="change">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Year</label>
<select name="expiry_year" class="form-control" data-required="true" data-trigger="change">
<option selected="" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputPassword1">Name on Card</label><input type="text" class="form-control" name="name_on_card" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="ak" value="">
<input type="hidden" name="amount" value="10.00">
<input type="hidden" name="app" value="Checkout">
<input type="hidden" name="orderID" value="123456">
<input type="hidden" name="email" value="">
<input type="hidden" name="mobileNo" value="9999999999">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block m-b-sm">Pay</button>
</div>
</div>
</div><!-- Card payments ends here -->
I don't see anything wrong with the code you posted, per se.
I personally prefer to wrap radio input buttons in the label tag without the for="" attribute. This makes it so clicking on the text also selects the radio button. Like so:
<label class="css-label cb3">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC">
Credit Card
</label>
I tested your code in this jsfiddle (granted, I added my radio button change) and it seems to work. There must be something else in your code that is causing the issue. You could try posting a link to your development website.
I encountered probably same problem. Don't use "contenteditable='true'" property.
ERROR EXAMPLE:
<div class="input" contenteditable="true">
<label for="RadioOne"><input type="radio" value="val1" name="radio" id="RadioOne">Radio 1</label>
<label for="RadioTwo"><input type="radio" value="val2" name="radio" id="RadioTwo">Radio 2</label>
</div>
In your case if it isn't "contenteditable" search for other attributes which could interfere.
I think the problem is in your question, not in the code. Radio buttons all have the same name and are treated as a group. This is why the first one is selected with a tab, then to get to individual buttons with the arrow keys. I might have misunderstood the question but I hope its useful.
g
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']");