CODEIGNITER
I want to submit two forms with one button. if a radio button is not checked i only submit the first form, but when i check the radio button appear more information (second form). I want to submit the 2 forms when the radio button is selected.
The problem is that it´s only submiting form 1 even when the radio button is checked.
<script>
submitForms = function(){
if(document.getElementById('tipo').checked) {
document.getElementById("form2").submit();
document.getElementById("form1").submit();
}else{
document.getElementById("form1").submit();
}
}
</script>
This is a native JavaScript solution:
<script>
document.addEventListener("DOMContentLoaded", function (event) {
document.getElementById("myButton").addEventListener("click", function () {
console.log(document.getElementById("form1").value);
if (document.getElementById("tipo").checked) {
console.log(document.getElementById("form2").value);
}
});
});
</script>
You might also take a look at javascript Submit multiple forms with one button
Related
I have the js below that "clicks" a button's action when executed (with a class of "wpc-button-1161") that I want to run when the submit button on gravity form is clicked. How to I do that?
$(function(){
window.location.href = $('.wpc-button-1161').attr('href');
});
Figured it out. Make sure the gravity form has ajax="true" in the short code and the js below. Example has two forms with buttons with classes of wpc-button-1161 and wpc-button-1168.
jQuery(document).ready(function($){
jQuery(document).on('gform_confirmation_loaded', function(event, formId){
if(formId == 1) {
window.location.href = $('.wpc-button-1161').attr('href');
} else if(formId == 2) {
window.location.href = $('.wpc-button-1168').attr('href');
}
});
})
Before I started using Vue I had a simple form that would update 1 value on 1 column # 1 request at a time. Now I am using Vue and my form has a new 'middle' button that is being used to build up an array of items to submit 1 request to update multiple columns dynamically.
Problem is now that prevent default is enabled, my original form submission no longer works and I need to either submit the request with Vue or is there a way to re-enable default action on a button? This would be great.
<form #submit.prevent="newbutton">
// new button
<button #click="newbutton"></button>
// original button
<button #click="submit" :id="{{ $element->id }}></button> // #submit.enableDefault ??
The prevent is just a helper method on the #submit. To allow this variance you will need to move the logic into your newbutton method
// in template remove prevent
<form #submit="newbutton" action="/where-this-should-post">
// in script move logic to your newbutton method
methods {
newbutton(event) {
if (formNotValid) {
event.preventDefault()
}
}
}
I have a form which allows the user to delete some data from a database.
I want to have a bit of confirmation to prevent accidental deletes. I want to do the following:
When submit is pressed, alert pops up with "Are you sure?"
If user hits "yes" then run the script
If user hits "no" then don't submit the script.
How can this be done?
I have added the onSubmit alert but it does not show anything, and it still submits the form. How can I delay the submission of the form to only occur when the user selects "yes" from the alert?
<form
method="POST"
action="actions/remove-daily-recipient.php"
onSubmit="alert('Are you sure you wish to delete?');"
>
...
</form>
Instead of alert, you have to use confirm and return in your form, for an example:
<form
method="post"
onSubmit="return confirm('Are you sure you wish to delete?');">
...
</form>
on your form can you try with a js function like:
<form onsubmit="return submitResult();">
and on your function have something like?
function submitResult() {
if ( confirm("Are you sure you wish to delete?") == false ) {
return false ;
} else {
return true ;
}
}
I think this will be a good start.
Stop the default behaviour, ask for confirmation and then submit the form:
var form1 = document.getElementById('form1');
form1.onsubmit = function(e){
var form = this;
e.preventDefault();
if(confirm("Are you sure you wish to delete?"))
form.submit();
}
JS Fiddle: http://jsfiddle.net/dq50e963/
Heres my scenario: I have an index page with 2 radio buttons on it and a span area for results. When one of the radio buttons are clicked, the span fills up with an ajax generated page that has an input box as so :
<input size='25' class='datepicker' value='Click to enter deposit date' READONLY type='text' id='depositDate' name='depositDate'>
At the bottom of this page there is an 'Add Record' button which fires off javascript validation. The validation is so:
var inpDepDate = $.trim($("#depositDate").val());
if(inpPayDate=='Click to enter pay date') // Validate pay date
{
alert('Invalid pay date; re-enter');
document.getElementById('payDate').focus();
document.getElementById('payDate').select();
return false;
}
Also in my javascript file is :
$(function(){
$( "#depositDate" ).live('focus', function() {
$(this).datepicker({
changeMonth: true,
changeYear: true,
minDate: "+1D",
showOtherMonths: true,
selectOtherMonths: true}).focus();
});
});
The problem is when the validation fails, the text does get highlighted and selected but it does not open automatically.
Ive tried a number of things, actually a ton of things from this site, and no luck. And it seems to never recognize the live event. But if I click on the text box after its failed the validation (and the text is highlighted), the calendar opens just fine. Im fairly new at jQuery and ui.
You don't need to reinstantiate the datepicker if you've already called it on #depositDate in the past. (Or on payDate)
Try this:
if(inpPayDate=='Click to enter pay date') // Validate pay date
{
alert('Invalid pay date; re-enter');
$("#payDate").datepicker("show");
return false;
}
I'm trying to call a function after any form with the class shown below is submitted. However, this doesn't seem to be working for me (the form submits, but the submit button remains active and the loading image is not shown).
$(document).ready(function() {
$('.uniForm').submit(function() {
$('#loadingImage').show();
$(':submit',this).attr('disabled','disabled');
return true;
});
});
Here's some HTML:
<form class="uniForm" id="formABC">
//...form.... here
</form>
<img src="loadimage.gif" style="display: none;" id="loadingImage">
does anyone see anything inherently wrong with this that would be preventing things from working correctly?
I have a feeling it's just not being called correctly. Can I call it myself via some HTML like this?
<button type="button" class="primaryAction" alt="Submit Form" onclick="$('#formABC').submit();">Submit Form</button>
Following your comment, it seems the binding of the handler function to the submit event might be taking place before the form element has been loaded into the DOM.
Ideally, you should bind event handlers only after the DOM has finished loading.
For example:
$(document).ready(function() {
$('.uniForm').submit(function() {
...
});
});
Put an id on the submit input/button and try this:
$('#mySubmitButton').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).attr('disabled','disabled');
$('#loadingImage').show(function() {
$(this.form).submit();
});
});
There is a jQuery plugin named jQuery Form Plugin which helps to submit your form from ajax without refresh and then you can do the rest of actions on its success (which occurs exactly after successful form submission):
jQuery(document).ready(function () {
jQuery('#my_submit_button').click(function (e) {
jQuery(this.form).ajaxSubmit({
target: false,
success: function ()
{
your_other_stuff();
},
});
});
});
function your_other_stuff(){
// rest of things
}
Try something else:
$('.uniForm input[type=submit]').click(function(){
$('.uniForm').submit();
//doStuffafterSubmit
});