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.
Related
I have a list pulled from a database that currently uses 2 submit buttons. one to refresh the page with a different set of data and the other to update the page.
the code is basically...
// this is a little bit pseudo so dont worry about spelling mistakes...
<?php
if($_POST['update']) {
// update database
}
if($_POST['filter']) {
// show different data
}
?>
<form type="post">
<button type="submit" name= "update" value="update">Update</button>
<select name="selectitem">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type='submit' name='filter' value='filter'>Filter</button>
</form>
This works fine but I was thinking it would be better to have the select element do the refresh when changed using onChange but how do i get it to submit the right button (in this case the filter button). I am using jquery so suggestions using that would be fine too.
the form posts back to the same page so it can refresh or update the data based on the select element.
I guess i want to get rid of the filter button but perform its specific action onchange of the select element.
hope you can help
thanks
Set an event handler on the select element that will trigger a click to the button.
Like this:
$('select[name="selectitem"]').change(function(e) {
$('button[name="filter"]').click();
});
I hope that helps!
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'm trying to take a user input, turn it into a JS variable, and use it in multiple places in the html.
I've included an alert function immediately after the user enters the input and that works, but I can't display the variable at the bottom.
Here's the code:
<body>
<div class="hero-unit">
<h1> Title </h1>
<p> This form description </p>
<form class="well" name="formInput" action= "#">
<label>Input</label>
<input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="["AAA","BBB","CCC","DDD","EEE","FFF","GGG","HHH","III","JJJ","KKK","LLL"]"/>
</label>
<div class="form-actions" "span3">
<input name="submit" type="submit" class="btn" value="Select" onclick="alert('you chose ' + theInput.value)"/>
<script language="javascript" type="text/javascript">
var theInput = document.getElementById('txtvarInput');
</script>
</div>
</form>
</div>
<div class="page-header">
<h1>Input:
<script language="javascript" type="text/javascript">
document.write(theInput.value);
</script>
</h1>
</div>
JavaScript works a bit differently than you might be imagining.
When you say...
document.write(theInput.value);
...right in the middle of some html element somewhere, it only calls that once when the page first renders.
If you want to call it when the text input changes or a button is clicked you'll need to put it in a function and call that function when some event happens on some element.
See this link to learn about events: http://www.w3schools.com/js/js_events.asp
HOWEVER, document.write() is a bit different where, when called from a function, it will overwrite the entire page!
So... in this case you will need to "append" a text element to the <h1> element that you are trying to update.
See this link to learn more about the document object model (DOM) and working with its elements: http://www.w3schools.com/jsref/dom_obj_element.asp
Once you're familiar with these principals you'll want to make your life a lot easier and your code more cross-browser friendly by checking out a framework for doing these things like jQuery: http://jquery.com/
UPDATE (ADDED VALUE):
For those interested, something like what is being asked here can be accomplished quite easily today in "pageless", JavaScript based web applications using AngularJS (http://angularjs.org/). Do read up on the documentation and the appropriate circumstances under which this technology can be utilized. Start with the FAQs (http://docs.angularjs.org/misc/faq) and move into the videos (http://www.youtube.com/user/angularjs).
In a document.onload function I would put the following:
theInput.onchange = function(event){
document.getElementById('h1Id').innerHTML = theInput.value
}
presumably you want the HTML to update everytime the user changes the input?
The update should happen after the button is clicked.
<html>
<body>
<div class="hero-unit">
<h1> Title </h1>
<p> This form description </p>
<form class="well" name="formInput" action= "#">
<label>Input</label>
<input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="["AAA","BBB","CCC","DDD","EEE","FFF","GGG","HHH","III","JJJ","KKK","LLL"]"/>
</label>
<div class="form-actions" "span3">
// UPDATED HERE
<input name="submit" type="submit" class="btn" value="Select"
onclick="alert('you chose ' + theInput.value);
document.getElementById('inputresult').innerHTML = theInput.value;"/>
<script language="JavaScript" type="Text/JavaScript">
var theInput = document.getElementById('txtvarInput');
</script>
</div>
</form>
</div>
<div class="page-header">
<h1 id="myh1">Input:</h1>
<!-- UPDATED HERE -->
<div id="inputresult">
</div>
</h1>
</div>
Provide semantic markup, including placeholders for your values, e.g.
Input: <span class="inp-reflector"></span>
<!-- Or, for HTML5+ -->
Input: <output class="inp-reflector"></output>
Procedurally attach one or more event handlers to your input:
var inp = document.querySelector('#input-id');
inp.addEventListener('input',update,false);
inp.addEventListener('change',update,false);
Have your event handler(s) retrieve the value of the input and change your page:
function update(evt){
var changedElement = evt.target;
var newValue = changedElement.value;
var outputs = document.querySelectorAll('.inp-reflector');
outputs.forEach(function(out){
out.innerHTML = newValue;
});
}
The answer intentionally uses JavaScript features from modern browsers only.
For a generic reflection system:
<input class="reflectable" data-reflect-to=".bar">
…
document.querySelectorAll('.reflectable').forEach(function(el){
el.addEventListener('change',reflect,false);
el.addEventListener('input',reflect,false);
});
function reflect(evt){
var outSelector = evt.getAttribute('data-reflect-to');
document.querySelectorAll(outSelector).forEach(function(o){
o.innerHTML = evt.target.value;
});
}
Inline script such as the following, will execute as soon as the browser renders them. So the script below executes as soon as the browser is rendering that particular script tag and way before the user has entered any input, therefore the global variable you have created is not populated with any data inputted by the user. You need to attach an event to the submit button on the page that sets the global variable and displays it on the page.
<div class="page-header">
<h1>Input:
<script language="JavaScript" type="Text/JavaScript">
document.write(theInput.value);
</script>
</h1>
</div>
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/