I have a small snippet and can't understand why it doesn't work (Form submitted everytime in Chrome) ?
<script type="text/javascript">
function checkForm(e) {
alert('Test');
e.preventDefault();
}
</script>
<form id="cart" method="post" name="cart" onsubmit="return checkForm(event);">
<input type="hidden" name="qty" value="1">
<input type="hidden" name="id" value="1">
<button type="submit">Submit</button>
</form>
P.S (IMPORTANT) - This code loaded dynamically via Ajax and injected into div container!
Related
I've created a page that helps with printing packing slips. It will divide up the packing slips by country. So for example we will end up with two different forms, one for US, one for CA.
<form id="US" class="packingSlipForm" action="magical_url" method="post" target="_blank">
<input id="id_US" name="country" value="US" type="hidden" class="accountLocalID">
<input name="orders[0]" value="552269" type="hidden" class="orderFormItem">
<input name="orders[1]" value="552273" type="hidden" class="orderFormItem">
<input name="orders[2]" value="552276" type="hidden" class="orderFormItem">
<input name="orders[3]" value="537048" type="hidden" class="orderFormItem">
<input name="orders[4]" value="541181" type="hidden" class="orderFormItem">
</form>
<form id="CA" class="packingSlipForm" action="magical_url" method="post" target="_blank">
<input id="id_CA" name="country" value="CA" type="hidden" class="accountLocalID">
<input name="orders[0]" value="553351" type="hidden" class="orderFormItem">
</form>
and this is my script to submit the forms.
<script type="text/javascript">
function printPackingSlips() {
$(".packingSlipForm").each(function () {
this.submit();
});
}
</script>
I'd like it to open two different tabs with the data from each form submit. But instead it opens one tab and only shows data from whatever form was submitted last.
Any ideas on how to make each form open it's own tab?
I currently have a code, that is loaded dynamicly, so I can not tweak it much.
But now I want to trigger the submit when clicking the entire <form>.
How can I achive that?
My current code:
<form action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<input type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
Okay man, i will answer this, but on the next time you need to post your javascript code.
This is your markup:
<!-- add a id here -->
<form id="form" action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<!-- add a id here -->
<input id="submit" type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
With your markup set now is time for the JS:
<script type="text/javascript">
//call a anonymous function
$(document).ready(function(){
//Event On click of the form
$('#form').click(function(){
$('#submit').trigger('click');
})
})
</script>
Obs: submit the form on click in his body dont makes sense to me, please explain this.
Edit:
You can learn basic JS and JQuery on www.codecademy.com
I will go directly to the problem
So here is my form
<form action="<?php echo base_url()?>" method="post" id="formfield">
<center>
<label>How much? <small>( Minimum of 100 )</small></label>
<div class="ui input">
<input type="number" name="amount" required>
</div>
<br>
<label>Payment type <small>( see all )</small></label>
<br>
<div class="ui input">
<input type="text" name="type" required>
</div>
<br>
<div class="">
<input type="submit" class="btn btn-primary" value="Order Now" id="btnsubmit" >
</div>
</center>
</form>
And here is my Javascript, newbie here.
<script>
$(function()
{
$('#btnsubmit').on('click',function()
{
$(this).val('Please wait ...')
.attr('disabled','disabled');
$('#formfield').submit();
});
});
</script>
So the problem is that the form submit without triggering the html5 validation
I also wanted to add alert if Ok proceed but should trigger the html5 validation
Can anyone help me? I will really appreciate it. Advance thank you.
The form is submitting without triggering the HTML5 validation because you're submitting the form in your JavaScript when you call: $('#formfield').submit();
To add a confirmation dialog, you could use something as simple as confirm, though confirm is not always the best idea. You could add something like this to your event listener:
if (confirm('Are you sure?')) {
// Yes
$(this).val('Please wait ...').attr('disabled','disabled');
} else {
// Prevent form from being submitted
return false;
}
Snippet (doesn't exactly work, because stacksnippets.net doesn't allow forms to be submitted, but check your console)
function go() {
if (confirm('are you sure?'))
// Form would be submitted, but stacksnippets prevents it.
document.querySelector('form').submit();
else
return false;
}
<form action="">
<input type="text" required>
<button onclick="go()">
Submit
</button>
</form>
May be this will help you;
$(document).ready(function() {
$('#formfield').on('submit', function(e) {
$("#btnsubmit").val('Please wait ...')
.attr('disabled', 'disabled');
});
});
<form action="<?php echo base_url()?>" method="post" id="formfield">
<center>
<label>How much? <small>( Minimum of 100 )</small>
</label>
<div class="ui input">
<input type="number" name="amount" required>
</div>
<br>
<label>Payment type <small>( see all )</small>
</label>
<br>
<div class="ui input">
<input type="text" name="type" required>
</div>
<br>
<div class="">
<input type="submit" class="btn btn-primary" value="Order Now" id="btnsubmit">
</div>
</center>
</form>
I need to submit form by button which is out of scope of the form by JavaSript.
<form>
<input name="data" type="text">
<input type="submit" name="send" id="send-button" style="display: none">
</form>
<button onclick="$('#send-button').click() || .submit()"></button>
The button #send-button is visible and I need to send whole form to server. It means I receive $data and $send (both).
Now I am getting just the $data.
Any idea?
You can do with javascript form method
<button onclick="document.forms[0].submit()"></button>
if you have multiple forms in the document then set id to the form
<form id="form1">
<input name="data" type="text">
<input type="submit" name="send" id="send-button" style="display: none">
</form>
<button onclick="document.getElementById("form1").submit()"></button>
Give the form a name:
<form name="myform">
Submit
</form>
Submit form function:
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
Invoke submission:
document.forms["myform"].submit();
you should add value attribute on submit button like that
<input type="submit" name="send" value="xyz" id="send-button" style="display: none">
i think you will received both values
I have multiple forms as below. The page is dynamic, I cannot say how many forms will be presented inside.
<form name="f1" action="submit.php" method=POST>
<input type="hidden" name="approve1" value="93545" />
<input type="submit" value="Submit/>
</form>
<form name="f2" action="submit.php" method=POST>
<input type="hidden" name="approve2" value="93545" />
<input type="submit" value="Submit/>
</form>
.....
<input type="button" value="Submit All"/>
When i click "Submit All" the values of all the forms - approve1, approve2, in the example - should be submitted in the page.
Any help with Jquery or Javascript is appreciated!
To submit all the inputs at once, you'll have to create a new <form>.
This can be done dynamically using jQuery:
$(function() {
$("#submitAll").click(function(ev) {
ev.preventDefault();
var newForm = $("<form action='/echo/html/' method='POST'></form>");
$("form input[type='hidden']").each(function(i, e) {
newForm.append(
$("<input type='hidden' />")
.attr("name", e.name)
.attr("value", e.value)
);
});
$(document.body).append(newForm);
newForm.submit();
});
});
Here's a jsFiddle
However, I'd recommend a different approach. Your submit buttons can carry all the information you need in a single form.
<form name="f1" action="submit.php" method="POST">
<button type="submit" name="approve" value="93545">
Approve 1
</button>
<button type="submit" name="approve" value="12345">
Approve 2
</button>
<button type="submit" name="approve" value="93545,12345">
Approve All
</button>
</form>