how to give name in auto submit form javascript - javascript

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>

Related

It is not able to post with JS form submit function

In this webpage , I have a visible form with a submit button ,called form A.It has a post action.
<form name="payFormCcard" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
I want to do an invisible form that extract some of the data from form A , with the method of hidden input button .It auto-executes the form and post to the another place with the JS.
However, it works and posts to appropriate place if I add the real button .
<input type="submit" name="submission_button" value="Click here if the site is taking too long to redirect!">
Here is my code (without the real button):
<form name="A" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post"> <== first visable form
.....
//invisible table
<form name="payForm" method="post" action=" https://test.paydollar.com/b2cDemo/eng/payment/payForm.jsp">
<input type="hidden" name="merchantId" value="sth">
<input type="hidden" name="amount" value="</?php echo $input_amount; ?>" >
<input type="hidden" name="orderRef" value="<?php date_default_timezone_set("Asia/Taipei"); $date = date('m/d/Y h:i:s a', time()); echo $date ; ?>">
<input type="hidden" name="currCode" value="sth" >
<input type="hidden" name="mpsMode" value="sth" >
<input type="hidden" name="successUrl" value="http://www.yourdomain.com/Success.html">
<input type="hidden" name="failUrl" value="http://www.yourdomain.com/Fail.html">
<input type="hidden" name="cancelUrl" value="http://www.yourdomain.com/Cancel.html">
...
<!-- <input type="submit" name="submission_button" value="Click here if the site is taking too long to redirect!">-->
</form>
<script type="text/javascript">
//Our form submission function.
function submitForm() {
document.getElementById('payForm').submit();
}
//Call the function submitForm() as soon as the page has loaded.
window.onload = submitForm;
</script>
You should use DOMContentLoaded instead of load to ensure that the DOM elements are loaded successfully.
Try to do something like below:
<script type="text/javascript">
//Our form submission function.
function submitForm() {
document.getElementById('payForm').submit();
}
//Call the function submitForm() as soon as the document has loaded.
document.addEventListener("DOMContentLoaded", function(event) {
submitForm();
});
</script>

post data from one page to another on button click using java script

<form name="payform" action="payment.html" method="POST">
Amount: <input type="text" id="amount">
<button id="buttonPay" type="submit" onclick="someFunction()">Submit</button>
</form>
I need to post the text box content along with some variables which are defined outside of the form.
To pass any data with a form submit you could add an input hidden tag inside your form (it has to be inside the form tag):
<input type="hidden" name="varKey" value="varVal" />
If the data lies outside the form tag for some reason, use jQuery to get the data and update the hidden tag's value
<?php
$out_side_var = "myData";
?>
<form name="payform" action="payment.html" method="POST">
Amount: <input type="text" id="amount">
<input type="hidden" name="myData" id="myData" value='<?php echo $out_side_var ?>'>
<button id="buttonPay" type="button" onclick="someFunction()">Submit</button>
</form>

Multiple Forms on Same page AJAX

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.

Pass input textbox value in onClick function - php

I have a input text field. I need to pass the values entered inside the element through onClick of javascript.
<form>
<fieldset>
<label>Common Site ID: </label><span><?php echo $commonsiteid ?></span><br>
<label>Acres: </label><input id="acre_value" name="acre_value" type="text" value="<?php echo $acre; ?>">
</fieldset>
</form>
<input type="submit" value="submit" onclick="saveValue('<?php echo $_REQUEST['acre_value'] ?>')">
I am passing the value through submit onClick, Which is going empty. How do i pass value in this onclick function.
Try this:
<input type="submit" value="submit" onclick="saveValue(document.getElementById('acre_value').value);">
Have you tried writing something like following.
<input type="submit" value="submit" onclick="saveValue(document.getElementById('acre_value').value)">
I try this, and worked:
<script>
function saveValue(){
alert(document.formName.hiddenField.value);
/*do something*/
return false;
}
</script>
<form name="formName" method="post">
<input type="hidden" name="hiddenField" value="<?php echo $_REQUEST['acre_value'] ?>"/>
<input type="submit" value="submit" onclick="saveValue()">
</form>
As you can see, i pass the value by a hidden field, and on the Js function i get the value of this field.If you need a php function instead off a js, it's the same logic.

Two actions two submit button in php?

I've form tag like this
sample name:register.php page
<form id="formElem" name="formElem" action="form10.php" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button name="submit" type="submit">Register</button>
<button name="preview" type="submit">Preview</button>
</form>
I'm sending this info to next form10.php page and displaying all the 10 input values on that page
I'm using $pd= htmlentities($_POST['pd']); $fname= htmlentities($_POST['fname']); to fetch values from form tag and such 10 variables and I'm echoing those entered value
on form10.php file after successful submit button.
like i entered fname, mname, lname came from form tag and displayed on form10.php page.
first name <?echo $fname?>
but now problem is user can see the next page (form10.php) after entering only 10 textboxes values inside form tag.
but I want to give preview option to user so that user can preview that next page either filling any of 1 to 10 textbox values. means he has filled fname and lname but not rest of 8 fields and he clicks on preview button I want to open form10_preview.php which same as form10.php but as user has entered only fname and lname so echo only those values which he as supplied.
Now problem is how can i can have two submit button and two actions in one form?
I think it is better to control form submit rules clientside. Remove the action from your form, and change the button type to be button :
<form id="formElem" name="formElem" action="" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button id="register" type="button">Register</button>
<button id="preview" type="button">Preview</button>
</form>
Then let javascript control the flow of the submitting :
var formElem = document.getElementById('formElem'),
btnSubmit = document.getElementById('register'),
btnPreview = document.getElementById('preview');
function formSubmit() {
switch (this.id) {
case 'register' :
formElem.action='post10.php';
break;
case 'preview' :
formElem.action='preview10.php';
break;
}
formElem.submit();
}
btnSubmit.onclick = formSubmit;
btnPreview.onclick = formSubmit;
You could have the form point to its own page and handle each submit value separately. At the top of the file with the form, you'll need to start the output buffer and a session. This allows the use of header() to redirect, and storage of session variables.
<?php
ob_start();
session_start();
?>
The form will point to itself by removing the action attribute:
<form id="formElem" name="formElem" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button name="submit" type="submit">Register</button>
<button name="preview" type="submit">Preview</button>
</form>
We process each of the buttons via their name in the POST array:
<?php
if(isset($_POST['submit'])){
foreach ($_POST as $key => $value) {
$_SESSION[$key] = $value;
}
header("Location: form10.php");
}
if(isset($_POST['preview'])){
foreach ($_POST as $key => $value) {
$_SESSION[$key] = $value;
}
header("Location: form10_preview.php");
}
?>
And at the very end of the file, we flush the output buffer:
<?php ob_end_flush(); ?>
So, essentially the form has one action, which is to submit the values to itself. Finally, both form10.php and form10_preview.php will need session_start(); at the top of the file to access the Session variables we've created, like so:
<?php
session_start();
$inputs = array("pd", "fname", "mname", "lname", etc...);
foreach ($inputs as $input) {
echo $_SESSION[$input];
}
?>

Categories

Resources