Get a value from an input field - php

I am using the code below using jQuery and AJAX, to update my database.
Deletion works perfectly, but the edit function is not working. How is it possible to get the value from each input field?
<ol class="update">
<?php
$ss = mysql_query ("SELECT * FROM users_channels WHERE u_id='$uid'");
while ($chann = mysql_fetch_assoc($ss)) {
echo'
<li>
<input name="channelName" type="text" id="channelName" style="float:left; width:300px; border:1px solid #CCC;" value="'.$chann['channel_name'].'" />
<span id="rcolor">Delete</span>
<span id="gcolor">Save</span>
</li>';
}
?>
</ol>
Javascript code:
$(document).ready(function() {
$(function() {
$(".save_button").click(function() {
var id = $(this).attr("id");
var cvalue = $(this).attr("cvalue");
var dataStringe = 'id=' + id + '&cvalue=' + cvalue;
var parent = $(this).parent();
alert(cvalue);
$.ajax({
type: "POST",
url: "update_channel.php",
data: dataStringe,
cache: false,
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'}, 300).animate({ opacity: 0.35 }, "slow");
},
success: function() {
//parent.slideUp('slow', function() {$(this).remove();});
}
});
return false;
});
});
});

Add this in your java script function
$(document).ready(function() {
$(function() {
$(".save_button").click(function() {
var inputVal=$("#channelName").val();
//rest of your code
return false;
});
});
});
you'll get the value of an input field(as per your question) in inputVal variable.
In order to get the values of all input fields,give them a common class name instead of giving style there like this
<input class="myInput" type="text" value="red" id="one"/>
<input class="myInput" type="text" value="France" id="two" />
and then in your javascript add this
var inputValues= {};
$(".myInput").each(function() {
inputValues[$(this).attr("id")] = $(this).val();
});
alert(inputValues.one); // "red"
you'll get the value of all input fields in inputValues variable

can u be more explicit? What do you need to get? Value of all input elements? if yes .. use $('input[name=example]').each(function(){})
this will get all values of all input with specified name

I guess what you're trying to do is submit the value of your input field as cvalue? To do this, the best approach would be:
$(".save_button").click(function() {
var id = $(this).attr("id");
var parent = $(this).parent();
var cvalue = parent.find('input').val(); // this gets the value of the <input> field
var dataStringe = 'id='+ id + '&cvalue='+ cvalue;
// the rest of your code...
});

Related

Why select input field is not working in laravel view?

I have facing an weird problem in my laravel application. In my view file there are a select input field where values are fetched from database table. I have checked that data successfully passed to the view and tried with below code which is not working
<div class="row form-group">
<div class="col col-md-3">
<label for="text-input" class=" form-control-label">Course</label>
</div>
<div class="col-12 col-md-9">
<select class="form-control" name="course_id" id="course" required>
<option value="">Please select</option>
#if ($courses)
#foreach ($courses as $course)
<option value="{{$course->id}}">{{$course->name}}</option>
#endforeach
#endif
</select>
</div>
</div>
But when I have paste the same code again then the second input field is working properly. I didn't get any error.
Edited:
I have some JavaScript which given below
<script>
$(document).ready(function(){
// Add click
$(".addBtn").click(function(){
var id = this.id;
// Get data from field
var sem = $("#"+id).data('sem');
var slotId = $("#"+id).data('slot');
var timeSlot = $("#"+id).data('timeslot');
var dayId = $("#day").data('dayid');
var dayValue = $("#day").data('dayvalue');
// Add data to model
$('#dayInput').text(dayValue);
$('#semesterInput').text(sem);
$('#timeInput').text(timeSlot);
// Hidden input value for db
$('#dayInputValue').val(dayId);
$('#semesterInputValue').val(sem);
$('#timeInputValue').val(slotId);
// Get assign teacher
$.ajax({
url: "{{URL::to('admin/teacher-assign/sem')}}/"+ sem,
type: 'GET',
success: function(data){
$('#course').html("<option value=\"\">Please select</option>");
$.each(data, function(key, value) {
$('#course')
.append($("<option></option>")
.attr("value",value.course.id +'-'+ value.teacher.id)
.text(value.course.name +'-'+ value.teacher.name));
});
}
});
});
// Edit click
$(".editBtn").click(function(){
var id = this.id;
// Get data from field
var sem = $("#"+id).data('sem');
var slotId = $("#"+id).data('slot');
var timeSlot = $("#"+id).data('timeslot');
var dayId = $("#day").data('dayid');
var dayValue = $("#day").data('dayvalue');
// Edit data
var course = $("#"+id).data('course');
// var teacher = $("#"+id).data('teacher');
var roomNo = $("#"+id).data('room_no');
var editNote = $("#"+id).data('note');
var routineId = $("#"+id).data('routine_id');
// Add data to model
$('#editDayInput').text(dayValue);
$('#editSemesterInput').text(sem);
$('#editTimeInput').text(timeSlot);
$('#editCourseInput').text(course);
// $('#editTeacherInput').text(teacher);
$('#editRoomNoInput').text(roomNo);
// Hidden input value for db
$('#editDayInputValue').val(dayId);
$('#editSemesterInputValue').val(sem);
$('#editTimeInputValue').val(slotId);
// Assign ID
$('#editRoutineIdValue').val(routineId);
$('#editNoteInputValue').val(editNote);
// Get assign teacher
$.ajax({
url: "{{URL::to('admin/teacher-assign/sem')}}/"+ sem,
type: 'GET',
success: function(data){
$('#editCourse').html("<option value=\"\">Please select for edit</option>");
$.each(data, function(key, value) {
$('#editCourse')
.append($("<option></option>")
.attr("value",value.course.id +'-'+ value.teacher.id)
.text(value.course.name +'-'+ value.teacher.name));
});
}
});
});
// Add button
$('td').mouseenter(function () {
$(this).find('.addBtn').show();
}).mouseleave(function () {
$(this).find('.addBtn').hide();
});
// Edit button
$('td').mouseenter(function () {
$(this).find('.editBtn').show();
}).mouseleave(function () {
$(this).find('.editBtn').hide();
});
// Delete button
$('td').mouseenter(function () {
$(this).find('.deleteBtn').show();
}).mouseleave(function () {
$(this).find('.deleteBtn').hide();
});
});
</script>
change #if ($courses) this into #if (count($courses) > 0) this and try again.

