jQuery two forms in same page - value change - javascript

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");

Related

Executing form autosubmit on page load?

I have tried many of the scripts and jquery examples here on this website, but none of them worked for my specific situation.
Basically I'm trying to autosubmit a form (without user needing to press submit).
As soon as the page loads, the autosubmit will be triggered.
My Form:
<form method="post" id="adduser" action="<?php the_permalink(); ?>" >
<input type="text" name="confirmed" id="confirmed" value="yes" class="regular-text" />
<p class="form-submit">
<?php echo $referer; ?>
<input name="updateuser" type="submit" id="updateuser" class="submit button" value="<?php _e('Update', 'profile'); ?>" />
<?php wp_nonce_field( 'update-user' ) ?>
<input name="action" type="hidden" id="action" value="update-user" />
</p>
</form>
As you can see I have php in the form's action, so javascript/jquery that needs to set an action URL inside the script won't work, as they don't allow a php.
Any help would be greatly appreciated.
You could set an event to trigger after the document has loaded, like this:
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const form = document.querySelector('#adduser')
form.submit()
})
</script>
This will submit the form right after all the contents in the DOM will be loaded.
$(function () {
$('#adduser').submit();
}
This should work.
try the following code:
<script>
$(document).ready(function () {
var formData = $('#adduser').serializeArray();
if(formData.length != 0) {
$("#adduser").submit();
}
})
</script>

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();

Refreshing div with AJAX

Index.php
...
<form id="calculator_form" name="form" action="" method="get" >
<input name="one" type="text">
<input name="two" type="text">
<input type="submit">
</form>
...
<!-- refresh area -->
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>
<------------------->
I would like to submit the form and reload the refresh area indicated above. I know this can be achieved by using AJAX but I'm not quite sure how.
I have tried putting the refresh area in a separate ajax.php file and using JQuery but it didn't work;
$(document).ready(function() {
$("#calculator_form").submit(function(event) {
event.preventDefault();
$("#divtoappend").load("ajax.php", data);
})
})
I've also tried using $.get() but to no avail.
I'm able to send the data back and forth to a seperate php page but I'm stuck trying to achieve what I am looking for.
EDIT:
The code that I posted was quickly written and the syntax isn't the issue in question, I'm merely wondering how I can refresh a <div> under the form so that it will once again do the if(isset($_GET["one"])) check and print the updated php variables.
EDIT 2:
My code is now as follows:
Index.php
...
<form id="calculator_form" name="form" action="" method="get" >
<input name="one" type="text">
<input name="two" type="text">
<input type="submit">
</form>
...
<div id="append">
<!-- where I want the ajax response to show -->
</div>
...
ajax.php
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . 4_GET["two"]; ?>
</div>
<!-- assume there's n number of divs -->
<?php } ?>
Now I want the ajax.php div to append to the #append div in index.php. There has to be a better way than altering the ajax.php and using echo:
ajax.php (with echo)
<?php
if(isset($_GET["one"])) {
echo "<div>". $_GET["one"] . " " . $_GET["two"] . "</div>";
}
?>
So, as ajax.php could be very large, is there a better solution than
just echoing data from ajax.php to index.php?
Now this can be done in many ways.. One of them is Following.. Try this:
Index.php file
<form method="get" id="calculator_form">
<input name="one" type="text" id="one">
<input name="two" type="text" id="two">
<input type="submit" name="submit">
</form>
<div class="result"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#calculator_form").on('submit', function(event){
event.preventDefault();
var one = $('#one').val(); // Taking value of input one
var two = $('#two').val(); // Taking value of input two
$.get( "ajax.php", { one:one, two:two }). done( function( data ) {
$('.result').html(data); // Printing result into result class div
});
});
});
</script>
ajax.php
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>
Use this,
$(document).ready(function() {
$(document).on('submit',"#calculator_form",function(event) {
event.preventDefault();
$.get(
'ajax.php',
function(ret_data){
$("#divtoappend").html(ret_data);
}
);
});
}) ;
The original syntax for $.get is,
$.get(
URL,
{
VAR_NAME1:VAL1,
VAR_NAME2:VAL2
},
function(response){
// your action after ajax complete
}
);
Typo: You have accidentally used $(document).read( instead of $(document).ready(! That will stop your code running.
Note: jQuery has a handy shortcut for the document ready handler:
$(function(){
// your code here
});
I'm not sure if I understand the question correctly, but here is what you can do: Assign some ID or at least the css Class name to the target div and paint the stuff you are getting from AJAX response something like below.
$(document).ready(function() {
$("#calculator_form").submit(function(event) {
event.preventDefault();
$.ajax({
url: "Ajax_URL",
success: function(result) {
$("#targetDiv").html(result.one + " " + result.two); //assuming you have assigned ID to the target div.
}
});
})
})

CodeIgniter PHP: change value in database when checkbox is mark/unmark

Ok, I manage somehow to get value of checkbox, but now i have another issue.
This is my view, rssFeeds.php
<?php foreach( $feeds as $row ) : ?>
<div class="row">
<div class="col-md-2 col-sm-3 text-center">
<a class="story-title"><img alt="" src="http://www.solostream.com/wp-content/uploads/2014/06/20140110080918_0555.jpg" style="width:100px;height:100px"></a>
<label class="checkbox-inline">
<input type="checkbox" class="chkbox" value="chkbox_<?php echo $row->category; ?>_<?php echo $row->id; ?>"> Mark Read
</label>
</div>
<div clas="col-md-10 col-sm-9">
// here are my feeds....
</div>
</div>
<?php endforeach; ?>
I have this script, which take checkbox value, and send it to my controller:
<script>
$(document).ready(function(){
$(document).on('click','.chkbox',function(){
var id=this.value;
$.ajax( {
type: "POST",
context: "application/json",
data: {id:id},
url: "<?php echo site_url('rssFeedReader/markReadUnread'); ?>",
success: function(msg)
{
// what should i do here ?....
}
})
});
});
</script>
In my controller, i just load a model which change a value on my database, 0 or 1( meaning read or unread).
The problem is that nothing change on my table...
I need to put something in that .succes function in ajax ? What.. ? I just need to change one value in my database....
#James-Lalor has the answer you are looking for, but I'll expand upon it.
You can give inputs the same name (radio buttons, checkboxes) to have them interact with each other. In the case of radio buttons it's actually required to have the same name to mark and unmark others. However in this case we will use <input name=example[]> note the [], this means when you do an ajax post (or any post) it will send all the values checked as an array.
So following James' suggestion, you would do a <input name="checkbox[<?php echo $row->id?>]" to which you can post using $.post(url, data, callback), the easiest way to do this would be to put it into a form, assign the form an id, do a serialized post. You could do something like:
<form id="rss_form" method="post" action="javascript:rssUpdate();">
<input name="checkbox[<?php echo $row->id?>]" type="checkbox"/>
<input type="submit" value="submit"/>
</form>
<script>
function rssUpdate()
{
$.post(url/to/post/to, $("#rss_form").serialize());
}
</script>

form with 2 buttons need to call different functions based on value

I have a page which has lot of post data in the url.
For example,
www.test.com/test.php?userid='tester'&name=test&so on
The above page has a form that has something like this:
<?
$set=get_value_set;
if($set ==1) {
$set_value="SET";
} else {
$set_value="UNSET";
}
?>
<form name="test">
<input type="text" readonly="READONLY" value="<? echo $user_id; ?>">
<input type="submit" value="Email" name="submit_user">
<input type="submit" value="<? echo $set_value; ?>" name="submit_user">
<?
function setuser()
{
//sets the value
}
function email_user()
{
//sets the value
}
?>
there are two buttons above, when I click on email, i want the value of email button to be passed to the email_user function and do some proceesing there. Similar thing when I click on the set button.
NOTE:But in both cases above, I want the form to remain in the same page with the same post data in the url, but I also want the page to be refreshed so that the set button can have a value of Set or Unset depending on the database update.
Is this possible?
I would start to remove the submit action of each button and change them to
<input type="button" class="btn-Email" value="Email" name="submit_user" />
<input type="button" class="btn-Other" value="<? echo $set_value; ?>" name="submit_user" />
and then, using jQuery, you can easily process each click and submit the form
$(function() {
$(".btn-Email").click(function() {
// append anything you want
var but_email_value = $(this).val(), // or $(".btn-Email").val()
btn_other_value = $(".btn-Other").val();
$("form").submit();
});
$(".btn-Other").click(function() {
// append anything you want
var but_other_value = $(this).val(), // or $(".btn-Other").val();
btn_email_value = $(".btn-Email").val();
$("form").submit();
});
});
change your HTML
<form id="test" name="test">
...
<button onclick="email_user();">Email</button>
<button onclick="setuser();"><? echo $set_value; ?></button>
</form>
your functions should submit the form for you:
document.getElementById("test").submit();

Categories

Resources