<form action='/numeric_score_vote' method='POST'>
<input type="hidden" name="auth_token" value="1bc953fd382c580062da0fd050e46916">
<input type='hidden' name='image_id' value='141687'>
<input type='hidden' name='vote' value='up'>
<input type='submit' value='Vote Up'>
</form>
So I would like to write a simple Script using Javascript and have it auto click this "Vote Up" Button immediately only once on page load. However im still new at Javascript and I dont understand how things work.
it is actually fairly simple,
first of all you have to give your form an id like
<form id="voteup">
then you get your form element in javascript on your page load function which you can build with the
window.onload = function (){}
so your full example would be:
Html:
<form id="voteup" method="POST" action="yourphp.php">
And Javascript:
window.onload = function(){
var form = document.getElementById("voteup");
form.submit();
}
That's it simple as that.
br,
Sebastian
Related
I'm currently working on my webpage where I'm using an anchor tag to process the request. Here is the portion of my code:
I AGREE
It works okay. However, I added an input field and I have to include that in my process on "?redirect=Pro". My input field value is not being processed because the form is not being submitted/processed. I already tried the:
<form id="discount">
<input type="hidden" id="coupon_applied">
</form>
<a id = "agree" onclick="document.getElementById('discount').submit()" href="?redirect=Pro" target="_blank">I AGREE</a>
But I still can't get it to work.
I can't remove the ?redirect=Pro because that's where all my process is happening.
Any advice on how I i will modify my code to accommodate this would be much appreciated.
EDIT: This is a preview of my pricing.php file for more info:
<?php
session_start();
$link=$_GET['redirect'];
$discount_amount = $_POST['coupon_applied'];
if ($link == 'Pro')
{
echo "<script type='text/javascript'>alert('$discount_amount')</script>";
}
?>
<form id="discount" action="pricing.php" method="post">
<input type="hidden" id="coupon_applied">
</form>
<a onclick="document.getElementById('discount').submit()" href="?redirect=Pro" target="_blank">I AGREE</a>
With my current code, echo is returning blank/null.
You should use a method and action in your form like: <form action="/action_page.php" method="post">
I have two forms. I want to submit both forms with 1 button. Is there any method that can help me do it?
Example:
<form method="post" action="">
<input type="text" name="something">
</form>
<form method="post" action="">
<input type="text" name="something">
<input type="submit" value="submit" name="submit">
</form>
I want both forms to be submitted with 1 submit button. Any help would be appreciated.
The problem here is that when you submit a form, the current page is stopped. Any activity on the page is stopped. So, as soon as you click "submit" for a form or use JavaScript to submit the form, the page is history. You cannot continue to submit another page.
A simplistic solution is to keep the current page active by having the form's submission load in a new window or tab. When that happens, the current page remains active. So, you can easily have two forms, each opening in a window. This is done with the target attribute. Use something unique for each one:
<form action='' method='post' target='_blank1'>
The target is the window or tab to use. There shouldn't be one named "_blank1", so it will open in a new window. Now, you can use JavaScript to submit both forms. To do so, you need to give each a unique ID:
<form id='myform1' action='' method='post' target='_blank1'>
That is one form. The other needs another ID. You can make a submit button of type button (not submit) that fires off JavaScript on click:
<submit type='button' onclick="document.getElementById('myform1').submit();document.getElementById('myform2').submit();" value='Click to Submit Both Forms'>
When you click the button, JavaScript submits both forms. The results open in new windows. A bit annoying, but it does what you specifically asked for. I wouldn't do that at all. There are two better solutions.
The easiest is to make one form, not two:
<form action='' method='post'>
<input type='text' name='text1'>
<input type='text' name='text2'>
<input type='submit' value='Submit'>
</form>
You can place a lot of HTML between the form tags, so the input boxes don't need to be close together on the page.
The second, harder, solution is to use Ajax. The example is certainly more complicated than you are prepared to handle. So, I suggest simply using one form instead of two.
Note: After I submitted this, Nicholas D submitted an Ajax solution. If you simply cannot use one form, use his Ajax solution.
You have to do something like that :
button :
<div id="button1">
<button>My click text</button>
</div>
js
<script>
$('#button1').click(function(){
form1 = $('#idIFirstForm');
form2 = $('#idISecondForm');
$.ajax({
type: "POST",
url: form1.attr('action'),
data: form1.serialize(),
success: function( response ) {
console.log( response );
}
});
$.ajax({
type: "POST",
url: form2.attr('action'),
data: form2.serialize(),
success: function( response2 ) {
console.log( response2 );
}
});
});
</script>
You could create a pseudo form in the background. No time to write the code, jsut the theory. After clicking submit just stop propagation of all other events and gather all the informations you need into one other form you append to document (newly created via jquery) then you can submit the third form where all the necesary infos are.
Without getting into why you want to use only 1 button for 2 forms being submitted at the same time, these tools that will get the input data available for use elsewhere:
Option 1...
Instead of using <form> - collect the data with the usual Input syntax.
ex: <input type="text" name="dcity" placeholder="City" />
Instead of using the form as in this example:
<form class="contact" method="post" action="cheque.php" name="pp" id="pp">
<label for="invoice">Your Name</label>
<input type="text" id="invoice" name="invoice" />
<button class="button" type="submit" id="submit">Do It Now</button>
</form>
use:
<label for="invoice">Your Name</label>
<input type="text" id="invoice" name="invoice" />
<button type="button" onclick="CmpProc();" style="border:none;"><img src="yourimage.png"/> Do It Now</button>
Then code the function CmpProc() to handle the processing/submittion.
Inside that function use the Javascript form object with the submit() method as in...
<script type="text/javascript">
function submitform() {
document.xxxyourformname.submit();
}
</script>
Somehow I suspect making the two forms into one for the POST / GET is worth reconsidering.
Option 2...
Instead of POST to use the data to the next page consider using PHP's $_SESSION to store each of your entries for use across your multiple pages. (Remember to use the session_start(); at the start of each page you are storing or retrieving the variables from so the Global aspect is available on the page) Also less work.
Look man. This is not possible with only HTML. weither you gether the inputs in one form or else you use jquery to handle this for you.
I'm looking for a way to add html elements to a form by using for example a button. I've been looking on a few examples out there but they are very big (like 3+ times the size of the actual form I want to build) so I'm wondering if there is a better way of fixing this.
My idea is something like this:
<form action='blabla.php' method='post'>
<!-- Insert button here to add a new element -->
<input type='text' name='desc_1'>
</form>
And by clicking the button, the following should be rendered:
<form action='blabla.php' method='post'>
<!-- Insert button here to add a new element -->
<input type='text' name='desc_1'>
<input type='text' name='desc_2'>
</form>
I want a new input field to be created, without the page having to reload and loose ev data entered in the form. Guessing this is something I should achieve through javascript or even jquery. I know how to edit an existing input field but I have no clue on how to create a new one and make it follow its numberrange. Anyone have an idea on how to apporoach this with a javascript function? Or should I invest in some time researching jquery for a smoother solution?
You can do
html
<button onclick="create();">Create Field</button><br><br>
<form id="frm">
<input type='text' name='desc_1' placeholder="Input Field 1"><br>
</form>
javascript
var count=1;
function create(){
//alert();
count++;
document.getElementById('frm').innerHTML+='<br/><input type="text" id="'+count+'" placeholder="Input Field'+count+'" /><br/>';
e.prventDefault();
}
FIDDLE
$("button").click(function(){
var count = $("input").length + 1;
$("form").prepend("<input type='text' value='desc_" + count + "' name='desc_" + count + "'><br>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button>add input</button>
<br>
<form action='blabla.php' method='post'>
<input type='text' name='desc_1'>
</form>
EXAMPLE
AJAX is your answer. It will let you update a website content without needing to refresh the page over and over again.
the salution your looking for is posible with XMLhttpRequest.
http://www.w3schools.com/xml/xml_http.asp
http://www.w3schools.com/dom/tryit.asp?filename=try_dom_xmlhttprequest_first
good luck
I did a new tab function if I click a submit button using java script. The problem is the location of the parent page, if I click submit button there's a new tab but if I insert a code of location changing it doesn't work . Please help me.
<script type="text/javascript">
$("form").submit(function() {
$("form").attr('target', '_blank');
return true;
});
</script>
<form action="test.php" method="POST" target="_blank">
<input type="submit" name="submit" value="Submit" onclick="document.location.href='home.php';"/>
</form>
Although I'm not really sure why you want to do this, it seems that mixing up the change of the document.location.href while the submit event is happening generates some kind of conflict.
In order to separate those two I came up with the following approach by postponing the setting of document.location.href using setTimeout. Here's a working DEMO.
HTML
<form action="test.php" method="POST" target="_blank">
<input type="button" id="submit-btn" value="Submit" />
</form>
JS
$('#submit-btn').on('click', function () {
setTimeout(function () { document.location.href = 'test.php'; }, 100);
$("form").attr('target', '_blank');
$("form").submit();
});
I would set the attributes like:
attr("action", "location.php");
Then edit the onclick like window.location.href
Don't know if this is what you wanted and if helped
I am trying to submit a form using javascript (generated from an xslt stylesheet).
<form name='myform' action='search.php' method='post'>
<input type='hidden' name='query' />
<script type='text/javascript'>
function submit(id)
{
document.myform.elements[0] = id; *Note* I have tried document.getElementById('query').value = id;
document.myform.submit();
}
</script>
</form>
After this code I have xsl translations formatting xml data. I call the submit function like this:
NOTE This href='' does nothing
submit('somequery')
When I click on the href the javascript function executes and seems to work fine, except NO data gets POST'ed. I set the value to 'somequery' but when the form gets POST'ed, the value is '' (blank).
Why does it do this? I have tried createElement('input') and such from within javascript but I cannot ever get the form to POST the input value.
Are you using Firefox here? The behaviour may differ between browser. Firstly, you should go back to using getElementById
document.getElementById('query').value = id;
The reason this may not have worked is that your hidden element does not actually specify an id attribute.
<input type='hidden' name='query' id='query' />
In IE, I believe it allows a lack of id and assumes it is equal to the name. In Firefox, a lack of id results in a javascript error when you try to do getElementById
<form name='myform' action='search.php' method='post'>
<input type='hidden' name='query' id='query' />
<script type='text/javascript'>
function submit(id)
{
document.getElementById('query').value = id;
document.myform.submit();
}
</script>
</form>