if specific select option is chosen get the value of input - php

I have a little knowledge of php, but this is what I'm trying to do. I have a form with select option. If an option is selected with the value "example_5" I want it to get the value of an <input>. Is this done with php or jquery to use the value of input?
For example: someone selects example_5. They can now write something in the <input>. And that value will be used.
<script type="text/javascript">
$(function(){
if($('select').find('option:selected').val() == 'example_5'){
use input??
$_COOKIE['input_example'] = $example_1;
}
else{
$_COOKIE['example_1'] = $example_1;
}
});
</script>
<?php
$_COOKIE['example_1'] = $example_1;
?>
<form method="get" action="page2.php">
<select name="example1">
<option value="example_1">example_1</option>
<option value="example_2">example_2</option>
<option value="example_3">example_3</option>
<option value="example_4">example_4</option>
<option value="example_5">example_5</option>
</select>
<input name="input_example" type="text">
</form>

The way I would do it is to have a onChange listener on the select box and then using javascript get the value of the input box using document.getElementById. You can use any jQuery shortcut you want, but the methodology would be the same.
See this fiddle for a functional example using this technique.
On an unrelated note, be sure to always close your <input /> tags (probably just a typos :)
Edit
As per comment : just set the value of the input from a value from the cookies.
document.getElementById("input_example").value = getCookie("cookie_name");
Where you can write a simple function to get the cookies :
function getCookie(Name) {
var search = Name + “=”
if (document.cookie.length > 0) { // if there are any cookies
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(”;”, offset)
// set index of end of cookie value
if (end == -1)
end = document.cookie.length
return unescape(document.cookie.substring(offset, end))
}
}
}
Tutorial for js cookie function taken here.
See also
JS Cookies

Based on your comment to blo0p3r's answer.
In page2.php, add the following at the very top of the script before any whitespace or HTML is sent:
<?php
if (isset($_GET['example1']) && $_GET['example1'] === "example_5")
setcookie($_GET['input_example'], 'example_5', time()+3600, '/');

First, you want to check if the from is submitted. Afterward $_COOKIE['example_1'] = $example_1; would be something like this:
$_COOKIE['example_1'] = $_GET['example1'];

Related

Logic for form post that reset URL query parameter?

I'm not getting the results expected when doing an update via onchange="formType.submit()" on a Select List.
I was hoping to have the PHP $_POST value set as a new URL but it looks like the value is not yet present when submitting the form.
Original URL: http://example.com/Select-item.php?type=4
<form action="Select-item.php?type=<?php echo $_POST['selItem']; ?>" method="post" id="formType">
<select name="selItem" id="selItem" onchange="formType.submit()">
<option value="1">change to 1</option>
<option value="2">change to 2</option>
<option value="3">change to 3</option>
</select>
</form>
The error I receive is undefined index (...Select-item.php?type=Notice:%20Undefined%20index:%20...)
Is the correct way to make this page URL update by posting to the same page, reading the $_POST value and then using
PHP generates the HTML code before it is transmitted to the client; after the client receiced the code, it will render it to a website.
The reason your code is not working because when <?php echo $_POST['selItem']; ?> is executed there is no POST-Variable selItem set; it is set after the form was submitted.
If you really want to transmit selItem as GET and as POST-Variable - a possible way of doing this is using this function (untested):
<script>
function onSelectChange() {
// Access the select-field and get it's value
var sel = document.getElementById("selItem");
var selectedValue = sel.options[sel.selectedIndex].value;
// Change the target URL of the form
document.getElementById("formType").action = 'Select-item.php?type='+ selectedValue;
formType.submit()
}
</script>
And edit the onChange-Listener in your select: onchange="onSelectChange"
BUT I would recommend using GET instead - this way selItem will be always in URL, too, and you don't need to check for $_GET and $_POST at the same time
Always check using isset() function before using a $_POST
Example:
if(isset($_POST['selItem'])){
//your code here
}

Hide element based on the value of select name option?

I want get the value from the select name and when the value will be somthing, take some action. All value are save in pdo db.
Html: <header>Something</header>
Code:
<select name='name_of_select'>
<option value='on'>On</option>
<option value='off'>Off</option>
</select>
Ex. When the value will be set to on, hide element header. The value I getting from the db. And the value present {$option_selected_value} in smarty template.
Try this, this will be help you
$('select[name=name_of_select]').change(function(){
if($(this).val()=='on')
$('header').show();
else
$('header').hide();
});
Fiddle here
This will do what you are asking, but it relies on you adding IDs to the select and the header elements. If you're not going to be able to do that then please post some real markup and I'll fix this to suit :)
$("#selectID").on("change", function() {
if ($(this).val() == "on") {
$("#headerID").show();
} else {
$("#headerID").hide();
}
});

