I hava a two web pages. One is main.php and other is combo.php. combo.php contains a dropdown list and I have included this page in my main.php.
What I want to do is when someone select an option in my dropdown, there should be an alert box indicating my selected item.
main.php
<html>
<body>
<form>
//some elements
<?php include 'combo.php';?>
</form>
</body>
</html>
combo.php
<html>
<body>
<form>
//some elements
<select name="combo">
<option value="1">America</option>
<option value="2">England</option>
<option value="3">India</option>
<option value="4">Japan</option>
</select>
//some elements
</form>
</body>
</html>
I can't do any changes to my combo.php.
onChange event and the script should be in my main.php.
I have no idea how to do this, and I don't no whether this is even possible.
Any help regarding the matter would be highly appreciated.
Thanx.
You may use Jquery for this, for that you have to include this script,
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#getSelect").change(function() {
alert($(this).val());
});
});
</script>
where getSelect is id of select control.
after that add below php code.
<form>
//some elements
<select name="combo" id="getSelect" onChange="return getSelect(this.value)">
<option value="1">America</option>
<option value="2">England</option>
<option value="3">India</option>
<option value="4">Japan</option>
</select>
//some elements
</form>
Add a javascript function like this :
function getValue(val) {
alert(val);
}
And in your dropdown add this function on onChange Property like this
<select name="combo" onchange="getValue(this.value);">
<option value="1">America</option>
<option value="2">England</option>
<option value="3">India</option>
<option value="4">Japan</option>
</select>
When you change values of dropdown you should see the values in alert box.
If you can use jQuery, you just have to add some piece of code in your main.php
$(document).ready(function() {
$("#idOfYourSelect").change(function(changeEvent) {
alert("Your value : " + $(this).val());
});
});
Assuming your <select> has at least an id idOfYourSelect (or a name, or a css classname - somthing that will allow you to retrieve it from the javascript code)
This will add a listener on the change event and run the callback at each time you change the value.
If you can't use jQuery, that will be a little more complicated, you have to play with browser differences, and use addEventLister or attachEvent to add your listener.
attachEvent documentation (for old IE)
addEventListener for Firefox, webkit, etc
I recommend you to use jQuery, which will handle all these differences for you.
Okay if you can't change that then if you use JQuery you can add like this
$('select[name*="combo"]').change(function() {
var str = $('select[name*="combo"]').val();
alert (str);
});
Add this in $(document).ready(function)
Related
I have the following form I want to use to filter through products on my website:
<div class="top-filter-select-container">
<form method="GET" action="" id="sort-filter-pick">
<select class="selectpicker" id="sort-filter">
<option value="popularity">Sort by Popularity</option>
<option value="ratings">Sort by Ratings</option>
<option value="newest">Sort by Newest</option>
<option value="lowest">Sort by Lowest Price</option>
</select>
</form>
</div>
I am trying to reload my page when an option is selected using jQuery form.submit() and retrieve the selected option to be used for filtering with a SQL query. I would eventually want to use this value along with other filtering values for a more complex filtering.
$(function(){
$('#sort-filter').on('change', function() {
var action = $(this).val();
$("#sort-filter-pick").attr("action", "?sort=" + action);
this.form.submit();
});
});
To test my code, I am just trying to echo isset($_GET['sort']) ? $_GET['sort'] : null;
The code works if I change form method to POST instead of GET but doesn't work with GET. On websites such as Amazon, the GET form method is used when applying filters from a select option but I also notice that the ?sort=... is added to the page URL after the form is submitted, which is not the case for me if I use GET. I was wondering what would be the right approach to do the same thing.
If you add a "name" to your form-elements you don't need to manually add the sort-criteria with jQuery.
HTML:
<div class="top-filter-select-container">
<form method="GET" action="" id="sort-filter-pick">
<select class="selectpicker" name="sort" id="sort-filter">
<option value="popularity">Sort by Popularity</option>
<option value="ratings">Sort by Ratings</option>
<option value="newest">Sort by Newest</option>
<option value="lowest">Sort by Lowest Price</option>
</select>
</form>
</div>
Javascript:
$(function(){
$('#sort-filter').on('change', function() {
this.form.submit();
});
});
Or you could just use location.href = url rather than posting the form.
I have a form which posts to a preset url variable, I'd like to add an extension to that url by using a dropdown selector:
<form class="my-form" method="POST" action="<?php echo $url; ?>">
<select name="script_to_follow">
<option value="script1.php">Report 1</option>
<option value="script2.php">Report 2</option>
</select>
Does anyone know how to add the value selectors as extenstions to the URL, for example if $URL= www.example.com and Report 1 was selected the resulting action would be to post to www.example.com/script1.php
You May have to do this using jQuery:
var url = 'www.example.com';
$(".script_to_follow").change(function(){
var selvalue = $(this).val();
url = url + '/' + selvalue;
window.location = url;
})
You can do it by using jQuery.
On Submit call a function:
var action = $('form.my-form').prop('action');
var selectedOption = $('select[name="script_to_follow"]').val();
$('form.my-form').prop('action', action+'/'+selectedOption;
You have two options here:
Use javascript to listen for change events on the <select> field, and change the action of the form based on what's been selected. This is what the other answers are suggesting.
To you avoid using javascript, instead of pointing the form towards different php scripts based on the selected value, have a single php script that switches based on the selected value. So:
<form class="my-form" method="POST" action="action.php">
<select name="script_to_follow">
<option value="a">Report 1</option>
<option value="b">Report 2</option>
</select>
And then in action.php do something like:
switch ($_GET["script_to_follow"]) {
case "a":
// contents of script1.php
case "b":
// contents of script2.php
}
simply try this
add id attribute to select box as
<select name="script_to_follow" id="script_to_follow">
<option value="script1.php">Report 1</option>
<option value="script2.php">Report 2</option>
</select>
now write some jquery codes to change action attribute with change in option
<script>
$('#script_to_follow').change(function(){ // onchange event
var url = $('#script_to_follow').val(); // get selected option
$('form.my-form').prop('action',url); // replace action attribute
});
</script>
Note : do not forget to include jquery script before form
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
i have fllowing select list now when i select producertype onchange i want producerType value from jquery and i want to isset(producertype) with php for role and change the role type respectively as
<select id="ProducerType" name="ProducerType" style="float:left;">
<option value="Principal">Principal</option>
<option value="Producer">Producer</option>
<option value="SoleProprietor">Sole Proprietor</option>
</select>
<select id="Role" name="Role" style="float:left;">
<option value="">Agent</option>
</select>
I understand the question and the answer is going to be complex.
First you need to add onChange event to your ProducerType selectbox.
Add this at the end of your html:
<script>
$(document).ready(function(){
// attach event on change
$('#ProducerType').on('change',function(){
// call script on server to check if isset() and receive values for Role
$.get("checkproducer.php?ProducerType="+$('#ProducerType').val(),function(result){
// here the script on server returned data already
// update Role selectbox with new values
$('#Role').html(result)
})
})
})
</script>
Make sure you have jquery.js loaded as usual.
You will need to create a PHP script on server which handles the check and returns new data for your select input. Like this (save as "checkproducer.php"):
<?php
if ($_GET['ProducerType']=="Principal")
echo "<option value=1>Principal1</option>"
."<option value=2>Principal2</option>";
if ($_GET['ProducerType']=="Producer")
echo "<option value=1>Producer1</option>".
."<option value=2>Producer2</option>";
if ($_GET['ProducerType']=="SoleProprietor")
echo "<option value=1>SoleProprietor1</option>"
."<option value=2>SoleProprietor2</option>";
// etc
?>
I'm trying to create a drop-down list with four options such that if I select the 4th option, I want a text box created so that I can get the value typed in that box using "$_GET"
Something like this;
<select name="value">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<!-- And a 4th one -->
</select>
And if the 4th one is selected, a box should appear like this;
<input type="text" name="firstname">
Edit;
My current code;
<script>
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='sortby']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "byDefindex"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "defindex"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
</script>
<form action="<?php $_PHP_SELF ?>" method="GET">
Select:
<br />
<select name="sortby">
<option value="playHours">Play Hours</option>
<option value="lastLogin">Last Login</option>
<option value="byDefindex">By Defindex</option>
</select>
<br />
<input type="submit" />
</form>
If your 4th option is this:
<option value="value4">Option 4</option>
You can use jQuery to display the field.
Put your field in a <div>
<div id="field"><input type="text" name="firstname"></div>
Now,
<script type="text/javascript">
$(document).ready(function(){
$('input[name="value"]').change(function(){
var v = $('input[name="value"]').val();
if(v=="value4") $('#field').show();
else $('#field').hide();
})
})
This is usually done via javascript; something like this (by using popular JavaScript library, jQuery) :
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='value']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "value4"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "firstname"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
Hope that helps. You can find more here jQuery site
I'm not certain this is what you're asking, but it seems you're wanting to add new lines to your select list?
I often do something similar to this for adding new options to lists. The first option would be 'add a new record', like this:
<select name="value">
<option value="-1">Add New Option</option>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
Note that the value for "add new" is -1... you could put anything here, but it should be something that would never show up in the other options, so your javascript knows what to do when it is selected.
Add a 'onchange' to the select box like this:
<select name="value" onchange="if(this.value == -1) addOption(this);">
Note that if the selected option is -1, then a javascript function is called. It references itself (this), so that your function knows who called it.
Then create a function that allows adding a new option:
function addOption(theSelectElement){
// create a text box, underneath the select box:
var newInput=document.createElement('input');
newInput.type='text';
theSelectElement.parentNode.insertAfter(newInput,theSelectElement);
}
You'll want to add more code to this function so that the new text field has a name and perhaps an ID.
Hope this helps, or at least points you in the right direction.
I'm wanting to have a dropdown on my form, the options will be titles to content in my database, I want the content to show in a ckeditor when delected.
I'm looking to do something like the below with jquery and need a little help.
if 'dropdown' value is not 'please select'
CKeditor value equals php variable from database.
end statement
I'm fairly happy getting the variables in php so just need some jquery to change the ckeditor value dependant on the dropdown not being defaulted.
Hope this makes sense and thanks in advance for any responses.
html:
<select name="select" id="select">
<option value="">Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
<div id="result" style="border:1px solid #000;padding:10px;color:#ff0000;display:none;"></div>
jQuery dont forget to include the jquery file
$(document).ready(function(){
$('#select').change(function() {
var option = $(this).val();
$.get('select.php', {select:option}, function(data) {
$('#result').html(data).hide().fadeIn(1000);
});
});
});
your php file (select.php)
if(!empty($_GET['select'])) {
//call database and bring back the content for this selection and echo it
}
First you would need to populate the "option" elements of your select box using php, which I believe you said you are comfortable with.
Then, using jQuery:
$(document).ready(function(){
$('#myCKEditorTextArea').text($('#mySelectBox').val());
});
for pre-population on page load, or:
$('#mySelectBox').change(function(){
$('#myCKEditorTextArea').text($(this).val());
});
for population when the user changes the select box value.