I'm having troubles on making this work.
I need to have multiple forms on the same page... I've tried countless things, but nothing seem to work.
What I'm trying to do here is identify every form (in some way) in order to submit that one instead of the FIRST form on the page. Code below, works but submits always the same form, the first one!
Here's my current code
JS:
$(document).ready(function(){
$('.submit').on("click", function() {
var artworkId = $("#inquirebox").data("artworkid");
$.post("send.php";, $("#artinquire"+artworkId).serialize(), function(response) {
$('#success').html(response);
});
return false;
});
});
HTML:
<div id="inquirebox" data-artworkid="<?php echo 456;?>">
<form action="" method="post" id="artinquire<?php echo 456;?>" data-artworkid="<?php echo 456;?>">
<label for="name">Name:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="email">Email:</label><br />
<input type="text" name="email" id="email" /><br />
<label for="message">Message:</label><br />
<textarea name="message" id="message"></textarea><br />
<input type="hidden" name="id" value="<?php echo 456;?>">
<input type="hidden" name="artist" value="<?php echo $title1; ?>">
<input type="hidden" name="url" value="<?php echo $uri1; ?>">
<input type="hidden" name="artwork" value="<?php echo $artwork1; ?>">
<input type="button" value="send" class="submit" id="submit" data-artworkid="<?php echo 456;?>">
<div id="success"></div>
</form>
</div>
You're using the same ID on all the DIV wrappers around the forms.
ID's must be unique, so you could use a class instead, but you really don't need any identifiers at all, nor do you need data attributes, the .submit button is inside the form, so all you need is this.form, or more jQuery'ish $(this).closest('form') to get the parent form
$(document).ready(function(){
$('.submit').on("click", function() {
var form = $(this).closest('form');
$.post("send.php", form.serialize(), function(response) {
form.find('.success').html(response);
});
return false;
});
});
You should however use a class on the #success element to find it based on the form.
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 the same page but need to get the values of the input element when a particular form is clicked i.e
However the jquery returns undefined query i
MY SCRIPT to get the values
jQuery(function($) {
$('.theform').submit(function(e) {
e.preventDefault();
var user = $(this).find(".product").val();
alert(user);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$product='productOne';
<form class="theform">
<input id="" class='product' name="product" value="<?php echo $product; ??>" style="display: none">
<input type="hidden" class="userName" name="userName" value="john759">
<button class="action">Click</button>
</form>
$product='productTwo';
<form class="theform">
<input id="" class='product' name="product" value="<?php echo $product; ?>" style="display: none">
<input type="hidden" class="userName" name="userName" value="dDuck">
<button class="action">Click</button>
</form>
instead of this:
var user = $(this).find(".product").val();
use:
var user = $(this).parent().find(".product").val();
Use jquery closest function to get closset form value;
$(this).closest('form').find(".product").val();
Try to change type of button
<button class="action" type="submit">Click</button>
Can I Make a 2 second interval before the auto-save perform? this code shows my webpage with a single textbox in it, and it auto show my DTRSearch.php result. This code is working perfectly.
<div id="search">
<input type="text" placeholder="Scan" id="t1" name="t1" onkeyup="aa();"
autofocus/></div>
<script type="text/javascript">
function aa(){
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","DTRSearch.php?
nmnm="+document.getElementById("t1").value,false);
xmlhttp.send(null);
document.getElementById("searchdiv").innerHTML=xmlhttp.responseText;
document.getElementById("searchdiv").style.visibility='visible';
}
</script>
<div id="searchdiv" style="visibility:hidden; position:absolute">
</div>
DTRSearch.php it query a single row, this a simple form with a submit button, i want this form to perform an auto-save but before that it should show the form for 2 second
<form action="GetDTRSearch.php" method="get">
<input type="text" value="<?php echo $id_number;>" name="ID_Number" /><br />
<input type="text" value="<?php echo $fullname; ?>"name="Fullname" /><br />
<p class="Ok"><input type="submit" value="Click Confirm" /></p>
Change the button to a simple button instead of an input type submit. Instead, add a click listener to the Submit button. The click listener should call a setTimeout() function to execute the form submission after 2 seconds.
<form id="theForm" action="DTRSearch.php" method="get">
<input type="text" value="<?php echo $id_number;>" name="ID_Number" /><br />
<input type="text" value="<?php echo $fullname; ?>"name="Fullname" /><br />
<p class="Ok"><button id="submitButton" value="Click Confirm" /></p>
Then, assuming you have JQuery, add the following script:
<script>
$(document).ready(function() {
$("#submitButton").click(function() {
setTimeout(function() {
$("#theForm").submit();
}, 2000);
});
});
</script>
This is the sample html code you need to change.
<form name="myForm" id="myForm" action="GetDTRSearch.php" method="get">
<input type="text" value="<?php echo $id_number;>" name="ID_Number" /><br />
<input type="text" value="<?php echo $fullname; ?>"name="Fullname" /><br />
<p class="Ok"><input type="submit" value="Click Confirm" /></p>
</form>
Below code the form will be automatically post back to server after 2 seconds to the action method.
make sure this code will be executed after the data will fetch from DTRSearch.php else it will send blank value to the server. You can use this on submit click or you can directly make function and call this after data is fetched.
setTimeout(function() {
document.forms["myForm"].submit();
}, 2000);
This is my code that I am using to submit form with post value
<form action="<?php echo DOMAIN; ?>contact/booking-form.php" method="post">
<input type="text" name="name" value="<?php echo $name; ?>" />
<input type="text" name="email" value="<?php echo $email; ?>" />
<input type="submit" name="submit" id="submit" />
<script>document.getElementById('submit').submit();</script>
</form>
Can anybody help me to pass name="submit" value of submit button to another page?
A submit button is only going to be a successful control if it is used to submit the form (and even then only if it has a name and a value … which yours does not).
If you want submit=submit in your form data when you submit the form with JavaScript, then don't use a submit button to put that data in the form in the first place. Use a hidden input.
<input type="submit">
<input type="hidden" name="submit" id="submit" value="submit">
Then you have two other problems.
First, submit is a method of form elements, not inputs. So you need to change your script to call the right element.
<script>document.getElementById('submit').form.submit();</script>
Second, if a form has a control called submit then that will clobber the submit method. So you need to get one from a different form (not supported in old versions of Internet Explorer):
<script>
var form = document.getElementById('submit').form;
var submit_method = document.createElement("form").submit;
submit_method.call(form);
</script>
<form id=submit action="<?php echo DOMAIN; ?>contact/booking-form.php" name="form1" method="post">
<input type="text" name="name" value="<?php echo $name; ?>" />
<input type="text" name="email" value="<?php echo $email; ?>" />
</form>
<script >
document.form1.submit()
</script>
there is no sumit button in your code. first add in html
<input type="submit" value="submit" id="submit"/>
<script>
document.getElementById("submit").value = "newSubmitButtonValue";
</script>
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();