How to execute an action when textbox's content has changed? - javascript

I have two actions like:
Function getNews: to get list news.
Function searchNews: to get list news base on a keyword.
I create a form to submit that:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="getNew" action="<?php echo admin_url('Xpathnews/searchKeyword') ?>" method="post">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4><b>Select your news</b></h4>
<select id="selectcate" name="selectcate" class="field-custom">
<option value="http://theverge.com">The Verge</option>
<option value="http://neowin.net">Neowin</option>
</select>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<h4><b>Keyword:</b></h4>
<input name="search_keyword" id="search_keyword" autocomplete="off" placeholder="Enter your keyword..." />
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<input name="xpath_title" id="xpath_title" type="hidden" />
</div>
<br>
<div class="col-md-12 col-sm-12 col-xs-12 text-center">
<input name="get_news" type="submit" id="get_news" value="Get News"/>
</div>
</form>
Or fiddle link: https://jsfiddle.net/f7zy0694/2/
I want when the user types any text in textbox search_keyword. Will execute action searchNews.
Usually, the user only clicks button Get News default execute action getNews.
I tried a solution in my controller/action:
public function getNews(){
$xpath_title = $this->input->post('xpath_title');
}
public function searchNews() {
$keyword = $this->input->post('search_keyword');
if(empty($keyword)) {
$this->getNews();
} else {
// execute my code at here
}
}
... is check if $keyword don't have value it will execute function $this->getNews but problem is:
I have some <input> hidden, seem the call to function getNews it not working.
I also tried with seft:redirect("/getNews").
Thanks.

In that you can use Jquery ajax with keyUp or keyDown like:
$(document).ready(function(){
$('#searchbox_id').keyUp(function(){
// get the user entered string
var searchTxt = $(this).val();
$.ajax({
url: 'process_file.php',
type: 'get',
data: {
searchTxt :searchTxt
},
success: function(response){
// do your stuff here
}
});
});
});

Related

Setting Events for similar fields in HTML using JQuery, and Javascript

