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);
Related
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>
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>
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.
I have been looking through StackOverflow a lot and found SOME solutions but they don't work for me :( Probably because I can't place the strings of code correctly.
I have a form which submits content to a database - and a script that loads the database inputs into a div below the form. It works realtime with a small delay.
<div id="addCommentContainer">
<form id="addCommentForm" method="post" action="">
<div>
<input type="hidden" name="name" value="<?php echo $loggedInUser->display_username; ?>" id="name" />
<input type="hidden" name="email" value="<?php echo $loggedInUser->email; ?>" id="email" />
<textarea name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</div>
</form>
It works. I also have this script:
http://sandbox.jinoh.dk/script.js
I tried a solution onclick - but it made the content disappear not being posted. I tried onsubmit - but it didn't work. What I want is the "comment" to be posted and then disappear from the form aka the form to be cleared.
Chatchatchat-div is the one that the comments are loaded into.
$('#addCommentForm').submit(function(e){
var form = this;
.....
....
$.post('submit.php',$(this).serialize(),function(msg){
if(msg.status){
form.reset(); // if you want to reset on msg status
}
....
});
this.reset(); // just reset the form what happen
});
I'm currently working on a basic form. When you hit the submit button, it should first change the value of a field, and then submit the form as usual. It all looks a bit like this:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it does not submit the form.
function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}
You could do something like this instead:
<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>
And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:
function DoSubmit(){
document.myform.myinput.value = '1';
return true;
}
I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.
document.getElementById("myform").submit();
This won't work as your form tag doesn't have an id.
Change it like this and it should work:
<form name="myform" id="myform" action="action.php">
Here is simple code. You must set an id for your input. Here call it 'myInput':
var myform = document.getElementById('myform');
myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};
No. When your input type is submit, you should have an onsubmit event declared in the markup and then do the changes you want. Meaning, have an onsubmit defined in your form tag.
Otherwise change the input type to a button and then define an onclick event for that button.
You're trying to access an element based on the name attribute which works for postbacks to the server, but JavaScript responds to the id attribute. Add an id with the same value as name and all should work fine.
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>
function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}
My problem turned out to be that I was assigning as document.getElementById("myinput").Value = '1';
Notice the capital V in Value? Once I changed it to small case, i.e., value, the data started posting. Odd as it was not giving any JavaScript errors either.
I have done this and it works for me.
At first you must add a script such as my SetHolderParent() and call in the html code like below.
function SetHolderParent(value) {
alert(value);
}
<input type="submit" value="Submit" onclick="SetHolderParent(222);" />
You can use the onchange event:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
This might help you.
Your HTML
<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>
Your Script
<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>