how to send id of button into controller in codigniter - javascript

i am new in codeigniter and i am trying to post the button id from view to controller..
i have a button with pop-up, clicking on the button will open the form in popup, i want to update that from input into the database with the help of button id, but i am not able to get the id from view.
VIEW-:
<a data-toggle="modal" data-target="#Add_comm" data-href="javascript:addC(<?php echo $id;?>);">
<button" class="pull-right btn btn-info" name="user_id"><?php echo $id; ?></button>
</a>
JS-:
function addC(id) {
url = 'controller_foldr/contoller/add_cm/'+id;
passAjaxGetSubmit(url);
}
Controller
function add_cm(){
$this->load->model('modl_name');
$id=$this->input->post('id');
$update_cm = $this->input->post('update_cm');//i am getting this value from the popup form..
I don't know i am doing right thing to perform this action..
someone please guide me if i am wrong..please help...

<form action="#" method="post">
<input type="hidden" id="field_id" value="20" name="id"/>
<button class="pull-right btn btn-info" name="user_id" id="butn">edit values</button>
</form>
<script type="text/javascript" >
$(function(){
id = $('#field_id').val();
$('.btn').click(function(){
alert("clicked");
$.ajax({
url :'index.php/test/ajax',
type: "POST",
data : {field_id: id },
success: function (data) {
alert("values succesfully edited" + data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus);
alert(errorThrown) ;
}
});
});
});
i have updated the code please replace your code and put this code. Your problem was the anchor tag and all the unnecessery data elements inside.
Your controller should look like this
class Test extends CI_Controller
{
public function ajax(){
$id = $this->input->post('field_id');
echo $id;
}
}
This code will alert the id for you when the form is submitted. Try this code out instead of yours..

Related

Form not submitting on ajax request

So I'm comparing the value of the input field entered by the user to the value of the mysql DB (using an Ajax request to the checkAnswer.php file). The request itself works fine, it displays the correct "OK" or "WRONG" message, but then it does not submit the form if "OK". Should I put the .submit() somewhere else?
HTML code:
<form id="answerInput" action="index" method="post">
<div id="answer-warning"></div>
<div><input id="answer-input" name="answer" type="text"></div>
<input type="hidden" id="id" name="id" value="<?=$id?>">
<div><button type="submit" id="validate">Valider</button></div>
</form>
</div>
JS code
$("#validate").click(function(e){
e.preventDefault();
$.post(
'includes/checkAnswer.php',
{
answer : $('#answer-input').val(),
id : $('#id').val()
},
function(data){
if(data === '1'){
$("#answer-warning").html("OK");
$("#answerInput").submit();
}
else{
$("#answer-warning").html("WRONG");
}
},
'text'
);
});
I think it is because you set your button type as submit. Why?
When you do $("#validate").click(function(e){, you implicitly replace the default submit behavior of the form.
As you want to interfere in the middle of the process for extra stuff, I suggest you change the button type to button or simply remove the type attribute.
Then the $("#validate").click(function(e){ will alter behavior of click, not the submit of form.
<form id="answerInput" action="index" method="post">
<div id="answer-warning"></div>
<input id="answer-input" name="answer" type="text">
<input type="hidden" id="id" name="id" value="<?=$id?>">
<button onlcick="validate()">Valider</button>
</form>
/******** JS ************/
function validate(){
var post = {};
post['answer'] = $('#answer-input').val();
post['id'] = $('#id').val();
$.ajax({
url: 'includes/checkAnswer.php',
type: 'POST',
data: {data: post},
success:function (data) {
console.log('succsess');
},
error:function (jQXHR, textStatus, errorThrown) {
console.log('failure');
}
});
}

Why does my button dosen't submit the form using ajax and jquery?

i'm trying to understand why my form isn't submitting, but I don't know why.
I've tried to console.log the values of the array values and it works perfectly.
When I click on the submit button of the form it simply show the alert "ok" and reload the page, but doesn't submit the form...
<form method="POST">
<?php
while($service = $req->fetch()){ ?>
<div class="form-control">
<input type="checkbox" class="getValue" value="<?= $service['price']; ?>">
<label><?= $service['service']; ?></label>
<strong><?= $service['price']; ?>€</strong>
</div>
<?php } ?>
<button type="button" name="submit" class="btn btn-warning" id="submit">Submit</button>
</form>
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault(); // annul action par défaut du button
var values = [];
$('.getValue').each(function(){
if($(this).is(":checked")){
values.push($(this).val());
}
});
values = values.toString();
// PROBLEME HERE:
$.ajax({
url:"addServicesRequest.php",
method:"POST",
data:{values:values},
success:function(data){
alert("ok");
}
});
});
});
Thanks a lot in advance !
I've got it working ! the error was that I put instead of and I removed the e.preventDefault();

How to send data without refreshing page in laravel?

I need send data to the database without refreshing page.
Home Blade :
<form class="chat" id="message" action="#" method="post">
<input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
<li>
<div class="panel-footer">
<div class="input-group">
<input type="text" name="message" class="" placeholder="Type your message here..." />
<span class="input-group-btn">
<button type="submit" class=" btn-success btn-sm searchButton" id="save" >
Send
</button>
</span>
</div>
</div>
</li>
</form>
Controller :
public function message(Request $data)
{
$ins = $data->all();
unset($ins['_token']);
$store = DB::table("chatbox")->insert([$ins]);
return Redirect('Users/home')->with('message',"success");
}
Ajax :
<script>
$(document).on("click", ".save", function() {
$.ajax({
type: "post",
url: '/Users/message',
data: $(".message").serialize(),
success: function(store) {
},
error: function() {
}
});
});
</script>
At present when I send data it is automatically refreshing the whole page but only the particular form need to be refreshed.
You need to prevent the default form submission, and use the script instead
$(document).on("click", "#save", function(e) {
e.preventDefault(); // Prevent Default form Submission
$.ajax({
type:"post",
url: '/Users/message',
data: $("#message").serialize(),
success:function(store) {
location.href = store;
},
error:function() {
}
});
});
and instead of returning a redirect, return the url from the controller and let the script handle the redirect
public function message(Request $data)
{
$ins = $data->all();
unset($ins['_token']);
$store = DB::table("chatbox")->insert([$ins]);
session()->flash('message', 'success');
return url('Users/home');
}
You should change the type of the button from submit to button like :
<button type="button" class=" btn-success btn-sm searchButton" id="save" >end</button>
Or prevent the default action (submit) using e.preventDefault(); like :
$(document).on("click",".save",function(){
e.preventDefault(); //Prevent page from submiting
...
...
});
NOTE : Note also that you don't have button with class save but with id save so the event handler should looks like :
$(document).on("click", "#save", function(){
________________________^
You have to handle function inside javascript/jquery form submit funtion and use e.preventDefault() to stop HTML to submit the form.
Try your ajax code in the below code type.
$('#message').submit(function(e) {
e.preventDefault();
//your ajax funtion here
});
You can reset/refresh your form in success function
$("#message").trigger("reset");
Remove return Redirect('Users/home')->with('message',"success"); and just return an array like
return ['message' => 'success'];

How to submit form, programatically with jQuery?

I have form, which when is submitted, is making ajax POST request, posting data fetched from form. Form is quite straight forwards.
<form id="form1">
<input type="text" name="domain" id="field1">
<input type="submit" name="my-submit" id="my-submit" value="Submit Form" class="btn btn-info btn-lg">
<!--<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>-->
</form>
Then #response div where returned content is loaded.
# HTML code ...
<div class="modal-body" id="response">
<p>Some text in the modal.</p>
</div>
# HTML code ...
And finally JavaScript...
$('#form1').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'check.php',
data: $(this).serialize(),
success: function (data) {
//console.log(data);
$('#response').html(data);
$("#myModal").modal();
}
});
});
But then, I want to check in my index.php script, where all these above is, if is $domain variable passed in URL, like yoursite.com?domain=domain.com, and if is, to call submit(); function programatically with this code:
if(isset($_GET['domain'])) {
$domain = $_GET['domain'];
echo $domain;
echo "
<script>
$('#form1').submit();
</script>
";
//exit();
}
Problem is, that nothing happens. How to achieve desired behaviour?
You should not do that. There is no reason to serve a page to the client, fill a form automatically and post back to the server.
Instead you should check if $_GET['domain'] domain is set and if it is, you should include your check.php file directly. And you should adapt check.php to handle both POST and GET parameters.
This would save you a round-trip to the client and does not rely on the client having javascript enabled.
<form id="form1">
<input type="text" name="domain" id="field1">
<input type="submit" onclick="return call();" value="Submit Form">
</form>
<script type='text/javascript'>
function call()
{
//ajax code;
return true;//are your want form submit
return false;// are your want cannot form submit
}
</script>
Don't forget to put return