I am not really good at the HTML world, and I'm not even sure how to debug this one. Anyway, I have an ASP.NET core App. My issue is in a CSHTML view. It is a timeclock system. User logs time against an existing job.
I have an Index.cshtml that is working. It will verify a JobNumber to make sure it exists in the database. And if the user enters a partial number and hits F3, it pops up a modal window (I'm using Bootstrap 5) to allow them to select from a list.
The problem is, the user wants to add more Job numbers. So, they can clock time against up to five Jobs at once. So, I am creating new fields, and naming them JobNumber2, JobNumber3, etc.
What I want to do is reuse the existing scripts to add the verification and popup functionality to each of the new fields.
I have tried several different things based on a half a dozen tutorials out there, but I am just not good enough at Javascript and JQuery to know how to do this.
Any help is appreciated!
[EDIT]
Ruikai Feng's answer shows how to match the first function, but that one calls validateJobNumber(jobNumber), and the result will update a field -- again based on the same pattern. So, now it updates: jobNumberValidationMessage -- but I need it to update the correct jobNumberValidationMessage depending on which JobNumber field got matched in the first half of this. IDK, maybe these could be combined into one function? I'm not sure. But how do I take what I matched with id^='JobNumber to figure out which jobNumberValidationMessage to update (ie jobNumberValidationMessage2, jobNumberValidationMessage3, etc) ;
------------ END EDIT
Here's the code I have that is working, but needs changed:
#using Microsoft.AspNetCore.Http
#using Microsoft.AspNetCore.Http.Extensions
#model dynamic
<!DOCTYPE html>
<html>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-10">
<!-- Clock-In Header -->
<h3>
<img class="logo large" src="logo-png-transparent.png")"
alt="Logo" width="100" height="100"> Add Job Number(s) to Track Time for: #Model.Employee.Name
</h3>
<hr /> <!-- Ruler Line for Separation -->
<!-- End Clock-In Header -->
<!-- Clock-In Form -->
<div class="row">
<div class="col-1 col-md-12 offset-md-0">
<div class="card">
<div class="card-body">
<form asp-action="ClockInBegin" method="post">
<label for="JobNumber" class="col-7 col-md-2 col-form-label text-md-right">Job Number</label>
<div class="col-md-4">
<input type="text" id="JobNumber" name="JobNumber" class="form-control" onkeydown="jobNumberKeyDown(this)" onblur="jobNumberBlur(this)" value="#Model.TrackingItem.JobNumber">
<div class="col-md-8">
<span id="jobNumberValidationMessage"></span>
</div>
</div>
</div>
<div class="form-group row">
<div class="form-check form-switch col-4 align-with-label">
<input class="form-check-input" type="checkbox" value="" id="MultipleCheck">
<label class="form-check-label" for="MultipleCheck">Multiple</label>
</div>
</div> <!-- End form-group row -->
<div>
<button type="submit" class="btn btn-primary w-100">Start Clock</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Clock-In Modal Pop-up -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Select Job Number</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<select id="jobNumberSelect" class="form-control">
<option value="">Select Job Number</option>
<!-- Dynamic options generated via JavaScript or ajax -->
</select>
</div>
<div class="modal-footer">
<button type="button" id="CANCEL"class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="OK" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
<!-- End Clock-In Modal Pop-up -->
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#JobNumber").blur(function () {
var jobNumber = $(this).val();
validateJobNumber(jobNumber);
});
$("#JobNumber").keydown(function (event) {
if (event.key === "F3") {
event.preventDefault();
if (event.target.value.length >= 2) {
// Open the modal
$('#myModal').modal('show');
// Populate the select options
$.ajax({
type: "GET",
url: "#Url.Action("GetJobNumbers")",
data: { searchTerm: event.target.value },
dataType: "json",
success: function (data) {
$("#jobNumberSelect").empty();
$.each(data, function (index, item) {
$("#jobNumberSelect").append("<option value='" + item + "'>" + item + "</option>");
});
$("#jobNumberSelect").val("..."); // clear the initial value. Make them select it
//set prompt in first cell of select
$("#jobNumberSelect").prepend("<option value=''>Select Job Number</option>");
$("#myModal").modal("show");
}
});
}
}
});
$("#jobNumberSelect").change(function () {
$("#JobNumber").val($(this).val());
});
$("#OK").click(function () {
$("#JobNumber").val($("#jobNumberSelect").val());
validateJobNumber(); // call the validation
$("#myModal").modal("hide");
});
$('#MultipleCheck').change(function () {
if (this.checked) {
$(this).val(true);
$('[name="MultipleCheck"]:hidden').val(true);
$("#hiddenFields").show();
}
else {
$(this).val(false);
$("#hiddenFields").hide();
}
})
}); // end Document.Ready functions
function validateJobNumber() {
var jobNumber = $("#JobNumber").val();
$.ajax({
type: "POST",
url: "#Url.Action("VerifyJobNumber")",
data: { jobNumber: jobNumber },
dataType: "text",
success: function (respdata) {
// alert(respdata);
const obj = JSON.parse(respdata);
var rmessage = obj.message;
$("#jobNumberValidationMessage").text(rmessage);
$("#jobNumberValidationMessage").css("color", "green");
}
});
}
</script>
</body>
</html>
if you have mutipule inputs like:
<input type="text" id="JobNumber1" name="JobNumber1" class="form-control"  value="1">
<input type="text" id="JobNumber2" name="JobNumber2" class="form-control"  value="2">
<input type="text" id="JobNumber3" name="JobNumber3" class="form-control"  value="3">
and you want validate the value on blur ,just try as below:
$("[id^='JobNumber']").blur(function(e)        
{             
var jobnumber=$(this).val();             
$.ajax({               
 type: "POST",               
 url: "#Url.Action("VerifyJobNumber")",               
 data: { "jobNumber": jobnumber },               
 dataType: "text",                
success: function (respdata) {                     
alert(respdata);                                  
 }            
});        
});
With a controller :
[HttpPost]       
public IActionResult VerifyJobNumber(string jobNumber)        
{            
return Ok(jobNumber);        
}
The result:

Already sucess to add select form dyamically , but the data from success ajax cannot be send to the new select form

