I am trying to insert into the database a selected option value and a text input with jQuery but I get a
Uncaught SyntaxError: Unexpected identifier
<div class="text-field" id="catUp" >
<form id="upload_category" method="post" >
<div class="text-inside">
<select id="select-category">
<option value="audio">Audio,Video</option>
<option value="electro">Electrocasnice</option>
<option value="ingrijire">Ingrijire personala</option>
<option value="pc">PC</option>
<option value="telefoane">Tablete,telefoane</option>
</select><br><br>
<div id="insert-category">Nume Categorie<br>
<input type="text" name="input-categorie" /><br><br>
</div>
<input type="submit" name="sumit" value="Adauga categorie" id="catButton" class="button" /><br><br>
</div>
</form>
</div>
$('#upload-category').on('submit', function(){
var getCategory = '';
var getCategoryName = $('#insert-category').val();
$('#select-category').change(function(){
var selectedCat = $('#select-category option:selected');
getCategoryName = selectedCat;
})
var items = {
'categorie': getCategory,
'nume':getCategoryName
}
$.ajax({
url:'category.php',
type: 'post',
contentType: 'application/json',
dataType: 'json'
data:JSON.stringify(items)
});
});
$.ajax({
url:'category.php',
type: 'post',
contentType: 'application/json',
dataType: 'json', //you forgot comma here
data:JSON.stringify(items)
});
you forgot comma here after this line dataType: 'json',
Few things I have noticed.
//this is div
$('#insert-category').val();
//you probably wanted input value - add id to input-categorie and get value from there.
Why do you have change function inside submit? And you forgot ; add the end of change function.
Add prevent default at the end of submit, to prevent from page reloading (return false;).
Related
I'm new here to stack overflow and I've been searching on how to program drop-down menus in HTML and jscript. I've found a few decent examples but since I don't know much about jscript. I'm trying to integrate what I currently have to work with the labVIEW webservice. I will add the code I have below. Basically the buttons I have work perfectly with the javascript and the buttons. I want the select menus to work exactly the same so when I select a value it will call a function that will assign the value I need to the URL. For example when the start button is pushed it assigns start=1 in the url "digital" I want the same thing to happen for the select menu. When I select 511 from the dropdown menu I want it to assign the variable patternselector=1 in the url digital. Same thing for 2047 patternselector=0 in the url"digital" and so forth etc. I don't know what I'm doing at all so if someone could please help me right the example code/ function so I know how to program all of my other select menu's I have that will be awesome.
<html>
<head>
<script language="javascript" type="text/javascript" src="js/jquery.js </script>
<script type="text/javascript">
<select id="category" class="icon-menu" onchange="myFunction()"></select>
$(function() {
function onDataReceived(data) {
// update the displayed count
$('#errorfreeseconds').text(String(data.Temperature).substring(0,4) + " degF");
}
function fetchData() {
$.ajax({
url: "digital",
type: "GET",
//data: params,
dataType: "json",
success: onDataReceived
});
setTimeout(fetchData, 1000);
}
fetchData();
$('#start').click(function(){
$.ajax({
url: "digital",
type: "GET",
data: "start=1",
//dataType: "json",
//success: onDataReceived
});
});
$('#stop').click(function(){
$.ajax({
url: "digital",
type: "GET",
data: "stop=1",
//dataType: "json",
//success: onDataReceived
});
});
});
</script>
</head>
<body>
<div id="errorfreeseconds" style="font-size: 300%">0 Error Free Seconds</div>
</br>
<button id="start"style="font-size: 200%">Start Test</button>
<button id="stop" style="font-size: 200%">Stop Test</button>
<select>
<option value="2047">2047</option>
<option value="511">511</option>
<option value="63">63</option>
<option value="71">7:1</option>
<option value="31">3:1</option>
<option value="17">1:7</option>
<option value="14">1:4</option>
<option value="13">1:3</option>
<option value="11">1:1</option>
<option value="Space">Space</option>
<option value="Mark">Mark</option>
<option value="215">2^15-1</option>
<option value="220">2^20-1</option>
<option value="223">2^23-1</option>
<option value="QRSS">QRSS</option>
</select>
<h3 style="color:green;">BAUD RATE(in Hertz)</h3>
<select>
</body>
</html>
Assuming the select element has id="mySelect" :
$('#mySelect').on('change', function() {
var value = $(this).val();
// do whatever arcane thing you need to do with the value.
});
I want to update a select options according to date that the user picks. For that I tried using ajax request to get data and append the data received to a select element as options. There's nothing wrong with the json object that's received as I tried logging data to console and it gives the data I ant. But hen I try to append it to select element the options do not get appended.
JavaScript code
$.ajax({
type: 'GET',
url: 'sessions',
data: { date: date },
success: function (data) {
var sessions = data['sessions'];
console.log(sessions);
$('select').html('');
$.each(sessions, function (i, session) {
$('select').append($('<option/>', {
value: session[0],
text : session[1]
}));
console.log(i);
console.log(session[1]);
});
}
});
html code
<div class="row">
<div id="sessionDiv" class="input-field" style="padding:10px">
<select class="black-text text-lighten-1" name="session" id="session" >
<option value="0" disabled selected>Choose your preferred session</option>
</select>
<label for="session" class="purple-text text-lighten-2"> Session :</label>
</div>
function f1(){ $.ajax({
type: 'GET',
url: 'sessions',
data: { date: date },
success: function (data) {
var sessions = data['sessions'];
console.log(sessions);
$('select').html('');
$.each(sessions, function (i, session) {
$('select').append($('<option/>', {
value: session[0],
text : session[1]
}));
console.log(i);
console.log(session[1]);
});
}
});
}
var data ={
"sessions" : [{"value":"value 1","text":"Option 1"},
{"value":"value 2","text":"Option 2"},
{"value":"value 3","text":"Option 3"},
{"value":"value 4","text":"Option 4"},
{"value":"value 5","text":"Option 5"}]
}
function fillSelect(){
var sessionList=data.sessions;
$('#session12').empty();
var msg='';
console.log(sessionList.length);
for(i=0;i<sessionList.length;i++){
var bean=sessionList[i];
msg+='<option value="'+bean.value+'">'+bean.text+'</option>';
}
$('#session12').html(msg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div id="sessionDiv" class="input-field" style="padding:10px">
<select class="black-text text-lighten-1" name="session" id="session12" >
<option value="0" disabled selected>Choose your preferred session</option>
</select>
<button type="button" onclick="fillSelect()"> click to fill</button>
<label for="session" class="purple-text text-lighten-2"> Session :</label>
</div>
</div>
If response of async request you are getting in data is similar to what i have written in data variable in snippet then my way of generating the option will work just fine. If response you are getting is exactly same as i have shown in data(by that i mean structure of the variable) then you can simply replace all your code in ajax function with my code in fillSelect function
im using the Jquery validation plugin (http://jqueryvalidation.org/) to do some simple front end form validation. As far as i can see its all working, however now my form seems to be attempting to send as get rather than post (all data saved into query string and reloaded on page). Its really weird, I cant figure out what ive done wrong here
HTML
<form id ="form1">
<p>What do you do for a living?</p>
<select name="Job">
<option value="4">job4</option>
<option value="3">job3</option>
<option value="2">job2</option>
<option value="1">job1</option>
</select>
<input type="submit" value="Submit" id ="formButton">
</form>
Javascript
var form = $("form");
form.validate();
$("#button").click(function () {
var isValid = form.valid();
if (isValid) {
console.log("Valid: " + form.valid() + "form validation passed");
var frm = $('#form1');
frm.submit(function (ev) {
$.ajax({
type: "POST",
url: "form_validation.php",
data: frm.serialize(),
success: function (data) {
if (data.error) {
alert(data.error);
} else {
alert(data.message + " " + data.sql);
}
}
});
});
ev.preventDefault();
} else {
console.log("form validation failed");
}
});
Check the version of jQuery you are using. The default method or type used for the request is GET.
In your case if you are using a version of jQuery that is > 1.9.0 used method property instead.
Otherwise the type property should work as is.
method: 'POST'
I would change your HTML form a bit
<form id ="form1" onsubmit="return validateForm()" method="post">
<p>What do you do for a living?</p>
<select name="Job">
<option value="4">job4</option>
<option value="3">job3</option>
<option value="2">job2</option>
<option value="1">job1</option>
</select>
<input type="submit" value="Submit">
This works when I do it.
I'm trying to add a new feature to this pagination/filtering script but so far, without succes. I want that, when you change the page, the filter you picked from the top right corner select (that with "Ordonare dupa...) to remain picked instead of switching back to the first option.
This is my website - http://www.wheelsmarket.ro/cautare/jante/1
To paginate/filter i used this function:
$(document).ready(function()
{
$('.sortare').on('change', function(){
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
}
});
});
All the querys are made inside a #myTest div, and the myTest div gets changed without reloading when you change that select. The problem is that the select box is out of #myTest div, so i doubt that i can make use of that function i have.
ex:
<select class="sortare select" >
<option value="1">cele mai noi</option>
<option value="2">cele mai ieftine</option>
<option value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
If i understood correctly you need something like :
1) Add id to your options:
<select class="sortare select" >
<option id="sel1" value="1">cele mai noi</option>
<option id="sel2" value="2">cele mai ieftine</option>
<option id="sel3" value="3">cele mai scumpe</option>
</select>
<div id="myTest">
code
</div>
AND change tha attr() to selected in jquery :
$(document).ready(function()
{
$('.sortare').on('change', function(){
selValue = $(this).val(); //---> Store this value in a variable.
$.ajax({
url: '/filtrare-jante.php',
type: 'POST',
data: {'selected' : $(this).val(), 'pagina_id' : <?php echo $_GET['pagina'];?>},
success: function(data){
console.log(data); // do something with what is returned
$('#myTest').html(data);
$('#queryInitial').html('null');
$('#sel'+selValue).attr("selected","selected"); //---> Use the variable we created to determine which option should be set to selected dynamically
}
});
});
Hello i am making option to choose among few ips and as its auto generated with php all option id="userip" is same. I face problem when i choose 2nd, 3rd or even 4th it auto take first ip which is 127.0.0.1 even if in option i choose ip 127.0.2.2 or any other.
I wanted to solve this so wanted to know best way to do it.
<div class="row"> Choose ip:
<select name="search">
<option id="userip">127.0.0.1</option>
<option id="userip">127.0.2.2</option>
<option id="userip">127.3.3.3</option>
<option id="userip">127.0.4.4</option>
</select>
<input class="adm" type="button" onclick="getuser()" value="Get Result">
</div>
Here is my js
function getuser() {
var e = $("#userip").val();
$("#showuser").html("")
$.ajax({
url: "adm.php",
type: "post",
data: "action=getuser&search="+e+"",
dataType: "json",
success: function (e) {
// do something
},
error: function () {}
})
}
ID must be unique at the page:
<div class="row"> Choose ip:
<select name="search" id="userip">
<option>127.0.0.1</option>
<option>127.0.2.2</option>
<option>127.3.3.3</option>
<option>127.0.4.4</option>
</select>
<input class="adm" type="button" onclick="getuser()" value="Get Result">
</div>
And for select option value, use child selector. See jquery official documentation
var e = $("#userip option:selected").text();
Or
var e = $("#userip").val();
just fetch the value of the search field. you can also use the callback onchange.
HTML code
<div class="row"> Choose ip:
<select name="search" id="search" onchange="getuser()">
<option id="userip">127.0.0.1</option>
<option id="userip">127.0.2.2</option>
<option id="userip">127.3.3.3</option>
<option id="userip">127.0.4.4</option>
</select>
</div>
JS code
function getuser() {
var e = $("#search").val();
$("#showuser").html("")
$.ajax({
url: "adm.php",
type: "post",
data: "action=getuser&search="+e+"",
dataType: "json",
success: function (e) {
// do something
},
error: function () {}
})
}