I am trying to be able to change the value of a hidden field from multiple combo boxes.
Here is the example, I want to generate the value of the hidden field name="myNumbers" with the three previous select elements delimited by |.
How can I do this? with jQuery changing the .val() or with .attr() or maybe with a simple variable in PHP?
<select name="element1">
<option value="">Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option selected value="3">3</option>
<option value="4">4</option>
</select>
<select name="element2">
<option selected value="">Select One</option>
<option value="1">1</option>
<option selected value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="element2">
<option selected value="">Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option selected value="4">4</option>
</select>
<input type="hidden" name="myNumbers" value="3|2|4">
This will do what you want...
$(function(){
var str = $('element1').val() + '|' + $('element2').val() + '|' + $('element3').val()
$("[name='myNumbers']").val(str)
})
EDIT
A more complete solution that will iterate over every select element on the page
$(function(){
$('select').change(function(e){
var myNumbers = [];
$('select').each(function(){
myNumbers.push($(this).val());
})
$("[name='myNumbers']").val(myNumbers.join('|'));
});
});
Here it is http://jsfiddle.net/fuhQx/
You have to have an onChange function for each drop down that calls updateMyNumbers function
function updateMyNumbers() {
$("#myNumbers#").val(("#element1").val() +"|"+("#element2").val()+"|"+("#element3").val());
}
var select = document.getElementById('#element1');
var index = select.selectedIndex;
With this code, you can build the string for the hidden input
If you are wanting to set it once at the time the page is loaded, it would make sense to do it in php (see answers above).
If you want to do it whenever a user changes one of the selects, then you would want to use javascript (jQuery is one good way) to do that in response to an onChange event for any of those selects.
If you just want to do it when the form is submitted, you could also just use javascript (perhaps jQuery in particular) to do it as part of a general form validation for the onsubmit event.
If you want it to happen just prior to using the form values to store something in your database, again you would do it in php once the user has selected things and hit Submit. But then you really don't need the hidden value at all, you can just create it in php after you have the form submitted.
You would have to use javascript as php is run server-side, so before the page is loaded or after it has been submitted.
In text: You would have to capture the change events of the select boxes, generate your string and put that string in the hidden element.
Untested code:
$("select").change(function(){
var desired_value = $("[name='element1']").val() + "|" + $("[name='element2']").val() + "|" + $("[name='element3']").val();
$("[name='myNumbers']").val(desired_value);
});
Related
The option choosen by the user from select box, it have to be send to the desired php file (getStatus.php) may be with get method or post method but without using form submit button
<select name="status">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
</select>
Go
You will have a var called $_POST['status'] or $_GET['status'] with the value equal to the value of the selected option. Without more code that's about all I can tell you.
EDIT: This will need to be made in a form with the action attribute set to getStatus.php and preferably a method of POST. There will not be any way around using a form if you want to pass data to another page unless you pass the data with AJAX. Why are forms not an option?
use javascript for this :-
<select name="status" id="myselect">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
</select>
Go
<script>
function click_me(){
var selects = document.getElementById("myselect");
var selectedValue = selects.options[selects.selectedIndex].value;// will gives u 2
var selectedText = selects.options[selects.selectedIndex].text;// gives u value2
window.location = "getStatus.php?id="+selectedText;
}
</script>
<select name="status" id="status">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
</select>
Go
<script>
function getitem(){
var item = document.getElementById('status').value;
location.href="getStatus.php?id="+item;
}
</script>
I'm trying to store variables from select/option, and then access them from a button to send to a javascript function that would filter some divs on my page.
So far I have it sending the value to "filter()" when the value changes.
Here's my markup:
<select name="Area" onchange="filter(this)">
<option selected>Select</option>
<option value="Austin">Austin</option>
<option value="San Antonio">San Antonio</option>
<option value="Temple">Temple</option>
</select>
<select name="Number" onchange="filter(this)">
<option selected>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<a class="button">Submit</a>
but how do I store the values from all the options, and then send them
all at once to the function?
Edit: In other words, how do I store the value of each option, and only send to the function once they click submit?
If I got it right, without jQuery you may try this:
document.getElementById("button").onclick = function() {
var selects = document.body.getElementsByTagName("select");
var data = [];
for (var i = 0; i < selects.length; i++) {
data.push(selects[i].value);
}
destinyFunction(data);
};
Or you may use jQuery for the sake of simplicity:
$("#jbutton").on("click", function() {
var data = [];
$("select").each(function() {
data.push($(this).val());
});
destinyFunction(data);
});
Fiddle with those two examples here.
Give each of your selects an id attribute, like:
<select name="Number" onchange="filter(this)" id="Number">
...
Then you can get the value of each in javascript by:
var el = document.getElementById('Number');
var value = el.options[el.selectedIndex].value;
As a sidenote, using onchange in HTML markup to attach your event handling is not best practice. This article from quirksmode offers a good explanation of alternative solutions. However, there are major cross-browser considerations to be taken into account, which is why most people prefer to use a Javascript framework so that those are mostly mitigated.
My code reads 2 data from the database, and if those data are specific value, then it should remove values 2,3,4,5,6,7,8 from the select called smjer. Values from database are read in external .php script, and then sent back to web page using GET. My problem is next: In one specific case, when the second select in code is set to 3, then code should remove only 2nd and 3rd value from select smjer. I've done this with jQuery,and it works ,but my problem is that when i change value of other select, for example, from 2, I select value 3, nothing happens, so I have to refresh the page, so my changes would apply.
Selects look like this:
<select name="smjer" class="smjer">
<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>
Second select:
<select name="godina" class="upis">
<option value="1" >1.</option>
<option value="2" >2.</option>
<option value="3">3.</option>
</select>
And the code for removal:
<?php }
if(($_GET['program1'])=='1'&&($_GET['stupanj_spreme1']=='2'))
{?>
<script>
$(document).ready(function(e) {
var ary=[2,3,4,5,6,7,8];
var provjera=$('.upis').val();
if(provjera=='3')
{
var ary=[2,3];
}
$('[name=smjer] option').filter(function(){
return ($.inArray(parseInt(this.value),ary) >-1);
}).remove();
});
</script>
<?php } ?>
I have been reading on net that something like this should be done with AJAX, but I don't know anything about AJAX, an I would like to avoid it. Tnx in advance.
Instead of running your javascript once onready, bind it to the change event of the select in question:
$(document).ready(function(e) {
// When the value of the select changes, run this:
$('.upis').change(function(){
var ary=[2,3,4,5,6,7,8];
var provjera=$('.upis').val();
if(provjera=='3')
{
var ary=[2,3];
}
$('[name=smjer] option').filter(function(){
return ($.inArray(parseInt(this.value),ary) >-1);
}).remove();
});
});
Also, best practice: if you don't want "upis" to EVER apply to another element on this page, consider using id instead of class.
i have a form containing inputs for times (specifically, an opening and closing time). when the submit button is pressed, it goes to a php page where these inputs are added to a database. i want to check a few things before allowing the form to submit. for example, i want to make sure that the start time is earlier than (less than) the end time. here's the form:
Opens:
<select name="starthour1">
<option value="00">12</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>
</select> :
<select name="startminute1">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="59">59</option>
</select>
<select name="startwhen1">
<option value="am">am</option>
<option value="pm">pm</option>
</select>
Closes:
<select name="endhour1">
<option value="00">12</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>
</select> :
<select name="endminute1">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="59">59</option>
</select>
<select name="endwhen1">
<option value="am">am</option>
<option value="pm">pm</option>
</select>
i found javascript code for how to check individual form elements, but i can't figure out how i could combine multiple without submitting. in my php page, i have the following code:
$starthour1=$_POST['starthour1'];
$startminute1=$_POST['startminute1'];
$startwhen1=$_POST['startwhen1'];
$endhour1=$_POST['endhour1'];
$endminute1=$_POST['endminute1'];
$endwhen1=$_POST['endwhen1'];
$start_time1=$end_time1="";
if($startwhen1=="pm"){
$starthour1=$starthour1+12;
}
if($endwhen1=="pm"){
$endhour1=$endhour1+12;
}
$start_time1=$starthour1.":".$startminute1.":00";
$end_time1=$endhour1.":".$endminute1.":00";
if($end_time1=="00:00:00"){
$end_time1="23:59:00";
}
echo "<br>start time is ".$start_time1;
echo "<br>end time is ".$end_time1;
$startnum=str_replace(":", "", $start_time1);
$endnum=str_replace(":", "", $end_time1);
if($endnum<$startnum){
echo "<br>start time can't be later than end time!";
}
else{
//add to database
}
however, checking this stuff after submitting doesn't make sense. i suppose i could redirect back to the initial page if the error was found, but that doesn't seem efficient.
also, i was thinking maybe i could have some php on the page with the form that checks for validity. if it validates, it then posts to the php page that inserts stuff into the database. does this make sense and is it possible?
is there a better solution? i imagine there is something i could do with javascript but i haven't been able to figure it out.
additionally i'd like to inform the user of invalid inputs with text that appears next to the input box. i should be able to figure this out once the rest is working though.
thanks.
Have the onSubmit() or action of the form call a JavaScript function, like this:
<form id="form" onSubmit="return doSubmit();" action="#">
Then, in doSubmit() you can actually perform any of the validations (and only actually submit the form if they pass)
function doSubmit(){
if (validationsPass()) {
$('#form').submit();
}
}
To inform users of invalid input next to the actual form field, you can have hidden divs or spans next to each field, and use Javascript to un-hide them if they fail some sort of validation.
if(!fieldNotValid){
$('#field-error').show(); //Or use effects like .highlight()
}
Always check at PHP level the user input, no matter if you check it in the client side as well using javascript.
In javaScript I recommend you to use a Js library like jQuery that has a plugin for form validation. Very useful and easy to implement.
At PHP level I recommend you to use filter_var functions. Very efficient as well.
Consider turning the Form Data into DateTime objects instead. This will make comparison much easier than fiddling with each part individually. It will also make sure the DateTime string put into the database is safe for insertion, because you will get the string from the format() method.
thanks for the help! i ended up using:
<form action="add.php" onsubmit="return validate_form()" method="POST" name="addform">
with:
function validate_form(){
var f = document.addform;
var start, end, starthour, endhour;
var valid=true;
..........
starthour=f.starthour1.value;
endhour=f.endhour1.value;
if(f.startwhen1.value=="pm"){
var starthournum = starthour * 1;
starthournum = starthournum+12;
starthour = starthournum.toString();
}
if(f.endwhen1.value=="pm"){
var endhournum = endhour * 1;
starthournum = starthournum+12;
starthour = starthournum.toString();
}
start = starthour+f.startminute1.value;
end = endhour+f.endminute1.value;
if(end=="0000"){
end="2359";
}
if(end<start){
alert("Start time can't be later than end time!");
valid=false;
}
return valid;
}
i need some clarification on how to populate select(s) with data from mysql. Basically what I am trying to do is:
There will be a first select box with some data in it.
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
when the user selects a option in the first select,
there is a second select below that, which should reflect the values according to the selection made in the first select.
<select>
<option>1.1</option>
<option>1.2</option>
<option>1.3</option>
</select>
The data is commin from MySQL. I am not sure if need to post to same page, but if I do, how to retain the values alredy selected in the previous select boxes? do i need to use javascript?
any help?
Thanks.
You should use javascript so you don't need a page refresh. I just re-read your question and I'll have a solution involving an AJAX request in a second to pull dynamic data:
HTML
<select name="select1" id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="select2" id="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
jQuery
<script type="text/javascript">
$(document).ready(function() {
$('#select1').change(getDropdownOptions);
});
function getDropdownOptions() {
var val = $(this).val();
// fire a POST request to populate.php
$.post('populate.php', { value : val }, populateDropdown, 'html');
}
function populateDropdown(data) {
if (data != 'error') {
$('#select2').html(data);
}
}
</script>
populate.php
<?php
if (!empty($_POST['value'])) {
// query for options based on value
$sql = 'SELECT * FROM table WHERE value = ' . mysql_real_escape_string($_POST['value']);
// iterate over your results and create HTML output here
....
// return HTML option output
$html = '<option value="1">1</option>';
$html .= '<option value="b">B</option';
die($html);
}
die('error');
?>