I have the following form:
<form>
<div>Adults</div>
<div>
<select name="adults">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div>
<div>Children</div>
<div>
<select name="children">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div>
<div>Check-in date</div>
<div>
<input name="date_from" value="16-04-2015" type="text"></div>
</div>
<div>
<div>Check-out date</div>
<div><input name="date_to" value="17-04-2015" type="text"></div>
</div>
<div>
<input value="Check Availability" type="submit">
</div>
</form>
Now I want to call a javascript function on above form submit. This function will get all form elements values and create the following URL to redirect.
online-reservation.html#!/Rooms/date_from:16-04-2015/date_to:17-04-2015/adults:1/children:0
How can I create this JS function?
Thanks.
How about the following:
# Serialize the data like we want it
function serialize (form) {
return [].slice.call(form.querySelectorAll('[name]'))
.reduce(function (carry, input) {
return carry + '/' + input.name + ':' + encodeURIComponent(input.value);
}, '');
}
function submitHandler (e) {
e.preventDefault();
window.location = '/online-reservation.html#!' + serialize(e.target)
}
# Bind handler to form submit
document.querySelector('form')
.addEventListener('submit', submitHandler);
Here's a fiddle that will give you exactly what you asked for: http://jsfiddle.net/9Le00jtw/
$("#formone").submit( function() {
document.location.assign( "http://onlinereservation.html#!" + "/" + $("input[name=date_from]").val() + "/" + $("input[name=date_to]").val() + "/adults:" + $("select[name=adults]").val() + "/children:" + $("select[name=children]").val() );
return false;
});
Here's a fiddle for the way that I would do it: http://jsfiddle.net/xLmsb1xo/1/
Now I realize that you want to use the backslash character to separate each value, however, probably the easiest way and, indeed, the most common/standard way is to use the syntax "?variable=", that's why this code is modeled after that. It makes it much easier to parse out variables from the url. You'll notice in the code that i set it up to display as a simple alert() message. In order to link to the page instead of alerting, you would replace alert() with document.location.assign()
JavaScript:
window.onload = function() {
$("#formone").submit( function() {
/* when user hits the submit button do following */
alert( window.location.href + "?datefrom=" + $("input[name=date_from]").val() + "?dateto=" + $("input[name=date_to]").val() + "?adults=" + $("select[name=adults]").val() + "?children=" + $("select[name=children]").val() );
*/get the window location and add "?variable=" then the value of
the input or select box for that variable a.e. ?dateto=04-17-2015 */
return false;
});
}
In the above code we get the location of the current window using window.location.href and then we append the variables to it, with a variable name and then the value of the appropriate input/select boxes using their name attributes. The selector syntax is tagname[attr=text] - so if we're trying to find an input box with the name bingo, we would use this selector in jQuery $("input[name=bingo]") and if we were looking for a selection box with the name banana we would do use this selector $("select[name=banana]")
HTML:
<form method="POST" id="formone">
<!-- we added the method="POST" so that the browser knows what to do with
the form when the submit button is tapped and the id so that we can identify
it -->
<div>Adults</div>
<div>
<select name="adults">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div>
<div>Children</div>
<div>
<select name="children">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div>
<div>Check-in date</div>
<div>
<input name="date_from" value="16-04-2015" type="text"></div>
</div>
<div>
<div>Check-out date</div>
<div><input name="date_to" value="17-04-2015" type="text"></div>
</div>
<div>
<input value="Check Availability" type="submit">
</div>
</form>
EDIT: I added "return false;" to the submit() function. The reason why is because we need to tell the form to stop trying to submit and to process the script as is, this will allow a redirect.
This is a string manipulation problem. Your function needs to output a string with the desired fields, yes?
If you have jQuery, you can extract the values from your fields like so:
var adult = $('.select[name=adults]').val();
var date_from = $('.input[name=date_from]').val();
etc...
Then you can add the strings together in your function and return the output.
You don't usually use form for redirect.
But you can create function, which collects data from form fields. It must iterate selects' and inputs' tags of form and generate key value strings, some sort of date_from:16-04-2015. After that you should join this strings with /. As a result you will have right side of url so you can combine it with static piece of url. In your case static piece will be online-reservation.html#!/Rooms/.
Now you can call document.location.href = <here your generated url> to change your location. At the same time if your function is form submission event handler you should remember to prevent default form submission event.
You can find working solution here
Related
I have created with javascript and I get a result of a string.I get that result on my html code
<div id="results"></div>
Next,I want when I select for example Red to check if it is the the same thing (string), the select option - > Red with the string of this code
<div id="results"></div>
I was trying to do it but I failed.It is not working not even sure ,if I press the submit button I will send the string.
<div id="results"></div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="submit" value="results"/>
It appears that you want to check whether the selected option is equal to the text value of the div #results. You can achieve this effect like so:
$(document).ready(function(){
var select = $("select");
$("input[type=\"button\"]").click(function(){
var text = select.find(":selected").text();
if(text==$("#results").text()){
$("#results").html(text+" is equal!");
}else{
$("#results").html(text+" is not equal :(");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results">Red</div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="button" value="results"/>
</form>
A form is going to be Sending data somewhere, it would be best to remove the form, leaving the select and button elements. In the button add the code onclick='myFunction() ; when the button is clicked it will run the javascript function called myFunction(). Also you need to give the select a Id. I'm using selectInput
<script>myFunction() { document.getElementById('result').innerHTML = document.getElementById('selectInput').value;} </script>
Now when ever the button is pressed it will set the content of the div equal to the value entity in the selected select box option
You lack an action attribute.
<form method="post" action="path/to/file">
<select name="select">
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input type="submit" value="Get Results" />
</form>
Use a function, and a regular button. No form is needed.
<button onclick='func()'></button>
const func = () => {...}
I am trying to add comma separated values to a hidden form field for later processing using the change of a dropdown menu as my trigger.
$("#artistselect").change(function() {
var allids = [];
allids.push($(this).children(":selected").attr("id"));
$("input[name=artistslist]").attr("value", $(allids).append(allids + ", "));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="artistselect">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
<input type="hidden" name="artistslist" value="" />
</form>
Best I can manage is to get the value to change to the selected dropdown, but it wont add them together with the commas.
Move var allids=[]; out of the event because you're destroying it every time it fires.
var allids=[];
$("#artistselect").change(function() {
allids.push($(this).children(":selected").attr("id"));
$("input[name=artistslist]").val(allids.join(', '));
});
On the last line you can use Array.prototype.join to get a comma separated string from the array.
Not sure why you are using .attr("id") when your html shows your options with no id attribute. Looks like you want value not id.
You have two problems.
First, you're emptying allids every time the user selects from the menu. So when you push onto it, you lose the old values, and you just get the most recent value.
Second, $(allids).append(allids + ", ") doesn't do what you think it does. .append() is for adding something to a DOM element, not concatenating strings.
To get the value of a <select>, just use $(this).val(), you don't need to search for :selected. Your <option> elements don't have IDs, so .attr('id') won't return anything.
var allids = [];
$("#artistselect").change(function() {
allids.push($(this).val());
$("input[name=artistslist]").val(allids.join(", "));
});
$("#show").click(function() {
console.log($("input[name=artistslist]").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="artistselect">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="artistslist" value="" />
<button type="button" id="show">Show hidden value</button>
</form>
I'm trying to use Select2 (https://select2.github.io) to allow a user to type multiple tags into a field before submitting a form. In my Laravel PHP app, I'll then take those tags, determine if they exist and add them into a database.
My problem is that I can't seem to get Select2 to recognise there are multiple tags being entered by the user. When I interrogate the form data, I only see the LAST tag a user typed as opposed to ALL the tags.
My Select2 element is:
<select class="tags-field" name="tags" data-tags="true" data-placeholder="TAGS" multiple="multiple">
</select>
and my JQuery is:
$(function() {
$(".tags-field").select2({
maximumSelectionLength: 3,
tokenSeparators: [','],
});
}
There are no Javascript errors and it works perfectly fine except I cannot detect ALL the tags.
To cause PHP to make all the selected choices available as an array, suffix your select name with a pair of square brackets, like this:
<select class="tags-field" name="tags[]" data-tags="true" data-placeholder="TAGS" multiple="multiple">
If this form is sent to a PHP program, the value of $_POST['tags'] will be an array. Note that the square brackets in the form control name aren't a part of the array key. You would process such a form like this:
<?php
$tags = $_POST['tags'];
// Note that $tags will be an array.
foreach ($tags as $t) {
echo "$t<br />";
}
?>
References here: http://bbrown.kennesaw.edu/papers/php2.html
use hidden input field in order to send all values
use onsubmit event to set the value of the hidden field
HTML:
<form method="post" action="post.php">
<select multiple id="e1" style="width:300px" name="_state">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="hidden" name="state" value="" />
<input type="submit"/>
</form>
JQ:
$("#e1").select2();
$('form').submit(function () {
var newvalue = '';
var value = $('select[name="_state"]').val();
if (value) {
newvalue = value;
}
$('input[name="state"]').val(newvalue);
})
I'm creating a pretty url base web and I have a problem with get variables in form.
I have a url like localhost/events/1 (1 is a get variable $_GET['eventID']).
I want to send the eventID with a form like below
<select name='eventID'>
<option value='1'>firstEvent</option>
<option value='2'>secondEvent</option>
<option value='3'>thirdEvent</option>
</select>
but when i click on submit button to send information into page and my url change to this
localhost/events/?eventID=1
but i want my url to be look like this
localhost/events/1
how could I achive to this?
If you want to do this at the client side, you can use the javascript onsubmit event and redirect to the page that you want. For example:
<script type="text/javascript">
function yourFunction()
{
var sel = document.getElementById('eventID');
if (sel.selectedIndex !== -1)
{
window.location.href = '/events/' + sel.options[sel.selectedIndex].value;
}
return false;
}
</script>
<form method="get" onsubmit="return yourFunction()">
<select name="eventID" id="eventID">
<option value="1">firstEvent</option>
<option value="2">secondEvent</option>
<option value="3">thirdEvent</option>
</select>
<input type="submit">
</form>
According to W3C The question mark is part of the definition of form submission with the GET method, so you can't actually do this. but you can redirect the page with javascript.
<form id="form" method="get">
<select name='eventID'>
<option value='1'>firstEvent</option>
<option value='2'>secondEvent</option>
<option value='3'>thirdEvent</option>
</select>
<input type="button" onclick="document.location.href= '/events/' + form.eventID.value" value="Submit">
</form>
thanks to all.
I want a solution without javascript or jquery
but it seems, there is no way to do this without them both.
I finally wrote some code in Jquery to solve this problem.
<form id="events" method="get">
<select name='eventID'>
<option value='1'>firstEvent</option>
<option value='2'>secondEvent</option>
<option value='3'>thirdEvent</option>
</select>
<input type="button" onclick="document.location.href= '/events/' + form.eventID.value" value="Submit">
</form>
$('#events').on('submit', function(e){
e.preventDefault();
document.location.href= '/events/' + $(this).find('select#sportID').val();
})
I'm working on a semantic web application and I'm using Sgvizler. I'm not using a database, fuseki, php or something like that. I would like to let the user select certain value and use that value in a SPARQL query. The user can select a value from a drop down menu and then click the search button to return that value. I'm using the jQuery attr() method to change the data-sgvizler-query attribute into the desired query. I got this code so far:
<body>
<form>
<select id="values">
<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>
</select>
<input type="button" id="searchbutton" value="Search"/>
</form>
<script>
$(document).ready(function(){
$("#searchbutton").click(function(){
$("#sgvzl_example").attr("data-sgvizler-query","SELECT * WHERE {myprefix:" + $('#values').val() + " ?b ?c}");
});
});
$(document).ready(sgvizler.containerDrawAll);
</script>
<div id="sgvzl_example"
data-sgvizler-query="SELECT * WHERE { myprefix:1 ?b ?c}"
data-sgvizler-chart="google.visualization.Table"
data-sgvizler-log="2"
style="width:800px; height:600px;"
></div>
</body>
Unfortunately this is not working. The data-sgvizler-query attribute won't change. I made sure all my prefixes, sparql endpoint etc. are correct. Is there a way to solve this?