I'm trying to make a dependent dropdown, and it already works.
The problem is, the user want the second dropdown (in a different div) to be added dynamically but when we try to add a new dropdown, the new dropdown doesn't show any data when I choose value from first dropdown.
How to make the new dropdown contain data from ajax?
P.S: the option value is in another html where the ajax call the html if it succeeds.
This is the html:
$(document).ready(function() {
$("#dataselect").change(function() {
var urls = "{% url 'polls:load-column' %}";
var column = $(this).val();
$.ajax({
url: urls,
data: {
'column': column
},
success: function(data) {
$("#columnselect").html(data);
},
error: function(data) {
alert("error occured");
}
});
});
});
function appendBox() {
$('#test').append('<select id ="columnselect" style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;"></select>')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="control-label col-md-3">Table Name</label>
<div class="col-md-4">
<div class="input-group bootstrap-timepicker">
<div class="btn-group">
<select id="dataselect" style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;">
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-theme" onclick="appendBox()">Add</button>
<label class="control-label col-md-3">Column Name</label>
<div class="col-md-4" id="test">
<div class="input-group bootstrap-timepicker">
<div class="btn-group">
<select id="columnselect" style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;">
</select>
</div>
</div>
</div>
</div>

Link in keyup function is not working

Here is screen shot of my problemI am using codeigniter and ajax.When keyup function is call on search bar then data is shown in suggestion box but when i click on link which is shown on suggestion box then this click is not working.No error of any script file.
Here is code of my view file:
<div class="container-fluid my_searchbar">
<div class="container my_searchbar_container">
<div class="nav nav-justified navbar-search navbar-nav">
<form class="search navbar-search" method="post" action="index.html" >
<div class="input-group">
<input type="text" name="search_area" id="search_area" placeholder="Search Area" class="form-control input-lg">
<div class="input-group-btn">
</div>
<input type="text" name="search_pro" id="search_pro" placeholder="Search Professional Category" class="form-control input-lg">
<ul id="show_search_pro" class="results" >
</ul>
<div class="input-group-btn">
Search
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Here is my ajax code in view file.
$('#search_pro').keyup(function(){
// alert($(this).val());
var location_field = $('#search_area');
var search_cal_field = $(this);
$.ajax({
type: 'POST',
url: 'http://localhost/JustClick/User/search_professional',
cache : false,
dataType : 'html',
data :{location_id:location_field.val(), category_id:search_cal_field.val()},
success:function(data)
{
$('#show_search_pro').html(data);
}
});
});
Here is code of my controller through using ajax i get data on view page:
public function search_professional()
{
if($this->input->is_ajax_request())
{
$professional = $this->UserModel->search_professional($this->input->post('location_id',true),$this->input->post('category_id',true));
foreach ($professional as $row)
{
echo '
<li>
<a class="s_pro" href="'.base_url('Professional/show_professional_detail/'.$row->pro_id).'">'.$row->firstname.' '.$row->lastname.'<br /><span>Description...</span></a></li>';
}
}
else
{
show_404();
}
}
Help me how i solve this problem.

How to get value from multiple input with codeigniter [duplicate]

This question already has answers here:
Getting data from post array in CodeIgniter
(5 answers)
Closed 6 years ago.
I have a problem to send multiple data to controller.
$target is result from post('warna'). How do I get all data?
<form action="http://localhost/starsc/trueaccon2194/opsional" id="form" method="post" accept-charset="utf-8">
<div class="row">
<div class="col-md-12 input group kolom">
<div id="warna1" style="padding-left:0;padding-right:0;" class="col-md-12 col-sm-12 col-xs-12">
<input type="text" id="warna1" name="warna[]" class="joss form-control">
<br>
</div>
<div id="warna2" style="padding-left:0;padding-right:0;" class="col-md-12 col-sm-12 col-xs-12">
<input type="text" id="warna2" name="warna[]" class="joss form-control">
<br>
</div>
<div id="warna3" style="padding-left:0;padding-right:0;" class="col-md-12 col-sm-12 col-xs-12">
<input type="text" id="warna3" name="warna[]" class="joss form-control">
<br>
</div>
<button type="button" class="simpan_warna btn btn-primary">Simpan</button>
</form>
$('.simpan_warna').click(function() {
var UrlToPass = $("#form").serialize();
$.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod
type: "POST",
data: UrlToPass,
url: baseURL + "trueaccon2194/opsional/proses_tambah_opsi_warna",
beforeSend: function() {
$('.simpan_warna').prop('disabled', true);
$('.simpan_warna').html('sedang menyimpan...'); //Loading button text
},
success: function(success) { // Get the result and asign to each cases
$('.simpan_warna').prop('disabled', false);
$('.simpan_warna').html('Simpan'); //reset button text to original text
alert('Data Berhasil disimpan!');
$('#modal_form').modal('hide');
location.reload();
},
error: function() {
$('.simpan_warna').prop('disabled', false);
$('.simpan_warna').html('Simpan'); //reset button text to original text
alert('Data gagal disimpan!');
}
});
return false;
});
my controller is :
function proses_tambah_opsi_warna(){
$target = $this->input->post('warna[]');
if($this->input->post()){
$data = $this->input->post();
$data['nama_depan'] = $this->data['nama_depan'];
$this->opsional_adm->add_warna($data);
log_helper("warna", "Menambah Warna ".$target."");
}else{
log_helper("warna", "Gagal Menambah warna baru");
}
}
Try to get the 'warna' post value, not the 'warna[]' :
$target = $this->input->post('warna');
With this, $target will be an array and you'll able to access values with a loop like this :
foreach ($target as $id => $value) {
echo $value;
}