Disable dropdown box based on selection of another dynamic dropdown box using php and javascript

I have a list of widths in a dropdown box. They are dynamic because each product has different widths so I've setup the code to look for the minimum and maximum. Then it sets up a dropdown list in increments of 1".
Next to the width are 1/8" increments. So for example you could pick 52 1/8.
If the maximum width is 92 inches let's say, the 1/8 increment dropdown box should disappear or disable because since 92 is max.. you can't pick 92 1/8.
How do I make that 1/8ths box disappear or disable? Here is part of my current code for the dropdown box.
<select name="width_str" id="width_str" onchange="doCalc();" style="width:50px;">
<option value="">--</option>
<?php
$counter = $minwidthRS - 1;
$start = $minwidthRS;
for($start; $start < $maxwidthRS + 1; $start++) {
$counter = $counter + 1;
echo "<option value=".$counter.">".$counter."</option>";
}
?>
</select>
Code for the select dropdown box with 1/8ths that I would like to disable or disappear when MAXIMUM above is selected.
<select name="widthfrac_str" id="widthfrac_str" onchange="doCalc();" style="width:50px;">
<option value="">--</option>
<option value="1/8">1/8</option>
<option value="1/4">1/4</option>
<option value="3/8">3/8</option>
<option value="1/2">1/2</option>
<option value="5/8">5/8</option>
<option value="3/4">3/4</option>
<option value="7/8">7/8</option>
</select>
I'm aware of how to send a selected width value over to a PHP page using AJAX and compare it there, but what do I send back in the success callback? Could I send something that tells the container of that 1/8 measurement dropdown to disable or disappear?
Many thanks! If you need more code let me know. The doCalc() script basically uses AJAX and sends the width to php processing page in order to update price instantly.
EDIT (added more code):
Here is part of my script..
<script type="text/javascript">
function doCalc(){
var roomX = $('#room_str').val();
... lots of variables set here
$.post('db_query.php',
{roomX:roomX, etc. etc. etc.},
function(data) {
data = $.parseJSON(data);
$('#roomname-placeholder').html(data.roomname);
// ... lots of placeholders and code here
});
return false;
};
</script>
Not sure if it helps but I learned a little about using a callback to alter an input field and replacing its value with this: $('input[name=x_login]').val(data.loginid);
It would be great if there was code like that to simply change the other dropdown box disabled=disabled? Does that make sense? I'm still learning programming lingo!
You can call another function with onchange(), which should check the number chosen for the first value. If it is the maximum, then toggle function to hide the second element. A neater solution would be to include the 'check for maximum value and toggle if true' inside doCalc.
Remember to make PHP check also the value, since if user chooses the second value AND then the maximum for the first block, it should hide the second one, but it's value might still be sent.
EDIT:
<script type="text/javascript">
function doCalc(){
var roomX = $('#room_str').val();
if (roomX == <?php echo $maxwidthRS; ?>)
{
document.getElementById('widthfrac_str').style.display = 'none';
// You also need to make the second element's value 0 within those brackets
}
... lots of variables set here
$.post('db_query.php',
{roomX:roomX, etc. etc. etc.},
function(data) {
data = $.parseJSON(data);
$('#roomname-placeholder').html(data.roomname);
// ... lots of placeholders and code here
});
return false;
};
</script>
There's no problem putting php within javascript if it's in a .php file. It worked as the OP stated in the comments, great!

Check all checkbox with an array

