i have a radio button option and a select option, the values from drop downs depends on what im selecting in radio buttons, then when i select from drop downs i want it to be redirected to another php page, but its not redirecting properly because my value would be equal to "test1.php Wireline", it has the link plus the class so dropdowns would be filtered...
here are my codes,
<tr>
<td align="center">
<label><input type="radio" name="Radio1" id="Radio1" value="Wireless" />
Wireless</label>
<label><input type="radio" name="Radio1" id="Radio1" value="Wireline" />
Wireline</label></td>
</tr>
<tr>
<td align="center"><select name="Category" id="Category">
<option value=" Wireline Wireless" selected="selected">--</option>
<option value="test1.php Wireline">test1</option>
<option value="test2.php Wireline">test2</option>
<option value="test3.php Wireless">test3</option>
<option value="test4.php Wireless">test4</option>
</select><input type="submit" value="Go" id="submit"/></td>
</tr>
here is my jquery,
$(function() {
$("#submit").hide();
$("#Category").change(function() {
window.location = $(this).val();
})
});
How about using split to get the url
$("#Category").change(function() {
var loc = $(this).val().split(" ")[0];
if(loc)
window.location.href = loc;
})
I added the if so that the first option was null and wouldn't navigate
You may add an attribute for each option which holds the php name page.
APTT
and then in your script:
$("#Category").change(function() {
window.location = $('#Category" :selected').attr('myphp');
})
hope this helps
My solution would be to use a custom attribute to filter and value as URL :
<select name="Category" id="Category">
<option value="test1.php" data-filter="Wireline" selected="selected">--</option>
</select>
And Your code :
$("#Category").change(function() {
if($(this).val().indexOf('.php') != -1) window.location = $(this).val();
})
To acces your filter, you just have to do
$('#Category').children(':selected').data('filter');
Related
I have a webpage which consists of a select list with 6 options, along with a submit button. I need to code it in such a way that when one option is selected in the list and the submit button is clicked, it should open another linked page, whereas when another option is selected and submit button is clicked it should open some another page.
Basically I want each option to open some linked page when the submit button is clicked.
By googling a bit, I understood that I have to use php for this but I am not getting the appropriate code for the same.
I do not want the submit button to open only 1 specific page. Rather,I want it to open 6 different pages corresponding to different options selected.
Code Snippet :
<div>
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>
<select>
<option value=""></option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>
Also i have learnt that it cannot be done using href tag because an option list cannot directly open pages, a submit button is required to perform an action.
Need help to resolve this.
I think ts wants to open multiple window according to selected values.
So here is example:
<div>
<H1>SELECT An subject:</H1>
<form id="link">
<select multiple="multiple">
<option value="">Choose links</option>
<option value="http://stackoverflow.com/">Stackoverflow</option>
<option value="http://google.com/">Google</option>
<option value="http://yahoo.com/">Yahoo</option>
<option value="http://bing.com/">Bing</option>
<option value="http://php.net/">PHP official</option>
<option value="http://w3c.org">W3C</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; "/>
</form>
</div>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$('#link').on('submit', function (e) {
e.preventDefault();
var $form = $(this),
$select = $form.find('select'),
links = $select.val();
if (links.length > 0) {
for (i in links) {
link = links[i];
window.open(link);
}
}
});
</script>
First, you must set multiple attribute to select. Then via jquery you can open each link in new popup. Be careful browsers may block this popups.
UPDATE
If you want to open just one window, you can use #Anant's solution
Simplest solution based on jquery:-
<div>
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>
<select id ="dropDownId"> <!-- give an id to select box-->
<option value="">Select Option</option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>
<script src = "//code.jquery.com/jquery-3.0.0.min.js"></script> <!-- add jquery library-->
<script type = "text/javascript">
$('.SubmitButton').click(function(){ // on submit button click
var urldata = $('#dropDownId :selected').val(); // get the selected option value
window.open("http://"+urldata+".html") // open a new window. here you need to change the url according to your wish.
});
</script>
Note:- This code will do below things:-
1.Select box page is never refreshed.
2.Based on selected value your URL'S are open in new window.
3.Also you can change URL format according to your requirement. I just gave a sample example.
Add this script in your html code
function showPage() {
var sel = document.getElementById('subjects');
var option = sel.options[sel.selectedIndex].value;
window.open(option + ".html");
}
and copy below html code and replace with yours
<select id="subjects">
<option value=""></option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<input class="SubmitButton" type="button" value="Submit" onclick="showPage()" style="font-size:20px; " />
hope this helps :)
You can do this with PHP, but you will need to do 2 things:
Put the select and input into a form in your HTML, like this:
<form action="" method="post">
<select name="opt">
<option value="1">Link 1</option>
<option value="2">Link 2</option>
<!-- etc -->
</select>
<input type="submit" name="submit">Submit</input>
</form>
Have PHP catch the form's POSTed data and redirect to the appropriate page, like this: (put this at the top of your PHP page with the form)
<?php
if (isset($_POST['submit']))
{
if (isset($_POST['opt']))
{
if ($_POST['opt'] == '1') { header('Location: page1.php'); }
elseif ($_POST['opt'] == '2') { header('Location: page2.php'); }
// etc...
}
}
?>
Header redirects only work if there has been no HTML output before they're called, so make sure there's no HTML code before the PHP code block.
I have created a datalist here how can I add a link to option so that whenever i select a option and click on submit i should redirect to another page based on selected option.I have googled a lot but I couldn't any information about this.Thanks in advance
<input list="category" name="category">
<datalist id="category">
<option value="fruits">
<option value="animals">
<option value="vechiles">
<option value="ornaments">
</datalist>
<input type="submit">
You can try below code :
<input list="category" name="category" id="textcat">
<datalist id="category">
<option id="www.google.com" value="fruits">
<option id="www.fb.com" value="animals">
<option id="www.ymail.com" value="vechiles">
<option id="www.msn.com" value="ornaments">
</datalist>
<input id="btn" type="button" value="submit">
<script>
$('#btn').click(function(){
var textval = $('#textcat').val();
$('#category option').each(function(){
if($(this).val() == textval){
alert($(this).attr('id'));
window.location = $(this).attr('id');
}
});
});
</script>
Make some formHandler.php in which you will some routing, and point your form (action="formHandler.php") that includes this select
$redirectLink=$_REQUEST['category'];
header('Location:'.$yourmainSitePath.'/'.$redirectLink)
Are you satisfied ? :D
I am currently running JavaScript after a click of a button in my PHP page which saves data.
a.js:
function save(){
var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];
var newItem = {};
var num = document.getElementById("num").value;
newItem[num] = {
"methv": document.getElementById("methv").value
,'q1': document.getElementById("q1").value,
'q2':document.getElementById("q2").value,
'q3':document.getElementById("q3").value,
'q4':document.getElementById("q4").value,
'comm':document.getElementById("comm").value
};
oldItems.push(newItem);
localStorage.setItem('itemsArray', JSON.stringify(oldItems));
$.post('edit.php', { items: JSON.stringify(oldItems) }, function(response) {
});
In the PHP page, my form looks like this:
edit.php
<form action="" method="post" enctype="multipart/form-data">
<select name="methv" class="textfields" id="methv" style="width:110px" >
<option value= "dont know">dont know </option>
<select name="q1" class="textfields" id="q1" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<select name="q2" class="textfields" id="q2" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<select name="q3" class="textfields" id="q3" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<select name="q4" class="textfields" id="q4" style="width:50px" >
<option value= "-">-</option>
<option value= "L">L</option>
<textarea rows="4" cols="40" id="comm" name="comm" style="width:300px"><?php echo $post['addcomment'] ;?></textarea>
</form>
When I run the PHP page and click the button, in the console, I get a post:
[{"1173627548":{"methv":"dont know","q1":"-","q2":"-","q3":"U","q4":"-","comm":""}},{"1173627548":{"methv":"dont know","q1":"-","q2":"-","q3":"U","q4":"-","comm":""}}]
These are the results from the local storage- one from before and one after it- being clicked (adds every time the button is clicked). How do I get this information and display it on the PHP page?
Do you already have an edit.php file to handle the POST request? This link might help you if not. http://edwin.baculsoft.com/2011/12/how-to-handle-json-post-request-using-php/
Once edit.php is set up to handle the request and return data, you'll probably want to manipulate that data within your response function.
$.post('edit.php', { items: JSON.stringify(oldItems) }, function(data) {
// Do something here, for example...
alert(data);
});
Hopefully this is what you're looking for.
I need to show the item_id when I click one of the item_name list in the dropdown. And when I click submit, the item_name and item_id got by $_POST. Can javascript use to do that?
<?php
$brg="SELECT item_id, item_name FROM tblItem";
$b=mysql_query($brg);
?>
<td align="center">
<select name="item_name">
<?php while($br=mysql_fetch_array($b)){ ?>
<option value=<?echo $br[0].'_'.$br[1]?> selected>
<?php echo $br[1]; ?>
</option>
<?php } ?>
</select>
</td>
Jup, that's possible with Javascript.
Your HTML:
<select name="item_name">
<option value="1_Cheese">Cheese</option>
<option value="2_Cars">Cars</option>
<option value="3_Planes">Planes</option>
</select>
<input type="button" onclick="alert(getSelectedValue())" value="Get Select Id" />
And your Javascript, to access the ID from the options value:
function getSelectedValue()
{
var sel = document.getElementsByName('item_name')[0];
return sel.options[sel.selectedIndex].value.split("_")[0];
}
See this fiddle: http://jsfiddle.net/acz6Q/
It would be a little easier with jQuery (also appended an event handler):
$(document).ready(function()
{
$("select[name=item_name]").on("change", function()
{
alert("new item id = " + $(this).val().split("_")[0]);
});
});
And here is the jQuery version fiddle: http://jsfiddle.net/acz6Q/1/
Hope this helps!
Try this:
<form action="" method="post">
<input type="hidden" id="item_id" name="item_id" />
<input type="hidden" id="item_name" name="item_name" />
<select id="my_select" name="my_select">
<option value="item_id_1">item_name_1</option>
<option value="item_id_2">item_name_2</option>
<option value="item_id_3">item_name_3</option>
</select>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#my_select").change(function() {
$("#item_id").val($("#my_select").val());
$("#item_name").val($("#my_select option:selected").text());
});
});
</script>
Note that you need to include the jQuery library first. Also you can see how it works from here jsfiddle.net/2FsNP/3. And with this method you don't need to combine between value and text of the option tag with the underscore.
I'm working on a simple php contact form and struggling to get the "other" selection on the dropdown to show a text field option when it's selected. The form is included onto the page with <?php require_once('includes/contact_form.php'); ?> and the footer is also an include (the footer is where I have added the JS).
But it just wont work...
Here is the Form:
<label>How did you hear about us?</label>
<select name="how" class="selectfield" id="how">
<option value="">Please Select...</option>
<option value="Advertisement">Advertisement</option>
<option value="Care at Home Today">Care at Home Today</option>
<option value="Email-Newsletter">Email/Newsletter</option>
<option value="Facebook">Facebook</option>
<option value="Family-Friend">Family or Friend</option>
<option value="Magazine">Magazine Article</option>
<option value="Twitter">Twitter</option>
<option value="Website-Search Engine">Website/Search Engine</option>
<option value="Other">Other</option>
</select>
<input type='text' id="other" class="hidden" />
<input name="contactus" type="submit" class="submit" id="contactus" value="Submit" />
</form>
Here is the JS
$('#how').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
}
});
Not sure if it is a typo in the question but your dropdown value is "Other" and in your js you are testing for "other". So there is a mismatch. Might be your issue
Here is a working fiddle of your example just changing the "other" to "Other" in your if statement.
DEMO
As coder1984 has suggested though, simply using jquery's .show() and .hide() in your if
statement would also work.
if(selected_item == "Other"){
$('#other').val("").show()
}else{
$('#other').val(selected_item).hide()
}
Your problem is in your string comparison, it should be:
if(selected_item == "Other"){
With the Uppercase O, Tested
Try:
$('#how').change(function(){
var selected_item = $(this).val()
if(selected_item == "Other"){ // 'Other'
$('#other').val('').show(); //show textbox if Other is selected
}else{
$('#other').hide(); //Hide textbox if anything else is selected
}
});