Detecting which button was pressed

I'm trying to detect which was button was pressed with jQuery and then server-side do different things depending on the outcome.
The jQuery works fine (although I may have gone about it in a long- handed way) but I can't figure out why in my code whichever button I press I get the same response from php: "Add button detected". I hope someone can tell me what I've got wrong?
The jQuery
$(document).ready(function() {
$(".btn_add").on("click", function() { //If add btn pressed
var id = this.id;
var url = "process_ajax4.php?btn=" + this.id;
var formdata = $('.myForm').serialize();
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
$(".btn_remove").on("click", function() { //If remove btn pressed
var id = this.id;
var url = "process_ajax4.php?btn=" + this.id;
var formdata = $('.myForm').serialize();
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
});
The Php
<?php
$btn=$_POST["btn"]; //Other posted variables removed for simplicity
if($btn="btn_add"){
echo "<h1>Add button detected</h1>";
//Do stuff
}
elseif($btn="btn_remove"){
echo "<h1>Remove button detected</h1>";
//Do other stuff
}
?>
The html Form
<td>
<form id=\ "myForm\" class=\ "myForm\" action=\ "\" method=\ "post\" enctype=\ "multipart/form-data\">
<input type=\ "hidden\" name=\ "user_id\" value=". $collab_userid." />
<input type=\ "hidden\" name=\ "id\" value=".$upload_id." />
<button type=\ "submit\" id=\ "btn_remove\" class=\ "btn_remove\" name=\ "btn_remove\">Remove</button>
<button type=\ "submit\" id=\ "btn_add\" class=\ "btn_add\" name=\ "btn_add\">Approve</button>
</form>
</td>
You should add the pressed button to your formdata, otherwise the click couldn't be detected.
$(document).ready(function() {
$(".btn_add").on("click", function() { //If add btn pressed
var id = this.id;
var url = "process_ajax4.php?btn=" + this.id;
var formdata = $('.myForm').serialize();
formdata += "&btn=btn_add"; // added the btn
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
$(".btn_remove").on("click", function() { //If remove btn pressed
var id = this.id;
var url = "process_ajax4.php?btn=" + this.id;
var formdata = $('.myForm').serialize();
formdata += "&btn=btn_remove"; // added the btn
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
});
Change php code as follows
<?php
$btn=$_POST["btn"]; //Other posted variables removed for simplicity
if ($btn=="btn_add") {
echo "<h1>Add button detected</h1>";
//Do stuff
} elseif ($btn=="btn_remove"){
echo "<h1>Remove button detected</h1>";
//Do other stuff
}
?>
You need not have two separate function for jquery button handling. Also you can remove the button type="submit" from your code since you are detecting the click event
$(document).ready(function() {
$("button").on("click", function() { //If add btn pressed
var id = this.id;
var url = "process_ajax4.php?btn=" + this.id;
console.log(url);
var formdata = $('.myForm').serialize();
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<form id="myForm" class="myForm" action="\" method= "post" enctype="multipart/form-data">
<input type="hidden" name="user_id" value=". $collab_userid." />
<input type="hidden" name="id" value=".$upload_id." />
<button type="submit" id="btn_remove" class="btn_remove" name= "btn_remove">Remove</button>
<button id="btn_add" class= "btn_add" name="btn_add">Approve</button>
</form>
</td>
You can use the parse_url() and parse_str() for getting the query string in php. In order to use $btn=$_POST["btn"]; tbn attribute must be passed as a form data, query parameters wont will be available through this method
<?php
$parts = parse_url($url);
parse_str($parts['query'], $query);
$btn = $query['btn'];
if($btn=="btn_add"){
echo "<h1>Add button detected</h1>";
//Do stuff
}
elseif($btn=="btn_remove"){
echo "<h1>Remove button detected</h1>";
//Do other stuff
}
?>
Your code works just make var url = process_ajax4.php that will fix your problem.in PHP use == instead of =, also add e.preventDefault() to your button clicks to prevent the form from being submitted with action='url'
$(document).ready(function() {
$(".btn_add").on("click", function(e) { //If add btn pressed
e.preventDefault();
var id = this.id;
var url = "process_ajax4.php";
var formdata = $('.myForm').serialize();
formdata += "&btn=btn_add"; // added the btn
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
$(".btn_remove").on("click", function(e) { //If remove btn pressed
e.preventDefault();
var id = this.id;
var url = "process_ajax4.php";
var formdata = $('.myForm').serialize();
formdata += "&btn=btn_remove"; // added the btn
$.post(url, formdata,
function(data) {
$("#results").html(data); //Response
});
});
});
i think your code looks ok.
i think in php you cannot compare string by =
you may need to change it to strcmp(strA,strB)==0 in order to ensure the input parameter is add button or remove button.
You don't actually need the jQuery code at all. Since both btn_remove and btn_add are submit buttons, you can check which of the buttons where used to submit the form by using:
if(isset($_POST["btn_remove"])) {
//Remove button was pressed.
}

How to do auto complete for same class

The textarea will show when I click add row. The textarea has item in autosuggestion on keyup. My problem is the first one shows autocomplete. anothers are not working
<textarea id="name" class="name" name="name"></textarea><ul></ul>
<textarea id="name" class="name" name="name"></textarea><ul></ul>
<textarea id="name" class="name" name="name"></textarea><ul></ul>
<script type="text/javascript">
$(document).ready(function(){
$(".name").keyup(function(){
var name = $(this).val();
$.ajax({
url:"ajax.php",
type:"POST",
data:{name:name},
success:function(res)
{
$(".name + ul").append("<li class=item>"+res+"</li>");
}
});
});
$("ul").on("click", "li", function(){
var item = $(this).text();
$(".name").val(item);
$("ul li").remove();
});
});
</script>
Here is an example that does not need any id associated with the text areas.
<textarea class="name" name="name1"></textarea><ul></ul>
<textarea class="name" name="name2"></textarea><ul></ul>
<textarea class="name" name="name3"></textarea><ul></ul>
<script type="text/javascript">
$(document).ready(function(){
$(".name").keyup(function(){
var field = $(this);
var name = field.val();
$.ajax({
url:"ajax.php",
type:"POST",
data:{name:name},
success:function(res)
{
field.next("ul").append("<li class=item>" + res + "</li>");
}
});
});
$("ul").on("click", "li", function(){
var li = $(this);
var item = li.text();
li.parent('ul').empty().prev('.name').val(item);
});
});
</script>
try
var name = $(this).val();
var data = name + "&Sessid=" + Math.random();
$.ajax({
url:"ajax.php",
type:"POST",
data:data,
success:function(res)
{
$(".name + ul").append("<li class=item>"+res+"</li>");
}
});
});
First of all, change id and name fields for your textarea. It's not good idea to give same id name to your elements.
<textarea id="name1" class="name" name="name1"></textarea><ul></ul>
<textarea id="name2" class="name" name="name2"></textarea><ul></ul>
<textarea id="name3" class="name" name="name3"></textarea><ul></ul>
Now, get id name by this:
var which_id = $(this).attr('id');
And use which_id variable to your ajax response.
$.ajax({
url:"ajax.php",
type:"POST",
data:{name:name},
success:function(res)
{
$("#"+which_id+" + ul").append("<li class=item>"+res+"</li>");
}
});

AJAX/JS/PHP: Submitting value of a select box without page refresh or button click

I am currently using Ajax to submit an input field without a page refresh or button click. The function works well with a text input field But it doesnt work with posting the value of a select box and then php echoing the result. I check with the firebug tool and nothing is being posted by Ajax/js function.
How can I submit the value of a select box so I can then echo with the php? EXAMPLE
JS
<script>
$(document).ready(function() {
var timer = null;
var dataString;
function submitForm(){
$.ajax({ type: "POST",
url: "index.php",
data: dataString,
success: function(result){
$('#item_input').text( $('#resultval', result).html());
}
});
return false;
}
$('#item_name').on('keyup', function() {
clearTimeout(timer);
timer = setTimeout(submitForm, 050);
var name = $("#item_name").val();
dataString = 'name='+ name;
});
});
</script>
PHP
<?php
if ($_POST)
{
$item_name = $_POST['name'];
echo ('<div id="item_input"><span id="resultval">'.$item_name.'</span></div>');
}
?>
HTML
<html>
<form method="post" id="form" name="form">
<select name="item_name" value="<? $item_name ?>" size="4" id="item_name">
<option value="">Item1</option>
<option value="">Item2</option>
<option value="">Item3</option>
<option value="">Item4</option>
</select>
</form>
<div id="item_input"></div>
</html>
select tags does not trigger keyup event , you should use change instead, try the following:
$('#item_name').on('change', function() {
clearTimeout(timer);
var name = $(this).val();
dataString = 'name='+ name;
timer = setTimeout(submitForm, 050);
});
$('#item_input').html(result);
Trigger submitForm() with an onchange event so that every time the value of <select> changes, it submits.
KeyUp is for input boxes and others that use the keyboard. Select boxes you can either use onClick or onChange, preferrably onChange:
$('#item_name').change(function() {
clearTimeout(timer);
timer = setTimeout(submitForm, 050);
var name = $("#item_name").val();
dataString = 'name='+ name;
}
This will work for you.
Good Luck!
It seems that your js is right problem is in your html part. you not provided the select list values. pls provide values to select list options.
$(document).ready(function() {
var timer = null;
var dataString;
function submitForm(){
$.ajax({ type: "POST",
url: "index.php",
data: dataString,
success: function(result){
//$('#item_input').html( $('#resultval', result).html());
//$('#special').text(result);
//$('#item_input').html( $('#resultval').html() + '<p>' + result + '</p>');
$('#item_input').html(result);
}
});
return false;
}
$('#item_name').on('change', function() {
clearTimeout(timer);
var name = $(this).val();
dataString = 'name='+ name;
timer = setTimeout(submitForm, 050);
});
});
it should be like this or whatever values you want to post
<select name="item_name" value="" size="4" id="item_name">
<option value="item1">Item1</option>
<option value="item2">Item2</option>
<option value="item3">Item3</option>
<option value="item4">Item4</option>
</select>

When a checkbox is checked i want to send its value to other PHP file through jquery

Actually i want to send the value of checkbox when it is checked through jquery...means when i click on checkbox it has to send automatically...i tried with following code..
$(document).ready(function () {
$(".checkBox").change(function () {
var s = $(this).val();
var dataString = 's=' + s;
$.ajax({
type: "GET",
url: "xyz.php",
data: dataString,
cache: false,
success: function (html) {}
});
});
});
and html code is
<div class = "checkBox">
<input type = "checkbox" name = "select[]" value = <?php $friendUid?> />
</div>
I was unable to send to other page
Change your html: Put the class = "checkBox" onto the checkbox element
<div>
<input type = "checkbox" name = "select[]" value = <?php $friendUid?> class = "checkBox"/>
</div>
The selector $(".checkBox") will attach that function to any items with the class of checkBox, and since your checkbox does not have that as its class, you are actually attaching your function to the div that contains the checkbox instead, which of course will never trigger your function.
<?php $friendUid?> should be <?php echo $friendUid ?>
with $(".checkbox") you're referencing something of class 'checkbox' (i.e., your div, not the actual checkbox).
Add the class to the <input type='checkbox'> instead
try this in your code and let us know what happens.
<script type="text/javascript">
alert('check0');
$(document).ready(function () {
alert('check1');
$(".checkBox").change(function () {
alert('check2');
var s = $(this).val();
var dataString = 's=' + s;
$.ajax({
type: "GET",
url: "test.php",
data: dataString,
cache: false,
success: function (html) {
alert('check3');
}
});
});
});
</script>
<input type="checkbox" class="checkBox" />

Categories