Trying to make the infamous checkall checkbox for dynamically created rows from a MySQL query. Rows (and therefore checkboxes) could range from 1 row to a metric buttload.
The form (without the checkall) is as follows:
<form name="form" method="post" action = "process.order.php">
<?php
while($fetch = mysql_fetch_array($order_query){
$order_id = $fetch['oid'];
$order_status = $fetch['ostat'];
?>
<input type="checkbox" name="order_row[<?=$order_id?>]" id="1" value="1">
<select name="status[<?=$order_id?>]" id="status[<?=$order_id?>]"
<option value="Ordered">Ordered</option>
<option value="Backordered">Backordered</option>
</select>
<? } ?>
<input type="submit" name="submit" id="submit" value="submit"> </form>
In process.order.php:
<?php
if(is_array($order_row)){
foreach($order_row as $order_id=>$val){
...followed by the rest of the script. I tried using this: How to implement "select all" check box in HTML?
and this:
Select All Checkbox
I'm trying to avoid using jQuery at this moment. Is there a way I can call the checkbox name generated by the PHP script into the javascript code?
Update:
I'd like to use a function that I can call across multiple pages. Thus, calling embedding the form name in the JS won't be practical for me. Also, I'd like it to be a checkbox - the button's worked great, but I'm trying to keep the UI simple and I already have a lot of buttons I'm trying to get rid of...
Working Example
You can do like this:
var frm = document.forms['form'];
for (var i = 0, l = frm.elements.length; i < l; i++) {
if (frm.elements[i].type === 'checkbox') {
frm.elements[i].checked = true;
}
}
Similarly, to uncheck all set:
frm.elements[i].checked = true;
to false.
You can also easily create checkAll and unCheckAll functions using above code.
By the way, an id with only numeric value is invalid, you should use alpha or mix of alpha and numeric characters.
If you don't have to support IE6 or 7, the following will work.
Live Demo
var checkAll = document.getElementById("checkall");
checkAll.onclick = function(){
[].forEach.call(
document.forms['form'].querySelectorAll("input[type='checkbox']"),
function(el){
el.checked=true;
});
}
​
​

Changing contents of HTML select based on dropdown

I have a select item, that is filled with a list of files. This list of files is stored in a php variable.
I have another list of files, from another directory, stored in another variable.
I have a dropdown, with 2 options. When I change the dropdown, I want the items in the select to change to the file list associated with the item selected.
For example, my dropdown contains:
Misc Images
People
I have 2 variables, $misc and $people.
When Misc is selected, I want the select to contain all the images listed in $misc, and when the People option is selected I want the select to contain all the options listed in $people.
As far as looping through the php to generate all the items is fine, what I don't understand is how to do the javascript portion?
Thanks, and apologies for poor wording.
Try this code out.
PHP:
<?php
$miscArray = array("misc1", "misc2", "misc3");
$misc = implode(", ", $miscArray);
$peopleArray = array("people1", "people2", "people3");
$people = implode(", ", $peopleArray);
?>
HTML:
<form action="#">
<select id="fileCat">
<option id="misc">Misc</option>
<option id="miscData" style="display:none"><?php echo $misc ?></option>
<option id="people">People</option>
<option id="peopleData" style="display:none"><?php echo $people ?></option>
</select>
<select id="files"></select>
</form>
JS:
init();
function init()
{
addListeners();
}
function addListeners()
{
document.getElementById("fileCat").onchange = fillSelect;
}
function fillSelect()
{
var fileCat = document.getElementById("fileCat");
var imageFiles;
switch(fileCat.options[fileCat.selectedIndex].id)
{
case "misc":
imageFiles = document.getElementById("miscData").innerHTML.split(", ");
break;
case "people":
imageFiles = document.getElementById("peopleData").innerHTML.split(", ");
break;
}
var parent = document.getElementById("files");
parent.innerHTML = "";
if(imageFiles.length)
{
for(var i=0;i<imageFiles.length;i++)
{
var option = document.createElement("option");
//populate option with corresponding image text
option.innerHTML = imageFiles[i];
parent.appendChild(option);
}
}
}
I mocked up some data in PHP and then echoed it into a hidden <option> tag for each category. Then, the data is grabbed using a case/switch depending on the id of the selected option.
I think something like this would work. You would set the onchange attribute of your drop down box to call that function. You will need to have a URL that returns the options you want to use in JSON (selectMenus.php in that example). You'd need two different urls or one that takes a parameter to indicate which option set.
could You provide us some code? It is quite heavy to write it completely of nothing :)
UPDATE:
then how about You try the following (or similar) by using jQuery:
<select id="foo">
<option class="misc">MISC</option>
<option class="misc">MISC2</option>
<option class="people">People1</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('option.misc').click(function(){
$('#foo').html('<option class="misc">MISC</option>
<option class="misc">MISC2</option>');
});
});
</script>
PHP is server side. JavaScript is client side. You have two options
(1) send an XmlHTTP request back to your server to pull the options and update the select list, or (2) send the values to a hidden field on the initial render of the page and get the values from there.

Categories