jQuery two forms in same page - value change

I've a list of all my users in a table. The last td element will contain a form,
either a form for opening the account or a form for closing the account based on if the user
is already been closed or not. I'm using jQuery AJAX form plugin from http://malsup.com/jquery/form/ which is working.
What I'd like to do is the change the value of button before the form is been submitted.
Here's my JS for now:
$(document).ready(function() {
$('form').ajaxForm({
beforeSubmit: function() {
$('form').find('input').val('Wait...');
},
success: function(data) {
$('body').html(data);
}
});
return false;
});
and here's my HTML markup:
<td>
<?php if($user['closed'] == 0):?>
<?php $attributes = ['class' => 'account']; ?>
<?php echo form_open('admin/closeAccount', $attributes);?>
<input type="hidden" name="user_id" value="<?=$user['user_id']?>"/>
<input type="hidden" name="user_email" value="<?=$user['email']?>"/>
<input type="submit" name="close_account" class="btn btn-danger btn-sm" id="trigger" value="Close" >
<?php echo form_close();?>
<?php else:?>
<?php $attributes = ['class' => 'account'];?>
<?php echo form_open('admin/openAccount');?>
<input type="hidden" name="user_id" value="<?=$user['user_id']?>"/>
<input type="submit" data-loading-text="Odota..." name="open_account" class="btn btn-success btn-sm" id="trigger" value="Open" >
<?php echo form_close();?>
<?php endif ?>
</td>
The problem is that every time I try to submit the form, it will now change the value of all buttons to "Wait..." instead of just the one I clicked. I tried
to replace $('form') with $(this) in $('form').find('input').val('Wait...'); but that didn't help me at all.
According to the plugin documentation (http://malsup.com/jquery/form/#options-object)
$form passed to beforeSubmit callback should give you access to the current form being submitted.
try:
$('form').ajaxForm({
beforeSubmit: function(arr, $form, options) {
$form.find('.btn').val('Wait...');
},
success: function(data) {
$('body').html(data);
}
});
Just try this code
$('.btn').val('Wait...');
or
$('.btn-danger').val('Wait...');
or
$('.btn-sm').val('Wait...');
Try adding more specificity to your CSS selector. Inside your ajaxForm() call try this to change submit button value:
$(this).find('input[type="submit"]').val('Wait...');
If i understood you right you need just change your selector to - $('input[type="submit"]').
So it will be -
$('form').find('input[type="submit"]').val('Wait...');
Or
use :submit selector
Your button has an id, why aren't you using that selector?
$("#trigger").val("Wait...");
Is the form itself loaded via ajax? If so then delegate.
$(document).on("customevent", "#trigger", function() {
$(this).val("Wait...");
});
and then in the beforesubmit just $(document).trigger("customevent");

Categories

Resources