I know this question has been asked a lot, but there doesn't seem to be an answer for me. I'm sorry if I'm just really dumb, but I've been stuck for a day now..
I want to select a table row(see below), and then delete that user. Since I want to have multiple form's to interact with the table I can't place them in one form.
$("#clickMe").click(function () {
$(".myForms").trigger('submit');
});
$('.myForms').submit(function () {
console.log("SWAGGG");
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="listForm" action="index.php?p=admin" method="POST">
<?php
$userQuery = "SELECT * FROM usr2";
$row_userQuery = $dbportal->query($userQuery);
if(isset($row_userQuery) && !empty($row_userQuery))
{
//row[0] = ID
//row[1] = username(abbrevation)
//row[2] = admin? 0=normale user 1=admin
echo'
<table id="myTable" class="table table-striped">
<tr><td></td><td>User ID</td><td>username</td><td>Role</td></tr>';
foreach ($row_userQuery as $row)
{
echo'
<tr>
<td id="tdSelect"> <input type="checkbox" name="selectedUser[]" value="'. $row[0] .'" />
<td>'. $row[0] .'</td>
<td>'. $row[1] .'</td>
<td>'. $row[2] .'</td>
</tr>';
}
echo'</table>';
}
?>
<input type="hidden" name="action" value="listForm">
</form>
<form id="deleteForm" class="myForms" action="index.php?p=admin" method="POST">
<div class="leftTextBox">
<p>user ID:</p>
<p class="margin">gebruikersnaam:</p>
</div>
<div class="rightTextBox">
<input class="form-control" type="text" name="userID" placeholder="user ID">
<input class="form-control" type="text" name="login" placeholder="gebruikersnaam" style="margin-top: 8px;">
</div>
<input type="hidden" name="action" value="deleteForm">
</form>
<button id="clickMe" class="btn btn-default" style="margin-top:5px;float:right;">Delete user</button>
I'm sure that its just me overseeing something, but help would greatly be appriciated.
Also, I have ajaxForm plugin installed.
A 'submit' is by definition a jump to a new URL. You know this can only be done for one form at a time.
However, we talking normal 'submits' here, and you don't have to use normal submits to get information from a form and act on it.
Since you're using JQuery, you could use that. Have a look at ajax calls. For instance here:
http://api.jquery.com/jquery.post
Look for the example called: Post a form using ajax and put results in a div, you will find useful code there. It shows you how to get the values of the fields in the form.
Let's imagine you have 3 forms like this:
<form id="form1" action="api/url1">
<input name="field1" type="text" />
</form>
<form id="form2" action="api/url2">
<input name="field2" type="text" />
</form>
<form id="form3" action="api/url3">
<input name="field3" type="text" />
</form>
<button>Submit</button>
Then you can fire the submit of each form like this:
$('button').on("click", function () {
$('form').each(function (index, form) {
$(form).submit();
});
});
Then to prevent form full post back just prevent the default of the submit event and then post the serialized form with ajax:
$('form').on("submit", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
data: $(this).serialize(),
success: function (data) {
alert(data);
},
error: function (error) {
console.error({ status: error.status, statusText: error.statusText })
}
});
});
JSFIDDLE
If you want to use ajax
you can group a data of all input and post using new FormData()
function fnSubmintAll(){
var formData = new FormData();
$("#form1,#form2,#form3").each(function(idx,item){
var frmValue = $(item).serializeArray();
$.each(frmValue, function (key, input) {
formData.append(input.name,input.value);
});
})
$.ajax({
url: "/PostUrl",
type: "POST",
data: formData,
contentType:false,
processData: false,
success: function (result) {
alert("Success")
},
error: function () {
alert("Error")
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<legend>From 1</legend>
<form id="form1">
<input name="field1" type="text" />
</form>
</fieldset>
<fieldset>
<legend>From 2</legend>
<form id="form2">
<input name="field2" type="text" />
</form>
</fieldset>
<fieldset>
<legend>From 3</legend>
<form id="form3">
<input name="field3" type="text" />
</form>
</fieldset>
<br />
<br />
<br />
<button type="button" onclick="fnSubmintAll">Submit All</button>
Related
I'm not sure about the right title for this question.
I have two inputs with two buttons for them in index.php
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
<input type="text" class="form-control" id="input1" name="input1" value="">
<button type="submit" id="button1" name="button1" class="btn">Get Data</button>
</form>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
<input type="text" class="form-control" id="input2" name="input2" value="">
<button type="submit" id="button2" name="button2" class="btn">Get Data</button>
</form>
// display and insert them into database with third button
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
// the results goes inside these input
<input type="text" class="form-control" class="results-container" name="input3" value="">
<input type="text" class="form-control" class="results-container" name="input3" value="">
<input type="text" class="form-control" class="results-container" name="input3" value="">
<input type="text" class="form-control" class="results-container" name="input3" value="">
...
<button type="submit" id="button3" name="button3" class="btn">Sace The Data</button>
</form>
I want to get the input data separately and pass the values(ajax or $_POST) into two other files and do something with them in those two other files namely( doing_somthing1.php , doing_somthing2.php ) and get the results of these files and show them in index.php inside inputs(results-container).
here is a preview:
index.php / AJAX Script
<script>
$(document).ready(function() {
$('#button1').click(function() {
$input = $('#input1').val();
$.ajax({
type: 'POST',
url: '.php',
data: {
'doing_somthing1.php': $input
},
dataType: 'json',
success: function(result) {
$('.results-container').html(result[0]);
},
});
});
});
</script>
doing_somthing1.php
if (isset($_POST['button1'])) {
$input_data = $_POST['input1'];
// do other stuffs like foreach, if and etc..
// and return new data in array
$results = array();
echo json_encode($results);
}
I'm new to ajax and I don't know if I did this right, but if you understand what I mean and what I'm trying to do, please can you help me out here.
I'm not sure that I've understood everything. But you do not need to use two files to handle the form. You can do something like this:
if (isset($_POST['button1'])) {
$input_data = $_POST['input1'];
// do other stuffs like foreach, if and etc..
// and return new data in array
$results = array();
echo json_encode($results);
} else if (isset($_POST['button2'])) {
$input_data = $_POST['input2'];
// do other stuffs like foreach, if and etc..
// and return new data in array
$results = array();
echo json_encode($results);
}
How many inputs you want to submit to the form at the bottom ? You might need again a little bit of jquery 'on click' to handle the third form, because the inputs "results-container" are outside of it. By the way, you do not need the property name any more.
I have multiple Forms on one Page with differend IDs which get performed with AJAX:
<form action="comment.php" class="testForm" id="1" method="POST">
<input type="text" name="name">
<input type="text" name="comment">
<input type="submit">
</form>
<form action="comment.php" class="testForm" id="2" method="POST">
<input type="text" name="name">
<input type="text" name="comment">
<input type="submit">
</form>
AJAX is actually working well, but considers only the input values of the first form. I'm pretty shure it's because it's all the same class and it does not differ between the IDs (1,2..)
<script>
$(document).ready(function() {
$('.testForm').submit(function(event) {
var formData = {
'name' : $('input[name=name]').val(),
'comment' : $('input[name=comment]').val()
};
$.ajax({
type : 'POST',
url : 'comment.php',
data : formData,
dataType : 'json',
encode : true
})
.done(function(data) {
console.log(data);
if (data.success) {
$('.testForm input[type="submit"]').addClass('red');
}
});
event.preventDefault();
});
});
</script>
I want to have only class red added on the submit button, that was clicked.
I'm sorry for my lack of knowledge, i'm pretty new to this and i could not really find helpfull stuff.
Simply use this.id:
$('.testForm#'+form.id+' input[type="submit"]').addClass('red');
$(document).ready(function() {
$('.testForm').submit(function(event) {
var form = this; // capture correct this
console.log(form.id) // should be 1 or 2 depending on the form
var formData = {
'name': $(form).find('input[name=name]').val(),
'comment': $(form).find('input[name=comment]').val()
};
console.log(JSON.stringify(formData));
$.ajax({
type: 'POST',
url: './',
data: formData,
dataType: 'json',
encode: true
})
.done(function(data) {
console.log(data);
console.log(form.id)
if (data.success) {
$(form).find('input[type=submit]').addClass('red')
}
});
event.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="comment.php" class="testForm" id="1" method="POST">
<input type="text" name="name" value="n1">
<input type="text" name="comment" value="c1">
<input type="submit">
</form>
<form action="comment.php" class="testForm" id="2" method="POST">
<input type="text" name="name" value="n2">
<input type="text" name="comment" value="c2">
<input type="submit">
</form>
<form action="comment.php" class="testForm" id="3" method="POST">
<input type="text" name="name" value="n3">
<input type="text" name="comment" value="c3">
<input type="submit">
</form>
<form action="comment.php" class="testForm" id="4" method="POST">
<input type="text" name="name" value="n4">
<input type="text" name="comment" value="c4">
<input type="submit">
</form>
You can also capture the correct form by using jQuery's $.fn.find(), like #pschichtel wrote in his comment:
$(form).find('input[type=submit]').addClass('red')
I have two forms usin ajax on one page, one for uploading an image and the other sending information via mail.
When I submit one it clears the content of the other one.
My html:
<form class="inputform">
<input required size="60" maxlength="80" class="form-control" name="Location[zendernaam]" id="Location_zendernaam" type="text">
<!--more input fields-->
<input type="submit" class="submit" style="display:none;">
</form>
<form id="form" class="imageuploadform" action="<?php echo get_home_url(); ?>/wp-content/themes/PandoraBox/ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="image" />
<input id="button" class="image-upload" type="submit" value="Upload">
</form>
<div id="preview" style="display:none"></div>
<input id="submitform" type="button" value="Verzend">
My javascript/jquery:
<script type="text/javascript">
$("#submitform").click(function(){
$('.inputform .submit').click();
return false;
});
$(".inputform").submit(function( event ){
event.preventDefault();
post_data = {
'titel' : $("#Location_title").val(),
'hoofdcategorie' : $("#Location_hoofd1").val(),
//more fields
};
$.ajax({
type: "POST",
url: "<?php echo get_home_url(); ?>/wp-content/themes/PandoraBox/verzend-inzending.php",
data: post_data,
success: function(){
alert('top!');
}
});
});
</script>
First the user fills in the fields, after that he can upload an image and preview it.
When you click submit on the image upload form it clears all the values of the first form.
Here is one form example. It is working good without any issue.
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="3">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="5">
<button type="submit" value="submit"> Add to Cart</button>
Now I have to create the same form but a little modification needed. I have my markup like this
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8">
<button type="submit" value="submit" data-value="10" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="3" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="5" data-name="id">Try Now</button>
</form>
To submit the form I have used this jQuery.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('button[type=submit]').click(function() {
var Id = jQuery(this).attr('data-value');
var Name = jQuery(this).attr('data-name');
alert(Name);
})
});
</script>
But from this point of jQuery I don't know what to do next. So can someone kindly tell me how to submit the form by jquery with the same values as used above markup?
Update
Yes I can change my markup if you think so.
First of all, your HTML is not correct. Move the inputs inside of the form:
<form action="..." class="form-horizontal" method="post" accept-charset="utf-8">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
</form>
You can have any number of forms like above. In the JavaScript side you have to catch submit event for all forms. In the submit handler, this will be the form that was submitted.
$(document).ready(function () {
$("form").on("submit", function () {
$.ajax({
type: "POST",
url: formUrl,
data: $(this).serializeArray(),
success: function (data) {
/* handle success */
},
error: function (data) {
/* handle error */
},
dataType: "json" // remove this if the server doesn't send json data
});
return false; // prevent default browser behavior
});
});
Note $(this).serializeArray() - this returns an array like this:
[{
name: "some-input-name",
value: "some-input-value"
}, ...
Also, you may checkout the return false usage: When and why to 'return false' in JavaScript?
The thing I'm trying to have is a JQuery/JavaScript code that will automatically pass some data from facebook to a form (basically the form doesn't need to be shown). so the first part is ready (the part that pulls the data from facebook).
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxxxxxxx', status: true, cookie: true, xfbml: true});
};
FB.Event.subscribe('auth.login', function(response) {
if (response.session) {
FB.api({
method: "fql.query",
query: "SELECT name,email FROM user WHERE uid = " + response.session.uid
}
Now i need to insert the name and the email to the inputs with name="name" and name="email" and auto submit the form.
Thanks in advance!
EDIT: here is the form:
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<input type="hidden" name="meta_web_form_id" value="XXXXXXXX" />
<input type="hidden" name="listname" value="XXXXXX" />
<input type="hidden" name="meta_adtracking" value="XXXX" />
<input type="hidden" name="meta_message" value="1" />
<input id="awf_field-22176678" type="text" name="name" class="text" value="" tabindex="500" />
<input class="text" id="awf_field-22176679" type="text" name="email" value="" tabindex="501" />
<input name="submit" class="submit" type="submit" value="Submit" tabindex="502" />
<div class="af-clear">
</form>
EDIT 2: I need to do something like this just simplified with jQuery:
<?php
$formcode = '<form method="post" action="http://www.aweber.com/scripts/addlead.pl" >
<input type="hidden" name="meta_web_form_id" value="864136470" />
<input type="hidden" name="listname" value="fbu-ppv-mmoney1" />
<input type="hidden" name="meta_adtracking" value="FB_Ultralizer_PPV" />
<input type="hidden" name="meta_message" value="1" />
<input id="awf_field-22176678" type="text" name="name" class="text" value="" tabindex="500" />
<input class="text" id="awf_field-22176679" type="text" name="email" value="" tabindex="501" />
<input name="submit" class="submit" type="submit" value="Submit" tabindex="502" />
</form>
'; ?>
<script type="text/javascript">
customar_formcode="$formcode";
customar_formcode=customar_formcode.replace("{email}", user.email);
customar_formcode=customar_formcode.replace("{name}", user.name);
document.getElementById(\'form\').submit();
</script>
Use Jquery's POST to send the data without the need for the markup for a form and using auto submits:
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
EDIT:
If you have already got the form setup in the DOM you should just fill it in with JavaScript and submit it with JavaScript
To change the input values use Jquery like so:
$('input[name$="name"]').val('value');
once all the inputs are set to how you want them you can submit the form using this:
if you have the ID form on your form then you can use code like
$('#form').submit();
Hope this helps
with jquery you can pass all data of form at once with something like:
var data = $(#formID).serialize();