I have two input buttons on my page.
The first one is a hidden input that passes value from php code to the other visible input.
The second buttton is a visible submit button that gets value from the hidden button in order for it to process correctly.
I am trying to submit the hidden button. When the visible button is clicked, it submits the hidden button. Before that, the other button gets a value and passes it to the visible one. Here are the two submit buttons:
<input type="hidden" name="cart" id="cart" value="<? php echo $Product ?> ">
<input type="submit" name="cart1" id="add to cart" value="1">
think this is what what you are trying do
$('input[name="cart1"]').click(function(e){
e.preventDefault();
hidden_input= $('input[name="cart"]').val()
$(this).val(hidden_input)
// then you can consider sending your form data via ajax
// ensure the inputs are wrapped within a <form> tag like
luo said
data = $(this).parents('form').serialize()
$.ajax({
type: 'post',
data: formdata,
....}) // ajaxx here
})
Related
I happen to have the following form:
<form method="post" action=<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?> enctype="multipart/form-data">
<button type="submit" name="identifier" value="wikipedea_form">
Add Post
</button>
</form>
I use jquery to submit this form as
$("form").submit();
This doesn't send the post data $_POST["identifier"]. I assume jQuery uses HTMLFormElement.submit() under the hood. The MDN docs say that:
<input> with attribute type="submit" will not be submitted with the form when using HTMLFormElement.submit()...
I think the same applies to the button tag as well. Just to be 100% sure I am asking here. May be it depends on the browser etc etc...
So, Would <button> with attribute type="submit" not be submitted with the form when using HTMLFormElement.submit()? Please quote official documentation to back up your answer.
Only successful controls are submitted in normal form submission.
Submit buttons are only successful if they are used to submit the form (or if the form is submitted via Enter in a single text input in which case the default submit button is successful). This lets you distinguish which button was used to submit the form in cases such as:
<button name="action" value="like">Like</button>
<button name="action" value="dislike">Dislike</button>
Trigging form submission with JS bypasses the selection of a submit button.
For each element field in controls, in tree order:
If any of the following is true:
The field element has a datalist element ancestor.
The field element is disabled.
The field element is a button but it is not submitter.
The field element is an input element whose type attribute is in the Checkbox state and whose checkedness is false.
The field element is an input element whose type attribute is in the Radio Button state and whose checkedness is false.
Then continue.
— https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constructing-the-form-data-set
If you want to submit data with a form every time it is submitted, regardless of how it was submitted: Use <input type="hidden" ...>
I have three inputs in the following form. Two inputs type is text and another one input type is hidden. Now when I click the submit button then two input values need to set the hidden input before run the ajax query. Because, ajax will get the data from the hidden input only. I have tried it myself but, it's not working for me. Now, when I click the submit ajax working first then set the both values to hidden input.
<form>
<input type="text" class="date" value="2018-11-09">
<input type="text" class="time" value="15:00:00">
<input type="hidden" class="date-time" value="">
<button type="button" class="button">Submit</button>
</form>
For the following code I am assuming that the 'Submit' button has its type changed to 'submit' as this will give you more control of when the form is submitted:
$('form').submit(function(event) {
event.preventDefault(); // stop the form from automatically submitting
$('.date-time').val($('.date').val() + $('.time').val());
console.log($('input[type=hidden').val());
// call your ajax here
});
The important line here for your question is:
$('.date-time').val($('.date').val() + $('.time').val());
This sets the value of the input .date-time to the input of .date and .time, although I would recommend using ids instead of classes as they are unique
I have two forms on my page, one for username and password and one for a special verification pin. On my FIRST form I have the action set to return false, otherwise the page will refresh and will stop my hidden div from showing up with the second form which is a hidden div. I have a sign in button, which unhides the hidden div on click, and a submit button, which a user presses after their pin is entered. The problem I am having is that I want the final submit button to submit both forms. Is this possible?
This is what my sign in page looks like and when it is submitted it shows the hidden div which has another form that the user enters their pin. I would like the final submit button to process all 3 inputs.
This is the form that I have for the username and password, it is returning false so that it doesn't refresh the page
<form action="" method="POST" id="hello" onsubmit="return false;">
and the button that actually sign's in is here
<input class="btn_green_white_innerfade btn_medium" type="submit"
name="submit" id="userLogin" value="Sign in" width="104" height="25"
border="0" tabindex="5" onclick="showDiv()">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName"> username</label><br>
<input class="textField" type="text" name="username"
id="userAccountName" maxlength="64" tabindex="1" value=""><br> <br>
<label for="userPassword">Password</label><br>
<input class="textField" type="password" name="password"
id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left;
display: none;">It seems that you may be having trouble entering your
password. We will now show your password in plain text (login is still
secure).</div>
This is my second form
<form name="search-form" //this is the form that submits the final pin
id="search-form"
action="#"
class="form-search"
method="POST"
onsubmit="submitForms();">
This is the function I am using onsubmit
function() submitForms{
document.getElementById("search-form").submit();
document.getElementById("hello").submit();
document.getElementById("hello").action = "/loginaction.php";
}
Loginaction.php is the script that I have and I want it to process all 3 inputs, username, password, and the special verification PIN.
My overall question is can i use the final submit button to process all 3 inputs through the script and if so how would i go about doing it?
UPDATE
I now have only one form, however with two buttons in, one submit and one that shows the hidden div, but the forms are not seeming to be submitted.
This is the current form I have - The first button I need to have it just show the hidden div, which it is doing, however the submit button which I want to have submit the username, password AND pin, does not seem to be working, what should I add to my form?
<!DOCTYPE html>
<html>
<head>
<form>
<input class="btn_green_white_innerfade btn_medium" type="button" name="submit" id="userLogin" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv();">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName">username</label><br>
<input class="textField" type="text" name="username" id="userAccountName" maxlength="64" tabindex="1" value=""><br> <br>
<label for="userPassword">Password</label><br>
<input class="textField" type="password" name="password" id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left; display: none;">It seems that you may be having trouble entering your password. We will now show your password in plain text (login is still secure).</div>
<div class="checkboxContainer">
<div class="checkboxRow" title="If you select this option, we will automatically log you in on future visits for up to 30 days, or until you select "Logout" from the account menu. This feature is only available to PIN Guard enabled accounts.">
<input class="" type="checkbox" name="remember_login" id="remember_login" tabindex="4"><label for="remember_login">Remember me on this computer</label><br>
</div>
</div>
</div>
<div class="modal_buttons" id="login_twofactorauth_buttonsets">
<div class="auth_buttonset" id="login_twofactorauth_buttonset_entercode" style="">
<button type="submit" class="auth_button leftbtn" data-modalstate="submit" onsubmit="submitForms();">
<div class="auth_button_h3">submit</div>
<div class="auth_button_h5">my authenticator code</div></button></div></div>
</form>
</head>
You are taking the wrong approach here.
You should only be using submit buttons and the submit event when you are going to actually submit data somewhere.
You only need one form and one submit button.
Your first button should just be a regular button that shows the remainder of the form. Then, there's no event to cancel. Your second button then submits the form.
Also, you should not be using inline HTML event attributes (onsubmit, etc.), here's why and you should move away from inline styles and set up CSS style rules.
Instead, when the user clicks the login button, submit an Ajax request to the server to check the credentials:
// this is the id of the form
$("#loginForm").submit(function(e) {
var url = "path/to/your/login.php"; // The script to check credentials
$.ajax({
type: "POST",
url: url,
data: $("#loginForm").serialize(), // serializes the form's elements.
success: function(data)
{
// use data and process the response from the php script.
// include a property in data to indicate if the validation passed. For example:
if(!data.valid){
//Show the hidden PIN div
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
Do a similar thing with the PIN validation:
// this is the id of the form
$("#pinForm").submit(function(e) {
var url = "path/to/your/pin.php"; // The script to check credentials
$.ajax({
type: "POST",
url: url,
data: $("#pinForm").serialize(), // serializes the form's elements.
success: function(data)
{
// use data and process the response from the php script.
// include a property in data to indicate if the validation passed. For example:
if(!data.valid){
//WRONG PIN
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
Hi what you can do is get a button submit and send all the info.
Example:
- form 1 and form 2 fields have diff id so you get that ids to a var or data and send it. This way you can submit the forms you want and validate, but there can only be only 1 submit final btw.
You get all the data to var, ex:
$('#btnName').click(function() {
var form1 data = ...
var form2 data = ...
now if you set it a array, var, object, etc you can get the total data from the 2.
});
I hope this helps you
Ok so you wanna send for example 2 forms, you can just have 1 php which gonna receive.
<?php
$form1_id = $_POST['id'];
$form2_id = $_POST['id2'];
?>
Ok so you have 2 input which gonna have the name of id and id2 (separated forms)
Now you gotta go on your html and add those 2 forms:
<form id='form1' action='#'>
<input type="text" name="id" id="id"></input>
</form>
<form id='form2' action='#'>
<input type="text" name="id2" id="id2"></input>
</form>
<button id="yo"> Submit </button>
This was just an example i'm making on the phone.
After you have html and php or whatever you wanna do, this is just an example
you go at ur js script:
$('#yo').click(function(){
//btw just get the values now
var id_form1 = document.getElementById(etc)
var id_form2 = ...
//now check whatever and use HttpRequest
//to send it
});
I hope it has helped you beter
i have input text field where user can provide some details and on change of text field, ajax function is called to save a data. when user writes something in text field and click on submit button, it calls the ajax function but form is not submitted at the same time. it gets submitted after second click.
i want if user provides some inputs and click on form submit, ajax should get triggered first and after that form should get submitted without need of one more click.below is sample code:
<form:form name ="samplename" action="submitAction">
<form:textarea id="testID" onchange="ajaxmehtod()"></form:textarea>
<input type="button" value="submit">
</form:form>
You could create a regular button with an "onclick" method (e.g. submitForm()), instead of the input type button submit. Also remove the "onchange" method on the textarea.
Then when clicking on the button, check in javascript if the textarea contains any data, then execute the ajaxmethod() and when the ajax is ready, trigger the form submit using $('#samplename').submit();
<form id="sampleName" name ="sampleName" action="">
<textarea id="testID" name="textAreaName"></textarea>
</form>
<button onclick="submitForm()"></button>
In javascript:
function submitForm(){
//Check textarea contains data
....
// Execute ajax method
ajaxMethod();
// If ajax method is done, submit form
$('#sampleName').submit();
}
Something like that?
You can also prevent the default submit action, more info : https://api.jquery.com/submit/
Try input type submit instead of button
<form id="sampleName" name ="sampleName" action="" onsubmit="ajaxmehtod()">
<textarea id="testID" name="textAreaName"></textarea>
<input type="submit" value="submit">
</form>
this will submit your form onsubmit and it u need it onblur of textarea u can add
<textarea id="testID" name="textAreaName" onblur="somefunction()"></textarea>
I have the following HTML form, which allows a user to optionally save a custom label for their product.
<form action="http://domain.com/members/systems" method="post" class="mod-SystemLabel-EditForm">
<label class="mod-SystemLabel-EditLabel" for="label-623">Customer label</label>
<input type="text" value="sdff sdf sd" name="fields[customer-label]" class="mod-SystemLabel-EditInput" id="label-623">
Clear
Cancel
<input type="submit" value="Save" name="action[system-edit-label]">
<input type="hidden" value="623" name="id">
</form>
If I manually clear my text input and submit my form, Symphony CMS records the empty value as expected.
If I use jQuery to trigger the form submission as below, Symphony CMS leaves (or re-saves?) the current value as it was.
$('.mod-SystemLabel-OtherButton-clear').click(function(e) {
e.preventDefault();
$(this).siblings('.mod-SystemLabel-EditInput').val('');
//alert($(this).closest('form').serialize());
$(this).closest('form').submit();
});
If I uncomment the commented line, the alert contains:
fields%5Bcustomer-label%5D=&id=623
This serialization is the same as what is produced when I backspace the input myself, so it looks like the actual form submission should be the same as a manual input clearing and click of the submit button.
The Symphony field is not set to be required and does not have any validation rules.
Why is the end result different and how can I get the empty value to be saved, overwriting the previous product label?
The form’s submit input’s name is not passed when the form is submitted via JavaScript, and Symphony CMS uses this to trigger the appropriate event.
To get the event name passed along with the submit input, trigger a “click”.
$('.mod-SystemLabel-OtherButton-clear').click(function(e) {
e.preventDefault();
$(this).siblings('.mod-SystemLabel-EditInput').val('');
$(this).siblings('input[type=submit]').trigger('click');
});