How To pass the modified data from dual listbox to controller?

I have created a form with two listboxes in which it is possible to move the items from one listbox into another.
The view also loads correctly, but I haven't figured out how to send the modified listbox data back to controller.
The view code is the following:
<script>
$(function() {
$(document)
.on("click", "#MoveRight", function() {
$("#SelectLeft :selected").remove().appendTo("#SelectRight");
})
.on("click","#MoveLeft", function() {
$("#SelectRight :selected").remove().appendTo("#SelectLeft");
});
});
#Html.Hidden("RedirectTo", Url.Action("UserManagement", "Admin"));
<h2>User</h2>
<div class="container">
<form role="form">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="SelectLeft">User Access:</label>
<select class="form-control" id="SelectLeft" multiple="multiple" data-bind="options : ownership, selectedOptions:ownership, optionsText:'FirstName'">
</select>
</div>
</div>
<div class="col-md-2">
<div class="btn-group-vertical">
<input class="btn btn-primary" id="MoveLeft" type="button" value=" << " />
<input class="btn btn-primary" id="MoveRight" type="button" value=" >> " />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="SelectRight">Owners:</label>
<select class="form-control" multiple="multiple" id="SelectRight" multiple="multiple" data-bind="options : availableOwners, selectedOptions:availableOwners, optionsText:'FirstName'">
</select>
</div>
</div>
</div>
</div>
</form>
</div>
<script>
var data=#(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
var selectedOwners = #Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.AccessOwners));
var availableOwners = #Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.Owners));
function viewModel() {
this.username=ko.observable(data.Username);
this.password=ko.observable(data.Password);
this.email=ko.observable(data.Email);
this.isActive=ko.observable(data.IsActive);
this.userId = ko.observable(data.UserId);
this.ownership=ko.observableArray(selectedOwners);
this.availableOwners = ko.observableArray(availableOwners);
this.submit = function()
{
$.ajax({
url: '#Url.Action("UserSave", "Admin")',
type: 'POST',
data: ko.toJSON(this),
contentType: 'application/json',
});
window.location.href = url;
return false;
}
this.cancel = function()
{
window.location.href = url;
return false;
}
};
ko.applyBindings(new viewModel());
var url = $("#RedirectTo").val();
I would be very thankful if anyone could suggest the way to pass all the selected options back to controller by populating the data with modified lists when the submit function is executed.
Thanks!
Before form submission save one side items values in an hidden input element. (comma separated values of listbox items.) The value of hidden element is sent to server by submitting the form. In controller you can do the next things.

Categories