I have a question regarding ajax, I have a category drop down box and some javascript in place so that when the user selects a category, this automatically redirects the page to that category without having to click a submit button. My question is simple, how can I add ajax to this process to stop the page load and just load the div with the category items?
I am using expression engine cms, which I know doesn't matter but the tags are in the code.
This is my code:
<script language="JavaScript" type="text/javascript">
var theTarget = "_top";
function goThere() {
if (!document.theForm.theMenu.selectedIndex=="") {
window.open(document.theForm.theMenu.options[document.theForm.theMenu.selectedIndex].value, theTarget,"");
}
}
</script>
<form name="theForm" action="">
<select name="theMenu" size="1" onchange="goThere()">
{exp:channel:categories channel="store" style="linear" category_group="1"}
<option value="{path='store-directory'}">{category_name}</option>
{/exp:channel:categories}
</select>
</form>
<script>function goThere(val)
{
$.post(val, function(data) {
$("#categoryDiv").html(data);
});
}</script>
<form name="theForm" action="">
<select name="theMenu" size="1" onchange="goThere(this.value)">
{exp:channel:categories channel="store" style="linear" category_group="1"}
<option value="{path='store-directory'}">{category_name}</option>
{/exp:channel:categories}
</select>
<div id="categoryDiv">
</div>
</form>
Use JQuery's $.ajax function to replace the <option> tags within the select based on an ajax callback. The script being called via Ajax would simply return <option> markup ready to be loaded right into the <select>
Take a look at the $.ajax method with JQuery.
http://api.jquery.com/jQuery.ajax/
Related
that might be a simple question, but I am not yet so firm with JavaScript.
I want to have a search form with autocomplete using select2.
When the user selects a result in the select2 dropdown box, I want to submit the search form right away so that I do not need a button for the form.
I found the select2:select event handler - but I do not get it to work. Any help?
My select2 works fine and if I include a button, I can submit the form and receive the selected object id:
<form action="" method="get" id="project-search">
<select class="form-control"
data-autocomplete-light-function="select2"
data-autocomplete-light-url="/output/project-autocomplete/"
data-placeholder="Suche nach Projektnr. oder Projektleiter"
id="id_projekt" name="projekt">
<option value="" selected="selected">----------</option>
</select>
</form>
That javascript snippet does not seem to work:
<script type="text/javascript">
$(document).ready(function() {
$eventSelect.on("select2:select", function() {
console.log("select2:select");
$(this).parents('form').submit();
});
});
</script>
Edit: I get this error message in my chrome console:
Uncaught ReferenceError: $eventSelect is not defined
Thank you!
I am using django with django-autocomplete-light for the backend btw.
https://api.jquery.com/change/
Jquery has a function able to detect changes on select/checkboxes. Try:
$('#id_projekt').change(function(){
$('#project-search').submit();
});
A simple vanilla solution
<select onchange="this.form.submit()">
...
</select>
I want to add a multiselect widget to a form that is set with some values. And when the user clicks on a button, the values inside the multiselect widget changes.
When I do this the form crashes.
This is a sample code for the issue:
<script type="text/javascript" >
function test(){
var msObj = dijit.byId('ms1');
msObj.set('label', ['val1', 'val2']);
}
</script>
</head>
<body class="claro">
<h2>Multiselect Test</h2>
<h3>Click on test button to see new data loaded in the multiselect widget</h3>
<div data-dojo-type="dijit/form/Form" enctype="multipart/form-data"
action="" method="POST">
<div data-dojo-type="dojox/layout/TableContainer"
data-dojo-props="cols:1">
<select id="ms1" data-dojo-type="dijit/form/MultiSelect"
title="MultiSelect123:" name="multi_select">
<option value="English 123">English 123</option>
<option value="1234.56">1234.56</option>
</select>
</div>
<br>
<button onclick="test()">test</button>
</body>
The reason for the crash is because on clicking the button the form gets submitted.
To avoid submitting the form we need to return false value in the button click function. i.e
<button onclick="test(); return false;">test</button>
Also the Multiselect Dojo widget is not associated with a data store/object. As per the documentation it is just a wrapper over the SELECT HTML element.
As a result you need to use the basic HTML/JS code to add and remove the OPTIONS for the widget.
Check the jsfiddle for a working example.
I am having trouble trying to figure out how to navigate to different web pages using a drop down list and submit. I have three forms:
main.php
two.php
three.php
In my main.php page I have a drop down list consisting of only two options 'second' and 'third'. How can I use these two options to navigate to other php pages? For example, if I selected the option 'two' and click submit, the page should then take me to the second.php page. And if I select option 'three', I will be taken to the third.php page.
Also, once I am directed to one of the php pages, how can I then be able to go back to the 'main.php' page if I decide to go to the other php page instead? (I thought perhaps the use of a back button).
Below is part of my 'main.php' page:
<label>Select the page you wish to go:</label></td>
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select></td>
On <select></select> value change :
HTML :
<select name="pages" onChange="my_function(this)">
JavaScript :
function my_function(element){
document.location.href = element.value
}
Example
On <button></button> click :
HTML :
<button onClick="my_function()"></button>
JavaScript :
function my_function(){
document.location.href = document.querySelector('select[name="pages"]').value
}
Example
You can do multiple things. If you dont wan't to rely on javascript, make the form submit to a file like router.php.
inside router.php put:
<?php
if (isset($_POST['pages']) {
header('Location: ' . $_POST['pages']);
}
Which will effectively forward the request to the page you submitted in the select.
You also have to change your html a bit:
<label>Select the page you wish to go:</label></td>
<form method="post" action="router.php">
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select>
<input type="submit" value="go there" />
</form>
If you are fine with javascript go with #notulysses's answer, its way easier and quicker.
Using POST values directly in a header method is kinda nasty imo.
Jquery solution
HTML CODE:
<form id="frm" method="post" action="" >
<label>Select the page you wish to go:</label>
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select>
<input type="submit" name="sub" value="Finish" />
</form>
JQUERY CODE
$('#frm').on('submit',function () {
var nextPage= $('select option:selected').val();
$(this).attr('action',nextPage);
return true;
});
Happy Coding :)
I am developing a page in PHP. It has a select drop down(user names) and a form below containing user details. On selecting a particular user from drop down, details of selected user should be populated in form below.
Am beginner to PHP.
How to do this? Any simple solution
If you want to make it an AJAX request.
Follow the steps
Lets assume you make your post requests to user.php
<form id='getDetails' type='post' action='user.php'>
<select id='users'>
<option>AMAN</option>
<option>ABHAY</option>
</select>
</form>
<script>
$(document).ready(function(){
$('users').on('change', function(){
var userVal = $('users option:selected').text();
$.post('user.php',{user:userVal},function(data){
console.log(data);
//Populate the form by using data variable
//which contains the data you need
});
});
});
</script>
Make sure to include jQuery
You need to put dropdown in a form.
On change event of dropdown just post form on same URL with get method.
Check the paramenter in url and fetch data and display.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#userid').change(function(){
$('#getUserData').submit();
});
});
</script>
</head>
<body>
<form name='getUserData' id='getUserData' action='#' method='GET'>
Select User : <select id='userid' name='userid'>
<option value='1'>Lokendra</option>
<option value='2'>Amit</option>
<option value='3'>Nitin</option>
<option value='4'>Rishabh</option>
</select>
</form>
<?php
$userArray=array(
1 => 'Lokendra',
2 => 'Amit',
3 => 'Nitin',
4 => 'Rishabh',
);
$postedData=$_REQUEST;
// Fire your select query here and diplay data
if(isset($postedData['userid'])){
echo "Selected User name =>".$userArray[$postedData['userid']];
}
?>
</body>
</html>
Dont forget to accept this answer if helps :)
I am trying to create a dropdown menu with numbers 1 to 6, and when a user selects a number and clicks the button it will redirect the user to the webpage associated with that number selection. The redirected content will display at . I would like to do this using AJAX and jQuery or javascript. I can get a redirection if I give an id to this line: , but that is not what my ultimate goal is. It works for redirection but not to the corresponding webpage associated with a number. I tried assigning id's to each option selection but manipulating the ajax.js file with those id's does not provide any redirection. I am not sure how to "bind", "focus" or "select" a particular dropdown selection in the AJAX code. I may need to create a loop and a variable in the AJAX code or a switch statement to properly redirect to the correct associated webpage with the number selected in the dropdown menu once I am able to get the option selection to "bind", "focus" or "select". I am not sure if AJAX allows a loop or switch in the code, or I may need to create an array, or create an external file for AJAX to select from. If you have any suggestions or ideas as to how to make this work, please let me know. Thank you very much. Have a nice weekend. Anne
In dropdown.html
<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
</head>
<body>
<form name="redirect">
<select name="selection">
<option id="one" value="pageone.php">1</option>
<option id="two" value="pagetwo.php">2</option>
<option id="three" value="pagethree.php">3</option>
<option id="four" value="pagefour.php">4</option>
<option id="five" value="pagefive.php">5</option>
<option id="six" value="pagesix.php">6</option>
</select>
<input type="button" value="Click Here!" id="btn" >
<div id="content"></div>
</form>
<script type='text/javascript' src='js/ajax.js'></script>
</body>
</html>
In js/ajax.js (this works)
$('#btn').click(function() {
$.ajax({
url: 'redirpage.html',
success: function(data) {
$('#content').html(data);
}
});
});
In js/ajax.js (this doesn't work, neither do focus(), select() or other event handlers)
$('#one').bind(function() {
$.ajax({
url: 'pageone.php',
success: function(data) {
$('#content').html(data);
}
});
});
If I understand it correctly, you want to make an ajax call to the pages that are the values of the select? And they return data that should be displayed in #content?
What kind of data is returned - simple html?
In this case I'd try this:
$('select[name=selection]').change(function(){
var url = $(this).val();
$.post(url, function(data) {
$('#content').html(data);
});
});
You don't need the IDs for the options.