I make four horizontal dropdown menu. Here is my code :
<div class="MenuSearching" id="Searching">
<div class="Menu1" id="Menu1">
<p> Lembaga</p>
<form style="margin-top:-20px;margin-left:-2px;">
<select name="DropLembaga" autofocus required id="DropLembaga">
<option value="no" selected="selected">---Choose one---</option>
<option value="FlashCom">FlashCom</option>
<option value="InterNusa">InterNusa</option>
<option value="HexaCompare">HexaCompare</option>
</select>
</form>
</div>
<div class="Menu2" id="Menu2">
<p> Paket Kursus</p>
<form style="margin-top:-20px;margin-left:-2px;">
<select name="DropBahasa" autofocus required id="DropBahasa">
<option value="no" selected="selected">---Choose one---</option>
<option value="web">Kursus Web Design</option>
<option value="flash">Kursus Flash Animation</option>
<option value="marketing">Kursus Internet Marketing</option>
</select>
</form>
</div>
<div class="Menu3" id="Menu3">
<p> Lokasi</p>
<form style="margin-top:-20px;margin-left:-3px;">
<select name="DropLokasi" autofocus required id="DropLokasi">
<option value="no" selected="selected">---Choose one---</option>
<option value="timur">Surabaya Timur</option>
<option value="barat">Surabaya Barat</option>
<option value="utara">Surabaya Utara</option>
<option value="selatan">Surabaya Selatan</option>
</select>
</form>
</div>
<div class="Menu4" id="Menu4">
<p> Harga</p>
<form style="margin-top:-20px;margin-left:-2px;">
<select name="DropHarga" autofocus required id="DropHarga">
<option value="no" selected="selected">---Choose one---</option>
<option value="harga1"> kurang dari Rp.750.000</option>
<option value="harga2">Rp.750.000 - Rp.1.500.000</option>
<option value="harga3">Rp.1.500.000 - Rp.2.500.000</option>
<option value="harga4">lebih dari Rp.2.500.000</option>
</select>
</form>
</div>
<div>
<input name="submitbutton" type="submit" id="submitbutton" formmethod="POST" value="search">
</div>
</div>
My question, how to make the submit button from these multiple dropdown (and get the results)?
Is my code above efficient?
Thank you for the answer!
First thing would be to change your form tags to divs to keep your formatting.
<div class="Menu1" id="Menu1">
<p> Lembaga</p>
<div style="margin-top:-20px;margin-left:-2px;">
<select name="DropLembaga" autofocus required id="DropLembaga">
<option value="no" selected="selected">---Choose one---</option>
<option value="FlashCom">FlashCom</option>
<option value="InterNusa">InterNusa</option>
<option value="HexaCompare">HexaCompare</option>
</select>
</div>
</div>
Next you will need to surround your entire form with <form></form> tags. I would place the open form tag just below the opening of your first div.
<div class="MenuSearching" id="Searching">
<form action="" method="post">
<div class="Menu1" id="Menu1">
.
.
.
</div>
<div class="Menu2" id="Menu2">
.
.
.
</div>
<div class="Menu3" id="Menu3">
.
.
.
</div>
<div class="Menu4" id="Menu4">
.
.
.
</div>
<div>
<input name="submitbutton" type="submit" id="submitbutton" formmethod="POST" value="search">
</div>
</form>
</div>
Related
I have a database driven table where the last column in the table contains a form that repeats for each row. I want to have a day_inperson field show if the value in the spring_2021_status field is equal to "Both" Since the form is repeated on the page, it doesn't work.
Here is my code for the repeating form. The form itself works fine and inserts into the database. Just need the one field to show if it meets the value of "Both":
<form id="update_location" name="update_location" method="POST">
<div class="form-group">
<br>
<strong>Select a New Location:</strong>
<select class="form-control" id="spring_2021_status" name="spring_2021_status">
<option></option>
<option value="In Person" <?php if (!(strcmp('In Person', ($survey->getColumnVal("spring_2021_status"))))) { echo "selected=\"selected\"";} ?>>In Person</option>
<option value="Remote" <?php if (!(strcmp('Remote', ($survey->getColumnVal("spring_2021_status"))))) {echo "selected=\"selected\"";} ?>>Remote</option>
<option value="Both" <?php if (!(strcmp('Both', ($survey->getColumnVal("spring_2021_status"))))) {echo "selected=\"selected\"";} ?>>Both</option>
<option value="N/A" <?php if (!(strcmp('N/A', ($survey->getColumnVal("spring_2021_status"))))) {echo "selected=\"selected\"";} ?>>N/A</option>
</select>
<br>
<script>
$('#spring_2021_status').on('change',function(){
if( $(this).val()==="Both"){
$("#update_status2").show()
}
else{
$("#update_status2").hide()
}
});
</script>
<div class="row" id="update_status2" style="display:none;">
<div class="col mb-2"><label for="days_inperson"><strong>Which days?</strong> (Hold down CTRL to select multiple ones)</label>
<select multiple class="form-control" id="days_inperson" name="days_inperson">
<option value="Mon">Mon</option>
<option value="Tues">Tues</option>
<option value="Wed">Wed</option>
<option value="Thurs">Thurs</option>
<option value="Fri">Fri</option>
</select>
</div>
</div>
<strong>Add Note:</strong>
<textarea id="notes" name="notes" rows="4" cols="50">
<?php echo($survey->getColumnVal("notes")); ?></textarea>
</div>
<input type="hidden" value="<?php echo($survey->getColumnVal("theein")); ?>" name="ein" id="ein">
<button type="submit" name="submit3" id="submit3" class="btn btn-info">Update Location Status</button>
</form>
You can use class selector inside your div update_status2 then whenever your select-box gets change use $(this).closest('form').find().. this line will get closest form from select-box and then find your div which you need to show/hide.
Demo Code :
//onchange of sleect
$('[name=spring_2021_status]').on('change', function() {
if ($(this).val() === "Both") {
//get closest form tag and then find your div
$(this).closest('form').find(".update_status2").show()
} else {
$(this).closest('form').find(".update_status2").hide()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="update_location" name="update_location" method="POST">
<div class="form-group">
<br>
<strong>Select a New Location:</strong>
<select class="form-control" name="spring_2021_status">
<option></option>
<option value="In Person" selected>In Person</option>
<option value="Remote">Remote</option>
<option value="Both">Both</option>
<option value="N/A">N/A</option>
</select>
<br>
<!--added class-->
<div class="row update_status2" style="display:none;">
<div class="col mb-2"><label for="days_inperson"><strong>Which days?</strong> (Hold down CTRL to select multiple ones)</label>
<select multiple class="form-control" id="days_inperson" name="days_inperson">
<option value="Mon">Mon</option>
<option value="Tues">Tues</option>
<option value="Wed">Wed</option>
<option value="Thurs">Thurs</option>
<option value="Fri">Fri</option>
</select>
</div>
</div>
<strong>Add Note:</strong>
<textarea id="notes" name="notes" rows="4" cols="50">
something...</textarea>
</div>
<input type="hidden" value="abc" name="ein" id="ein">
<button type="submit" name="submit3" id="submit3" class="btn btn-info">Update Location Status</button>
</form>
<form id="update_location" name="update_location" method="POST">
<div class="form-group">
<br>
<strong>Select a New Location:</strong>
<select class="form-control" name="spring_2021_status">
<option></option>
<option value="In Person" selected>In Person</option>
<option value="Remote">Remote</option>
<option value="Both">Both</option>
<option value="N/A">N/A</option>
</select>
<br>
<div class="row update_status2" style="display:none;">
<div class="col mb-2"><label for="days_inperson"><strong>Which days?</strong> (Hold down CTRL to select multiple ones)</label>
<select multiple class="form-control" id="days_inperson" name="days_inperson">
<option value="Mon">Mon</option>
<option value="Tues">Tues</option>
<option value="Wed">Wed</option>
<option value="Thurs">Thurs</option>
<option value="Fri">Fri</option>
</select>
</div>
</div>
<strong>Add Note:</strong>
<textarea id="notes" name="notes" rows="4" cols="50">
something...</textarea>
</div>
<input type="hidden" value="abc" name="ein" id="ein">
<button type="submit" name="submit3" id="submit3" class="btn btn-info">Update Location Status</button>
</form>
I'm having some trouble passing the value of some HTML elements to PHP variable. I have a PHP web app where I give the users some drop down option. What I want to do is after the user has selected the option I give than to click on a button and make some calculations based on his/her selection.
I have tried using the POST and GET method but because I'm new to php I probably did it wrong. I also try with ids but no results.
Here is the HTML code
The 1st dropdown menu :
<div>
<select id="kleidwma" onchange="kleidwmata_change(this.value);kwdikos();ypsos();"
class="form-control selectpicker kleidwmata" data-size="10" data-
style="btn-white" name="guard_kleidwmata" required >
<option value="" > </option>
<option value="12">12 MS</option>
<option value="14">14 KETE</option>
<option value="15">15 ARRIKTON</option>
<option value="16">16 KETE</option>
<option value="22">22 KETE</option>
</select>
</div>
The 2nd dropdown menu :
<div>
<select id="sigkratisi" onchange="kwdikos()" name="sigkratisi"
class="form-control sigkratisi" required>
<option value="" ></option>
<option value="metalliki" >Μεταλλική</option>
<option value="xilogonia" >Ξυλογωνία</option>
</select>
</div>
Here is the button to be clicked after the selection has been made :
<div class="row" style="margin-top:20px; margin-left: 235px;">
<div class="col-md-7">
<input type="hidden" name="tmp_calculate" value="pending" />
<button onclick="calculate()" type="button" class="btn btn-success" >
<?php echo "Υπολογισμός";?></button>
</div>
</div>
And finally here is the function that is called :
function calculate()
{
$var1 = sigkratisi;
$var2 = kleidwma;
"code to be executed base on the var1 and var2"
}
I hope it's clear enough.
Thanks in advance for your time
you can use Forms
<form name="f" action="" method="POST">
<div>
<select id="kleidwma" name="variable"
class="form-control selectpicker kleidwmata" data-size="10" data-
style="btn-white" name="guard_kleidwmata" required >
<option value="" > </option>
<option value="12">12 MS</option>
<option value="14">14 KETE</option>
<option value="15">15 ARRIKTON</option>
<option value="16">16 KETE</option>
<option value="22">22 KETE</option>
</select>
<input type="submit" value="submit" />
</div>
</form>
in PHP
<?php
if(isset($_POST['variable']))
{
echo $_POST['variable'];
}
?>
Friends, I have the following question:
The following code below finds the next element from the clicked select:
<div class="caixa-dependentes2">
<select name="campo0[1]" id="campo0[1]" class="form-control aa" required>
<option value="Habilitado">Habilitado</option>
<option value="Desabilitado">Desabilitado</option>
</select>
<input name="campo1[1]" class="bb" value="teste1" />
<input name="campo2[1]" class="cc" value="teste2" />
<br><br>
<select name="campo0[2]" id="campo0[2]" class="form-control aa" required>
<option value="Habilitado">Habilitado</option>
<option value="Desabilitado">Desabilitado</option>
</select>
<input name="campo1[2]" class="bb" value="test3" />
<input name="campo2[2]" class="cc" value="teste4" />
</div>
It works perfectly.
The problem is that by including the divs formatting daughters in the field, it can not find more the next element, showing them as undefined, please see the code:
<div class="caixa-dependentes2">
<div>
<select name="campo0[1]" id="campo0[1]" class="form-control aa" required>
<option value="Habilitado">Habilitado</option>
<option value="Desabilitado">Desabilitado</option>
</select>
</div>
<div><input name="campo1[1]" class="bb" value="teste1" /></div>
<div><input name="campo2[1]" class="cc" value="teste2" /></div>
<div class="clearfix"></div>
<div>
<select name="campo0[2]" id="campo0[2]" class="form-control aa" required>
<option value="Habilitado">Habilitado</option>
<option value="Desabilitado">Desabilitado</option>
</select>
</div>
<div><input name="campo1[2]" class="bb" value="test3" /></div>
<div><input name="campo2[2]" class="cc" value="teste4" /></div>
</div>
My jquery:
$('.caixa-dependentes2').on('change', '.aa', function(){
var proximo = $(this).nextAll('.bb').eq(0).val();
alert(proximo);
});
What was the mistake I made?
You can find next .bb element this way (not impossible, but EZ with jQuery):
$('.caixa-dependentes2').on('change', '.aa', function(){
/* your select element > one parent > next sibling > find .bb */
var proximo = $(this).parent().next().find('.bb').val();
alert(proximo);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="caixa-dependentes2">
<div>
<select name="campo0[1]" id="campo0[1]" class="form-control aa" required>
<option value="Habilitado">Habilitado</option>
<option value="Desabilitado">Desabilitado</option>
</select>
</div>
<div>
<input name="campo1[1]" class="bb" value="teste1" />
</div>
<div>
<input name="campo2[1]" class="cc" value="teste2" />
</div>
<div class="clearfix"></div>
<div>
<select name="campo0[2]" id="campo0[2]" class="form-control aa" required>
<option value="Habilitado">Habilitado</option>
<option value="Desabilitado">Desabilitado</option>
</select>
</div>
<div>
<input name="campo1[2]" class="bb" value="test3" />
</div>
<div>
<input name="campo2[2]" class="cc" value="teste4" />
</div>
</div>
Also on JSFiddle
I would also suggest you group/wrap the select box with inputs this way. That way you won't care where the .bb or .cc is located in document tree, you just go up to closest() wrapper and find() the text input with class specified.
I'm using Contao as CMS and for a filter, I need to build my own select.
This is my Code, what is working so fare:
<form action="media-center" id="cc_filter_339" name="cc_filter_339" method="get" enctype="application/x-www-form-urlencoded" onchange="this.submit();">
<div class="formbody">
<select class="" name="language">
<option value="language_reset">Sprache</option>
<option value="de">Deutsch</option>
<option value="en">English</option>
<option value="fr">Français</option>
<option value="nl">Nederlands</option>
</select>
<div class="widget submit_container clearall clear_all_filters">
<input type="submit" id="ctrl_cc_filter_339_clearall" class="submit clearall clear_all_filters" value="Filter zurücksetzten" name="cc_filter_339_clearall">
</div>
</div>
</form>
The only problem is, the option "Sprache" is always selcted, it dosnt mater which option I click.
I hope you guys can help my with that.
You need to check $_GET value and then add selected attribute to your options. Do like below:-
<form action="media-center" id="cc_filter_339" name="cc_filter_339" method="get" enctype="application/x-www-form-urlencoded" onchange="this.submit();">
<div class="formbody">
<select class="" name="language">
<option value="language_reset" <?php if(isset($_GET['language']) && $_GET['language']=='anguage_reset'){echo "selected";}?>>Sprache</option>
<option value="de" <?php if(isset($_GET['language']) && $_GET['language']=='de'){echo "selected";}?>>Deutsch</option>
<option value="en" <?php if(isset($_GET['language']) && $_GET['language']=='en'){echo "selected";}?>>English</option>
<option value="fr" <?php if(isset($_GET['language']) && $_GET['language']=='fr'){echo "selected";}?>>Français</option>
<option value="nl" <?php if(isset($_GET['language']) && $_GET['language']=='nl'){echo "selected";}?>>Nederlands</option>
</select>
<div class="widget submit_container clearall clear_all_filters">
<input type="submit" id="ctrl_cc_filter_339_clearall" class="submit clearall clear_all_filters" value="Filter zurücksetzten" name="cc_filter_339_clearall">
</div>
</div>
</form>
<form name="payment_info" id="payment_info" action="https://www.myvirtualmerchant.com/VirtualMerchant/process.do" method="post" >
<div class="check_form_cover">
<div class="check_form_txt fleft">Account Number:</div>
<div class="check_form_field fleft"><input name="ssl_card_number" id="ssl_card_number" type="text" class="check_form_field1" /></div>
<div class="clear"></div>
</div>
<div class="check_form_cover">
<div class="check_form_txt fleft">Expiry Date:</div>
<div class="check_form_field fleft"><select name="month" id="month" onchange="setOptions(document.payment_info.month.value);">
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="year" id="year">
<option value="">Year</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
</div>
<div class="clear"></div>
</div>
<input type="hidden" name="ssl_show_form" id="ssl_show_form" value="TRUE">
<input type="hidden" name="ssl_show_form" id="ssl_show_form" value="TRUE">
<input type="hidden" name="ssl_amount" id="ssl_amount" value="'.$total.'">
<input type="hidden" name="ssl_cvv2cvc2_indicator" id="ssl_cvv2cvc2_indicator" value="Present">
<div class="check_form_cover">
<div class="check_form_txt fleft">CVV Number:</div>
<div class="check_form_field fleft"><input name="ssl_cvv2cvc2" id="ssl_cvv2cvc2" type="text" class="check_form_field1" /></div>
<div class="clear"></div>
</div>
<div class="check_form_cover">
<div class="check_form_txt fleft"></div>
<div class="check_form_field fleft" align="right">
<input type="image" src="images/pay_now.jpg" name="payment" id="payment" value="Pay" alt="Pay">
</div>
<div class="clear"></div>
</div>
To combine the values dropdown boxes named month and year and combine them in the same form as a hidden field.
It's pretty hard to understand your question, and I'm not sure if it has any thing to do mysql.
It is combined as long as you have all the "input" under the same "form".
Hope that make sense.