I have a select form that sends the value when you change the select. Unfortunately, everytime it sends it goes back to the option "10". How can I have it (for example) so you can click on the 20 option and send form and stay on 20?
Here is the code:
<form method='get' name='FormVote'>
<select name="vote" onChange="document.forms['FormVote'].submit()">
<option selected="selected" value='10'>10</option>
<option value='20'>20</option>
<option value='30'>30</option>
<option value='40'>40</option>
</select>
</form>
Any help will be greatly appreciated! Thanks!
it's staying on 10 because of the
selected="selected"
attribute in the option for 10
To have it remember where the user put it you'll need to fetch its value from the database and then do something like this in PHP:
foreach ($optionsArray as $option) {
echo '<option ';
if ($theOptionValue == $savedUserOptionValue)
echo 'selected="selected"';
echo 'value="', $theOptionValue, '>', $theOptionValue, '</option>';
}
Or you could use AJAX to send the form to the server in which case the page won't refresh and the option box will stay where it is.
Use Ajax or,
<form method='get' name='FormVote' target='hidden'>
<select name="vote" onChange="document.forms['FormVote'].submit()">
<option selected="selected" value='10'>10</option>
<option value='20'>20</option>
<option value='30'>30</option>
<option value='40'>40</option>
</select>
</form>
<iframe name='hidden' id='hidden' style='display:none' width='0' height='0' border='0'></iframe>
Related
I have a Dropdown that will have multiple functions.
"Update" takes you to a page to update information
"Export Form" takes you to a page to export the form
**Both above actions can be done with the current code. The issue that I am having is to allow the dropdown to also open modals through an onclick.
"Delete Course" opens modal
"View Comments" opens modal
I have using onchange="location=this.value;" to open different pages. However, I cant seem to figure out how to allow both onchange="location=this.value;" and onclick in the same dropdown.
My Code:
<select class="form-control noform" onchange="location=this.value;">
<option selected="true" disabled="disabled">
<h6>ACTIONS ✚</h6>
</option>
<option value="edit_course?person_id=<?php echo htmlentities ($row['id']) ?>&session_id=<?php echo $_GET['session_id'] ?>&operation=edit">UPDATE</option>
<option value="export?person_id=<?php echo htmlentities ($row['id']) ?>&session_id=<?php echo $_GET['session_id'] ?>&operation=edit">EXPORT FORM</option>
<option onclick="deleteCourse()">DELETE COURSE</option>
<option onclick="openModal()">VIEW COMMENTS</option>
</select>
Try this,
<select class="form-control noform" onchange="doAction(this.value);">
<option selected="true" disabled="disabled">
<h6>ACTIONS ✚</h6>
</option>
<option value="update">UPDATE</option>
<option value="exportForm">EXPORT FORM</option>
<option value="deletCourse">DELETE COURSE</option>
<option value="viewComments">VIEW COMMENTS</option>
</select>
JS:
In js you need to do some try and error thing for redirection and open modal
function doAction(value){
switch (value) {
case "update":
//edit_course?person_id=<?php echo htmlentities ($row['id']) ?>&session_id=<?php echo $_GET['session_id'] ?>&operation=edit
//here you can do your update redirection
break;
case "exportForm":
//export?person_id=<?php echo htmlentities ($row['id']) ?>&session_id=<?php echo $_GET['session_id'] ?>&operation=edit
//here you can do your export redirection
break;
case "deletCourse":
deleteCourse();//here you can open your modal
break;
case "viewComments":
openModal();//here you can open your modal
break;
}
}
Here's the process I want to realize:
1.on index page, select one option from the list of items;
2.submit form,directing to the index page ;
3.select label showing the default value which equals what I chose in step 1.
e.g.
<html>
<select>
<option value="1">1<option/>
<option value="2">2<option/>
<option value="3">3<option/>
</select>
</html>
On index page if I chose 1 ,and submit it and the page is submitted to itself(the index page).Now,on the index page, <option value="1">1<option/> is selected by default.
I don't know which correct direction I should go and I haven't found any solutions from the Internet yet.Anybody has any ideas??
Thanks a lot!
Using PHP function and javascript onchange:
<html>
<?php
if (isset($_POST["myselect"])) {
$myselect = $_POST["myselect"];
}
else {
$myselect = 1;
}
function isselected(A,B) {
if ($A == $B){
return "selected";
}
else{
return false;
}
}
?>
<form action="index.php" method="post">
<select name="myselect" onchange="this.form.submit();">
<option value="1" <?php echo isselected(1,$myselect) ?> >1<option/>
<option value="2" <?php echo isselected(2,$myselect) ?> >2<option/>
<option value="3" <?php echo isselected(3,$myselect) ?> >3<option/>
</select>
</form>
</html>
1st : Name attribute is must for form elements .otherwise element value would not passed to server.
2nd : Check the post value and add the selected attribute for that option like below .
<select name="select1">
<option value="">Select</option>
<option value="1" <?php echo (isset($_POST['select1']) && $_POST['select1']==1 )? 'selected':''; ?>>1</option>
<option value="2" <?php echo (isset($_POST['select1']) && $_POST['select1']==2 )? 'selected':''; ?>>2</option>
<option value="3" <?php echo (isset($_POST['select1']) && $_POST['select1']==3 )? 'selected':''; ?>>3</option>
</select>
coudn't understand your question quite well but..If you want to select any other value by default, once the page comes back to the index page, you will have to send the selected value back to the index page.
<html>
<select>
<option value="1">1<option/>
<option value="2" selected="selected">2<option/>
<option value="3">3<option/>
</select>
</html>
The above would select option 2, so you just have to set it accordingly.
I am working on a project where I am stuck at a point right now. I need to change the value of a DIV live on select of the dropdown using jQuery.
Example:
I want this:-
<select name="">
<option value="10">10 clicks</option>
<option value="20">20 clicks</option>
<option value="30">30 clicks</option>
<option value="40">40 clicks</option>
</select>
<div id="chpln">Clicks: 0 clicks</div>
When I will select option 1 the value will be displayed in place of 0 in DIV live. The problem is that as this select value fetches data from the database I am not understanding how to do it.
Example:
<select name="" id="pln" class="select-box" style="margin-top: -40px;" />
<?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
<option value="<?php echo $ac_fetch['adclk_clicks']; ?>"><?php echo $ac_fetch['adclk_clicks']; ?> clicks</option>
<?php } ?>
</select>
jQuery that I used currently:-
$(document).ready(function(){
$("#pln").click(function(){
$("#chpln").text("Plan: <?php echo $ac_fetch['adclk_clicks']; ?> secs");
});
});
This jquery is changing the value currently but I am getting only the first value of the database i.e., 10. When I choose different option it still displays the first value from the database i.e., 10 while it should actually display the second value that is 20. Please help me. FIDDLE will be appreciated.
click is a wrong event for selection box
you can utilize change event for your result.
$(document).ready(function(){
$("#pln").change(function(){
$("#chpln").text("Plan: "+$(this).val()+" secs");
});
});
For Dropdown, click(function() is not applicable. Use change(function().
I gave you 2 way. Use any one.
I) Method - 1 (Using Ajax)
<select name="" id="pln" class="select-box" style="margin-top: -40px;" />
<?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
<option value="<?php echo $ac_fetch['adclk_clicks']; ?>">
<?php echo $ac_fetch['adclk_clicks']; ?> clicks
</option>
<?php } ?>
</select>
<div id="chpln">Clicks: 0 clicks</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.select-box').change(function(){
var selectBoxClicks = $('.select-box').val();
$.ajax({url:"AjaxShowClickValue.php?selectBoxClicks="+selectBoxClicks,cache:false,success:function(result){
$('#chpln').html(result);
}});
});
</script>
Create a new page, namely AjaxShowClickValue.php.
AjaxShowClickValue.php (Make Sure, if you changing page name here. Then, change in <script></script> tag too. Both are related.)
<?
echo "Clicks: ".$_GET['selectBoxClicks']." clicks";
?>
II) Method - 2
<select name="" class='select-box'>
<option value="10">10 clicks</option>
<option value="20">20 clicks</option>
<option value="30">30 clicks</option>
<option value="40">40 clicks</option>
</select>
<div id="chpln">Clicks: 0 clicks</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.select-box').change(function(){
$("#chpln").text("Clicks: "+$(this).val()+" clicks");
});
</script>
use jQuery Ajax for making request to the php file..
and use on .change() rather than .click() for changing the dropdown value..
the code will be placed in JS file which make ajax call to the php file on your server..
The php file will takes some params (if any) and perform select query to the databases and return result in response.. in php use json_encode(data) for that..
These examples may also help:
http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php
http://www.plus2net.com/php_tutorial/php_drop_down_list.php
You will find many other examples - Just Google It and understand the key concept!
Hope this helps.
I created an option field and with it I set it to a required field and it works perfect on Chrome/internet explorer/Android's internet. However, when going to my site with Apple's safari on mobile, the required field does not stop the customer when trying to proceed and saying that is a required field.
<div class="productdetailquantity"><?php echo"<form action='./itemsadded.php?view_product=$product_id' method='POST'>"?>
<select class="productsize" name='size' required>
<option value=''>Select a Size</option>
<option value='Small'>Small</option>
<option value='Medium'>Medium</option>
<option value='Large'>Large</option>
<option value='XL'>XL</option>
</select>
Is there something else I have to add other than the html5 'required' field for this to make it work on Safari or why isn't this working?
If Safari does not support it, what is another way I can implement this field to be required?
UPDATE:
After figuring out it isn't supported, I tried doing some JS with it, but my message OR alert won't display. However, it doesn't allow the customer to move forward unless a size is picked, but I need the message to display so they know why.
<div class="productdetailquantity"><?php echo"<form action='./itemsadded.php?view_product=$product_id' method='POST' id='formID'>"?>
<select class="productsize" name='size' required><span id="sizeoptionMSG" style="margin-left:6px;color:darkred;"></span>
<option value='' id="sizeoption">Select a Size</option>
<option value='Small'>Small</option>
<option value='Medium'>Medium</option>
<option value='Large'>Large</option>
<option value='XL'>XL</option>
</select><br><br>
<select class="productquantity" name='quantity'>
<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>
</select>
</div><br><br>
<div class="productdetailaddbutton">
<?php
echo "<input type='hidden' name='product_id' value='$product_id' />
<input type='submit' class='addtocart' name='add_to_cart' value='Add to cart' />";
?>
<script>
var form = document.getElementById('formID'); // form has to have ID:
<form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
if (!event.target.checkValidity()) {
event.preventDefault(); // dismiss the default functionality
document.getElementById('sizeoptionMSG').innerHTML = document.getElementById('sizeoption').value == '' ? 'Please, select a size' : ''; // Show message
document.getElementById('sizeoption').style.borderColor = document.getElementById('sizeoption').value == '' ? 'darkred' : ''; // color field's border
if (document.getElementById('sizeoption').value == '') document.getElementById('sizeoption').focus(); // Put cursor back to the field
alert('Please, select a size.'); // error message
}
}, false);
</script>
At this time, Safari does not support the "required" input attribute.
See here: http://www.w3schools.com/html/html_form_attributes.asp
My contact form page, for user edit details, has two drop-down fields, ‘country’ and ‘city’.
I would like when a user is edit his details that the ‘city’ field will be disabled until something is selected in the ‘country’ drop-down menu.
<form name="item" action="<?php echo base_url(true) ?>" method="post">
<label><?php _e('Country', 'my_theme'); ?></label>
<?php ItemForm::country_select(get_countries(),user()) ; ?>
<label><?php _e('City', 'my_theme'); ?></label>
<?php ItemForm::cities_select(get_cities(),user()) ; ?>
<button class="itemFormButton" type="submit"></button>
</form>
I’ve tried ‘onchange’ in javascript, probably with wrong syntax…
How can I create this?
Thx.
This might help you http://jsfiddle.net/GZ269/. This uses jquery.
Country:<br />
<select id="drop1">
<option value="">Select Country</option>
<option value="c1">Country 1</option>
<option value="c2">Country 2</option>
</select>
<br />
City:<br />
<select id="drop2" disabled >
<option value="">Select Country</option>
<option value="c1">Country 1</option>
<option value="c2">Country 2</option>
</select>
Javascript function:
$("#drop1").change(function(){
var country = $(this).val();
if(!country){
$("#drop2").attr("disabled", true);
return false;
}
$("#drop2").attr("disabled", false);
});
You should do this with Javascript's onchange event, and when this event is fired, you have two options:
Query the cities for the country selected with ajax.
This is good if you support (almost) all the countries in the world.
Here you must develop a PHP script to be queried when this event is fired.
Have a great array with the cities for all the countries supported.
Too bulky if need you to cover many countries.
Less flexible, if you need to add more cities for any country.