I have a select box in html and Ajax which calls a php page that returns the values of the selected option.
The problem is that when I want to send data to another php page the selection that I got from the ajax call does not get sent.
Index code:
<!DOCTYPE html>
<html>
<head>
<title>Booking - Online Belt</title>
</head>
<body>
<center><h3>Book Your Private Transfer</h3>
<form action="./elabora.php" method="POST" id="formregservizio">
<p>DATA
<input type="date" name="data"/>
HOURS <select name="ore">
<option value="00" selected>00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="vuoto"></option>
</select>
Minuti:<select name="minuti">
<option value="00" selected>00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
Passeggeri:<select name="pax">
<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>
</select>
Large Bag<select name="large_bag">
<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>
</select>
Small Bag<select name="small_bag">
<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>
</select></p>
<!-- SEZIONE FROM -->
<p>FROM <select name="FROM" id="from">
<option value="vuoto">Select...</option>
<?php
include('./includedb.php');
$result = $conn->query("SELECT DISTINCT areak FROM weblocalita ORDER BY ordinamento ASC");
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['areak'].'">'.$row['areak'].'</option>';
}
?>
</select>
<!-- SEZIONE sub_FROM -->
<select name ="subfrom" id="subfrom">
<option value="vuoto">Select...</option>
</select>
</p>
<!-- SEZIONE TO -->
<p>FROM
<select name="to" id="to">
<option value="vuoto">Select...</option>
<?php
include('./includedb.php');
$result = $conn->query("SELECT DISTINCT areak FROM weblocalita ORDER BY ordinamento ASC");
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['areak'].'">'.$row['areak'].'</option>';
}
?>
</select>
<!-- SEZIONE sub_TO -->
<select name="subto" id="subto">
<option value="vuoto">Select...</option>
</select>
</p>
<input type="submit" name="submit" value="NEXT">
</form>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('#from').on('change',function(){
var scelta = $(this).val();
if(scelta){
$.ajax({
type:'POST',
url:'./update_status.php',
data:'scelta='+scelta,
success:function(html){
$('#subfrom').html(html);
}
});
}else{
$('#subfrom').html("<option>Errore</option>");
}
});
});
$(document).ready(function(){
$('#to').on('change',function(){
var sceltadestinazione = $(this).val();
var sceltadopo = $('#subfrom').val();
if(sceltadestinazione){
$.ajax({
type:'POST',
url:'./update_status.php',
data:'sceltadestinazione='+sceltadestinazione,
success:function(html){
$('#subTO').html(html);
}
});
}else{
$('#subto').html("<option>Errore</option>");
}
});
});
</script>
</center>
</body>
</html>
Then the PHP page that is called by the Ajax Request:
update_status.php
<?php
include('./includedb.php');
$area = $_POST['scelta'];
if($area == 'vuoto') {
echo '<option value="'."vuoto".'">'."Select...".'</option>';
}
$result = $conn->query("SELECT DISTINCT klocalita FROM weblocalita WHERE areak = '$area'");
while($row = mysqli_fetch_array($result)){
echo '<option value="'.$row['klocalita'].'">'.$row['klocalita'].'</option>';
}
$areadestinazione = $_POST['sceltadestinazione'];
$sceltadopo = $_POST['sceltadopo'];
if($areadestinazione == 'vuoto') {
echo '<option value="'."vuoto".'">'."Select...".'</option>';
}
$result = $conn->query("SELECT DISTINCT klocalita FROM weblocalita WHERE areak = '$areadestinazione'");
while($row = mysqli_fetch_array($result)){
echo '<option value="'.$row['klocalita'].'">'.$row['klocalita'].'</option>';
}
?>
And now from Index.php I want to send the data to another page in php called Elabora.php that should display all data sent.
Elabora.php
<center>
<h3>Configure Service</h3>
Dati Inseriti:<br>
Date: <?php echo $_POST['data']; ?>
Hours: <?php echo $_POST['ore']; ?>
Minutes: <?php echo $_POST['minuti']; ?>
Px: <?php echo $_POST['pax']; ?>
Large Bags: <?php echo $_POST['large_bag']; ?>
Small Bags: <?php echo $_POST['small_bag']; ?><br>
From: <?php echo $_POST['from'] . $_POST['subfrom'];?><br>
To: <?php echo $_POST['to'] . $_POST['subto'];?><br>
</center>
Now the problem is that the select boxes with the IDs: From and To are not sent to the elabora.php page.
Your Select need a name-attribute, if you want to get it through POST.
<select id="subTO">
<option value="vuoto">Select...</option>
</select>
should be:
<select id="subTO" name="subTo">
<option value="vuoto">Select...</option>
</select>
I also noticed:
<select name=TO id=to>
You're missing the "" here.
Related
This question has been asked on this forum multiple times. Yet every time I've applied the code and edited the fields to accommodate my code it doesn't seem to work. Essentially I'm trying to develop a list from a form, so once the fields are filled out and you click the add button. The info provided would populate in an ordered list below the form. Here is the following html and javascript code I've got so far. When I click the add button the information that was typed gets showed in the url bar after the original domain name, but it never makes a list.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<form id="lineInfo" onsubmit="return add()">
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<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>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
</form>
<ol id="list"></ol>
</body>
</html>
Well, your code works when run as a SO Snippet (see below), so we will need more info about the problem you're having before we can answer your question.
That said, I did notice that your new list item was adding twice, and this is because you are running the add() function twice: Once for the onclick handler on the button press, and once as the action of the form upon submit. So, we need to remove one of those... I bet that you'll end up wanting to keep the form, but my working code below removes the form (keeping the onclick on the button) because I bet that your problem is that, although your code works, you are refreshing your page with the form, clearing out the options that have been added to your list. If this sounds right to you then look into passing/fetching the new list items via GET params.
var list = document.getElementById('list');
function add(){
var name = document.getElementById('name').value;
var people = document.getElementById('people').value;
var phone = document.getElementById('phone').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(name + people + phone));
list.appendChild(entry);
return false;
}
<html>
<head>
<meta charset="UTF-8">
<title>Whiskey on Water</title>
<h1>Whiskey on Water: Waiting List</h1>
</head>
<body>
<fieldset>
<legend>Customer Information</legend>
<label for="name">Name*</label>
<input name="name" id="name" type="text" />
<label for="people">How many people?</label>
<input name="people" id="people" type="number" list="people1" />
<datalist id="people1">
<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>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</datalist>
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" type="tel"/>
<script src="wow.js"></script>
<button onclick='add ()' type="submit"> Add to List </button>
</fieldset>
<ol id="list"></ol>
</body>
</html>
This may help assuming each field has an id:
document.querySelector('#yourButton').addEventListener('click', function(e){
/* Stop the form from submiting if useful */
e.preventDefault();
/* get the values of fields one at a time */
var field1 = document.querySelector('#input1').value;
var field2 = document.querySelector('#input2').value;
...
/** prepare new node and insert */
var newNode = '<ul>'+'<li>'+field1+'</li>'+'<li>'+field2+'</li>'+'</ul>';
document.querySelector('body').appendChild(newNode);
});
The main mission was to add the values from two select dropdowns to one hidden input. That works great but now if a user decides to choose another input, it adds to the hidden input value rather than replace it.
Live Code: DEMO
$('#expireMM').change(function() {
var theMonth = $(this).val();
$("#expiry").val( theMonth )
})
$('#expireYY').change(function() {
var theYear = $(this).val();
$('#expiry').val($('#expiry').val() + "/" + theYear );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<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>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />
You can update the value of the #expiry input in an external function, and not based on the current value:
function getExpirationDate() {
var monthVal = $('#expireMM').val();
var yearVal = $('#expireYY').val();
if (monthVal && yearVal) {
$('#expiry').val(`${monthVal}/${yearVal}`);
} else if (monthVal) {
$('#expiry').val(monthVal);
}
console.log($('#expiry').val());
}
$('#expireMM').change(getExpirationDate)
$('#expireYY').change(getExpirationDate)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<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>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />
$("#expiry").val($("#expireMM").val() + "/" + $("#expireYY").val())
Why not generate you expiry input value on form submit?
Here is the code.
jQuery(document).ready(function($) {
$("#my-form").submit(function() {
var monthYearVal = $('#expireMM').val() + "/" + $('#expireYY').val();
$("#expiry").val(monthYearVal);
$(this).submit();
return false;
});
});
<form id="my-form" method="POST">
<table class="table">
<tr>
<td>
<select name="expireMM" id="expireMM">
<option value="">Month</option>
<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>
<select name="expireYY" id="expireYY">
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" /></tr>
</td>
<tr>
<tr>
<td colspan="2" align=center>
<input type="hidden" name="cvv">
<input class="right-col-inner-box" type="submit" value="Submit">
</td>
</tr>
</table>
</form>
I would like to know if there's a value in the Input. If there is, the NEXT button will display.
Here's my logic
$('.regform input').on('click', function() {
if($(".firstname").val()!="" && $(".email").val()!="" && $(".password").val()!="") {
$(".submit .myButton").css({
display: "block",
visibility: "visible"
}
)};
});
This is a 5 step form. Currently, the Next Button is display none. So when the step in on the Input type, the Next Button is display none. But when you insert values on Input type, the button will reveal.
Here's my html
<form id="regform" method="post" action="http://blahblah.com/signup">
<div class="steps step1">
<label>Your Gender?</label>
<div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man"></div>
</div>
<div class="woman-btn" value="2">
<span>Woman</span>
<div class="woman"></div>
</div>
</div>
</div>
<div class="steps step2">
<label>First Name:</label>
<input type="text" name="firstname">
</div>
<div class="steps step3">
<label>What is Your Date of Birth?</label>
<select name="dobday" id="dobday" class="required">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dobmonth" id="dobmonth" class="required">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dobyear" id="dobyear" class="required">
<option value="">Year</option>
<?php for($x=date("Y") - 18; $x >= 1918; $x--): ?>
<option value="<?php echo $x; ?>"><?php echo $x; ?></option>
<?php endfor; ?>
</select>
</div>
<div class="steps step4">
<label>Email:</label>
<input type="email" pattern="[^ #]*#[^ #]*" name="email">
</div>
<div class="steps step5">
<label>Password:</label>
<input type="password" name="password">
</div>
<div class="error">This field is required</div>
</form>
<div class="submit">
<input type="button" class="myButton" value="Next">
</div>
Please help me with this situation.
First you need to attach event handler to keypress event of inputs, click event won't work here. Then your selectors for inputs is wrong, you are using class selectors but you need to select using name. something like this works:
$('#regform input').on('keypress', function() {
if($("[name='firstname']").val()!="" && $("[name='email']").val()!="" && $("[name='password']").val()!="") {
$(".submit .myButton").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="regform" method="post" action="http://blahblah.com/signup">
<div class="steps step1">
<label>Your Gender?</label>
<div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man"></div>
</div>
<div class="woman-btn" value="2">
<span>Woman</span>
<div class="woman"></div>
</div>
</div>
</div>
<div class="steps step2">
<label>First Name:</label>
<input type="text" name="firstname">
</div>
<div class="steps step3">
<label>What is Your Date of Birth?</label>
<select name="dobday" id="dobday" class="required">
<option value="">Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dobmonth" id="dobmonth" class="required">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dobyear" id="dobyear" class="required">
<option value="">Year</option>
<?php for($x=date("Y") - 18; $x >= 1918; $x--): ?>
<option value="<?php echo $x; ?>"><?php echo $x; ?></option>
<?php endfor; ?>
</select>
</div>
<div class="steps step4">
<label>Email:</label>
<input type="email" pattern="[^ #]*#[^ #]*" name="email">
</div>
<div class="steps step5">
<label>Password:</label>
<input type="password" name="password">
</div>
<div class="error">This field is required</div>
</form>
<div class="submit">
<input type="button" class="myButton" value="Next" style="display:none;">
</div>
$('.regform input').on('click', function() {
if($(".firstname").val()!="" && $(".email").val()!="" && $(".password").val()!="") {
$(".submit .myButton").show();
)};
});
I have a small script, I did not made it, I want to modify it but Im stuck.
There are two select options, state and city. When state is selected ajax is bringing the specific cities for that state.
I have default value both for state and city but I cant trigger the city to change.
Here is the javascript
$("#state_id").change(function() {
$.ajax({
url: "<?php echo base_url() . "ajaxreq/getcity/"; ?>" + $("#state_id").val(),
success: function(result) {
$("#ajaxcity").html(result);
}
});
});
$('#state_id').trigger('change');
This is html part:
<div class="logininputfield">
<label><?php echo $this->lang->line('region') ?><span>*</span></label>
<div class="inputfieldsection">
<select name="state_id" id="state_id">
<option value=""><?= $this->lang->line("please_select"); ?> </option>
<?php foreach ($state as $key => $state_name) { ?>
<option value="<?php echo $key; ?>" <?php if ($state_id == $key ) { ?> selected <?php } ?> ><?php echo $state_name; ?></option>
<?php } ?>
</select>
<span for="state_id" class="error"></span>
</div>
</div>
<div class="logininputfield">
<label><?php echo $this->lang->line('city') ?><span>*</span></label>
<div class="inputfieldsection">
<span id="ajaxcity">
<select name="city" id="city" class="input span6">
<option value=""><?php echo $this->lang->line('please_select'); ?></option>
</select>
</span>
<span for="city" class="error"></span>
</div>
</div>
The result is this:
<div class="inputfieldsection">
<span id="ajaxcity"> <select name="city_id" id="city_id" class="valid">
<option value="102">München</option>
<option value="103">Nürnberg</option>
<option value="104">Augsburg</option>
<option value="105">Regensburg</option>
<option value="106">Ingolstadt</option>
<option value="107">Würzburg</option>
<option value="108">Fürth</option>
<option value="109">Erlangen</option>
<option value="110">Bayreuth</option>
<option value="111">Bamberg</option>
<option value="112">Aschaffenburg</option>
<option value="113">Landshut</option>
<option value="114">Kempten (Allgäu)</option>
<option value="115">Rosenheim</option>
<option value="116">Neu-Ulm</option>
<option value="117">Schweinfurt</option>
<option value="118">Passau</option>
<option value="119">Freising</option>
<option value="120">Dachau</option>
<option value="121">Straubing</option>
<option value="122">Hof</option>
<option value="123">Memmingen</option>
<option value="124">Kaufbeuren</option>
<option value="125">Weiden in der Oberpfalz</option>
<option value="126">Amberg</option>
<option value="127">Coburg</option>
<option value="128">Ansbach</option>
<option value="129">Schwabach</option>
<option value="130">Germering</option>
<option value="131">Neumarkt in der Oberpfalz</option>
<option value="132">Erding</option>
<option value="133">Fürstenfeldbruck</option>
<option value="134">Deggendorf</option>
<option value="135">Forchheim</option>
<option value="136">Friedberg</option>
<option value="137">Neuburg an der Donau</option>
<option value="138">Landsberg am Lech</option>
<option value="139">Schwandorf</option>
<option value="140">Königsbrunn</option>
<option value="141">Unterschleißheim</option>
<option value="142">Kulmbach</option>
<option value="143">Olching</option>
<option value="144">Garmisch-Partenkirchen</option>
<option value="145">Lauf an der Pegnitz</option>
<option value="146">Zirndorf</option>
<option value="147">Lindau</option>
<option value="148">Pfaffenhofen an der Ilm</option>
<option value="149">Roth</option>
<option value="150">Geretsried</option>
<option value="151">Unterhaching</option>
<option value="152">Herzogenaurach</option>
<option value="153">Starnberg</option>
<option value="154">Waldkraiburg</option>
<option value="155">Vaterstetten</option>
<option value="156">Senden</option>
<option value="157">Weilheim in Oberbayern</option>
<option value="158">Sonthofen</option>
<option value="159">Neusäß</option>
<option value="160">Gersthofen</option>
<option value="161">Bad Kissingen</option>
<option value="162">Ottobrunn</option>
<option value="163">Aichach</option>
<option value="164">Puchheim</option>
<option value="165">Kitzingen</option>
<option value="166">Traunreut</option>
<option value="167">Gauting</option>
<option value="168">Lichtenfels</option>
</select><span for="city_id" class="error"></span>
</span>
<span for="city" class="error"></span>
</div>
I'm a noob with javascript.
I added myself the trigger part and it works but I dont know how to make it work for the city.
It would be something like this but is it doesnt work.
$('#city_id').val(<? echo $city_id; ?>).trigger('change');
Thank you in advance.
This was the answer i was looking for
<?php foreach ($city as $key => $city_name) { ?>
<option value="<?php echo $key; ?>" <?php if($city_id == $key) {?> selected <?php } ?> ><?php echo $city_name; ?></option>
<?php } ?>
I have a click event on that works great in firefox and ie 9. The idea is basically to take a selection from a dropdown and push the value into an array then show it in a div. If the value is empty then empty the array and the div. On click of "submitList" parse the list in php.
Is there a better way to do this that is compatible with all browsers?
The HTML / PHP looks like this...
$chart_query = mysql_query("SELECT id, title FROM songs WHERE team_name='$team_name' ORDER BY title ASC");
while($row = mysql_fetch_array($chart_query)){
$song_id = $row['id'];
$song_title = $row['title'];
$song_chart .= '<div align="left" class="song_links">';
if ($logOptions_id == $admin_id) {
$song_chart .= '<div id="songChart'.$song_id.'" style="border-bottom:1px dotted gray;">
<select name="selection" class="selection">
<option></option>
<option value="01-'.$song_id.'&'.$song_title.'">1</option>
<option value="02-'.$song_id.'&'.$song_title.'">2</option>
<option value="03-'.$song_id.'&'.$song_title.'">3</option>
<option value="04-'.$song_id.'&'.$song_title.'">4</option>
<option value="05-'.$song_id.'&'.$song_title.'">5</option>
<option value="06-'.$song_id.'&'.$song_title.'">6</option>
<option value="07-'.$song_id.'&'.$song_title.'">7</option>
<option value="08-'.$song_id.'&'.$song_title.'">8</option>
<option value="09-'.$song_id.'&'.$song_title.'">9</option>
<option value="10-'.$song_id.'&'.$song_title.'">10</option>
<option value="11-'.$song_id.'&'.$song_title.'">11</option>
<option value="12-'.$song_id.'&'.$song_title.'">12</option>
<option value="13-'.$song_id.'&'.$song_title.'">12</option>
<option value="14-'.$song_id.'&'.$song_title.'">14</option>
<option value="15-'.$song_id.'&'.$song_title.'">15</option>
</select>
– '.$song_title.' <img src="../images/loading.gif" id="chartDeletingpic'.$song_id.'" style="display:none;" /> delete</div></div>';
} else {
$song_chart .= ' – '.$song_title.'</div>';
}
}
Here is another portion...
<div id="selectionButton" style="display:none; width:96%; clear:both; padding:3px 10px;">
<label>List-Date</label><br />
<select name="list_month_New" class="formFields" id="list_month_New">
<option value=""></option>
<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>
<select name="list_day_New" class="formFields" id="list_day_New">
<option value=""></option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="list_year_New" class="formFields" id="list_year_New">
<option value=""></option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select><br />
<div>
<div id="selected_songs" style="clear:both; padding:5px 0px; color:#225c7e;">
</div>
<div style="width:100%; background-color:#F3F3F3; border:1px solid #D1D1D1;">
<div align="right">
<img src="../images/loading.gif" id="songListLoading_New" style="display:none;" />
<input id="submitList" type="submit" value="submit" class="submit" style="margin:0px;" />
</div>
</div>
</div>
</div>
<div id="selectionBox" style="width:96%; clear:both; padding:3px 10px;">'.$song_chart.'</div>
<input name="team_name" id="team_name" type="hidden" value="'.$team_name.'" /><br />
</div>';
This is the jquery...
$(document).ready(function(){
$(".selection").val("");
$("#list_month_New").val("");
$("#list_day_New").val("");
$("#list_year_New").val("");
$(".selection option").click(function(){
s = [];
$("#selectionBox select option:selected").each(function(){
$("#selected_songs").text('');
var v = $(this).val();
if(v != ''){
s.push(v);
}
if(s != ""){
$('#selectionButton').show();
}else{
$("#list_month_New").val();
$("#list_day_New").val();
$("#list_year_New").val();
$('#selectionButton').hide();
}
});
s.sort();
jQuery.each(s, function(){
O = "";
O = this+"<br />";
str = /&(.+)/.exec(O)[1];
num = O.replace(/\-.*/, '');
fullString = '<span style="color:black">'+num+'</span> - '+str;
$("#selected_songs").append(fullString);
});
$("#submitList").click(function(){
if(s != ""){
$("#songListLoading_New").show();
var m = $("#list_month_New").val();
var d = $("#list_day_New").val();
var y = $("#list_year_New").val();
var n = "<?php echo $team_name; ?>";
if(m == "" || d == "" || y == ""){
alert("You must include an entire date");
$(".selection").val("");
$("#selected_songs").text("");
$('#selectionButton').hide();
$("#songListLoading_New").hide();
$("#list_month_New").val("");
$("#list_day_New").val("");
$("#list_year_New").val("");
s = '';
}else{
$.post('scripts/sendList.php?id=<?php echo $id; ?>', {s:s, m:m, d:d, y:y, n:n}, function(data){
$(".list").prepend(data);
$(".list").slideDown(900);
$(".selection").val("");
$("#selected_songs").text("");
$('#selectionButton').hide();
$("#list_month_New").val("");
$("#list_day_New").val("");
$("#list_year_New").val("");
$("#songListLoading_New").hide();
}); s = '';
}
}
});
});
});
The problem was with the .selection and #selectionBox. For some reason it was getting confused and there was a conflict in other browsers.