I have a html form with a hidden field and 2 submit buttons. Based on what button in clicked ( trial or buy) I need to set the promo code field ( with "trial" as promo code for trial button and "buy "as promo code for buy button.
I am not sure how I could read what button is clicked in java script. I have a java script already in place that is copying email ID into another field on hitting submit. I'd like integrate the java script with existing one.
HTML code:
<form>Email:
<input type="text" name="email">
<br>
</label><input type ="hidden" name="retype-email">
<br>
<input type="hidden" name="PromoCode" value="" method="post">
<input class="Orange_button" type="submit" value="Start my free trial">
<input class="green_button" type="submit" value="Buy it now">
</form>
JS Fiddle: http://jsfiddle.net/x1bdgvyt/3/
It looks like the best solution is to manually track which button was clicked by subscribing to their "click" events.
Working Example here (jsFiddle)
HTML
<form>Email:
<input type="text" name="email">
<br>
</label><input type ="hidden" name="retype-email">
<br>
<input id="promo-code" type="hidden" name="PromoCode" value="" method="post">
<input class="Orange_button" type="submit" value="Start my free trial" data-code="trial"/>
<input class="green_button" type="submit" value="Buy it now" data-code="buy"/>
</form>
JavaScript
$('form').on('submit', function(e){
$('[name="retype-email"]').val($('[name="email"]').val());
var value = $("input[type=submit][clicked=true]").data("code");
$("#promo-code").val(value);
alert(value);
e.preventDefault()
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
Note that I added a data attribute to the submit buttons so that we can store the code that should be added.
source: jQuery: how to get which button was clicked upon form submission?
First, add 'data-type' (or whatever the name, most important is the prefix data-) to your inputs:
HTML
<input data-type="trial" class="Orange_button" type="submit" value="Start my free trial">
<input data-type="buy" class="green_button" type="submit" value="Buy it now">
Then, change a bit your javascript in order to grab the data-type value and populate your field with it:
Javascript
$('[type="submit"]').on('click', function(e) {
// populate your duplicated 'email' field
$('[name="retype-email"]').val($('[name="email"]').val());
// populate your 'code' field : grab the data-type attribute added in your HTML
$('[name="PromoCode"]').val($(this).data('type'));
// finally, submit the form
$('form').submit();
});
Quick warning: you should consider using IDs or classes instead of working with wide selectors like [attr], it could be an issue if you have more than one form in your page (and it's a better practice anyway)
Here is my solution:
$('#usuario_form').submit(function(e){
console.log($('#'+e.originalEvent.submitter.id));
e.preventDefault();
});
You can have access to OriginalEvent Submitter Id to identify wich button was clicked
Related
I've a problem with my form. I want to make standard PHP form but AngularJS is blocking the "Submit" button.
When I click the "Submit" button, it returns some errors in console. And remember I don't want to dynamically submit.
The error is:
An invalid form control with name='' is not focusable.
This example
<body ng-app="mainApp">
<form action="post.php" method="post">
<div ng-controller="MainCtrl">
<label for="titlex">Title</label>
<input id="titlex" class="form-control" type="text" maxlength="75" min="10" name="titlex" required>
</div>
<input type="submit" value="Send">
</form>
</body>
This issue pops up in different cases:
You have a hidden form element that has a required attribute for validation.
You hide an form element before send your data.
Some required form elements does not have a name attribute.
Your submit input does not have a name attribute.
You can try to add a name attribute to your submit input:
<input type="submit" value="Send" name="send">
or you can setup your form to be not validated by the browser mechanics by using
<form name="myform" novalidate>
Try adding name attribute in input tag.
Only form elements with a name attribute will have their values passed when submitting a form.
<input type="submit" value="Send" name="send">
Hope this solves your problem.
Post loading the URL: http://example.com/demo/website/wp-admin/post-new.php?post_type=product, i have a form. This form has
Text Box
Checkbox
Submit Button
What i need is, i need to browse the URL, and Enter a product name value "Product1" in the Text box and then put a "Check" in the Checkbox and then Click on submit button.
I need the same activity to repeat or apply to all the 4000 products at the same time.
Form looks like:
<form name="post" action="post.php" method="post" id="post" autocomplete="off">
<input type="text" name="post_title" size="30" value="" id="title" spellcheck="true" autocomplete="off">
<input value="8" type="checkbox" name="tax_input[product_cat][]" id="in-product_cat-8">
<input type="submit" name="publish" id="publish" class="button button-primary button-large" value="Publish">
</form>
Example:
1. After the url loads
2. Type "Product1" automatically in the Textbox
3. Put a check to the Checkbox
4. Click Submit
This example is for one single product, if i have to do the same for next 4000 products, i think i need a array solution to execute different input values to different products but all at same time. i am little confused to start with.
I have two forms in a JSP page, one contains a text field. I need to make sure that whenever the other form is submitted, it copies the value contained in that text field, and writes it's text value in an hidden parameter.
More clearly:
One form is named "search";
Another form is named "changeInitialForm";
The text field is contained in the "search" form, and it's name is "searchString";
The "changeInitialForm" has an hidden field, also this named "searchString";
The purpose is to make sure that whether the user submits one or another form, a "searchString" parameter is passed, with the value of the text field.
I tried to include an action in javascript, executed when the "changeInitialForm" is submitted, that reads the text field value and writes it into the hidden parameter:
function searchContacts(form)
{
var searchString= document.search.searchString.value;
form.searchString.value= searchString;
}
...
<form name="search" >
<input type="text" name="searchString">
<button name="search"> Cerca </button>
</form>
...
<form name="changeInitialForm" method="post" action="AddressBookView.jsp" onSubmit="searchContacts(this.form);">
<input type="hidden" name="selectedInitial"/>
<input type="hidden" name="status" value="view"/>
<input type="hidden" name="searchString" />
</form>
But after the "changeInitialForm" is submitted, regardless of the text field value, and empty parameter is passed, I am seeing this with firebug:
I would also appreciate an alternative solution, because I know what I am doing is tricky, but I don't find another method to do that. "search" and "changeInitialForm" cannot be joined in a single form, because they do very different things.
The following seems to work
function searchContacts(form)
{
var searchString= document.search.searchString.value;
form.searchString.value= searchString;
}
...
Form 1:
<form name="search" >
<input type="text" name="searchString">
<button name="search"> Cerca </button>
</form>
...
Form 2:
<form name="changeInitialForm" method="post" action="AddressBookView.jsp" onSubmit="searchContacts(this);">
<input type="hidden" name="selectedInitial"/>
<input type="hidden" name="status" value="view"/>
<input type="hidden" name="searchString" />
</form>
Notice that searchContacts(this.form) was replaced with searchContacts(this).
UPDATE after some precisions by the author of the question:
The onsubmit event is not triggered when form.submit() is called by some javascript code. Thus, what you need when you submit the form is to call searchContacts separately, for example using
searchContacts(document.changeInitialForm);
document.changeInitialForm.submit();
I have one form where there are 2 inputs those are submit type of inputs like this.
<form>
<input type="text" name="payee" value="">
<input type="text" name="amount" value="">
<input type="text" name="date" value="">
<input type="submit" name="deposit" value="Distribute">
<input type="submit" name="distribute" value="Deposit">
</form>
In jQuery like this:
$("form submit").click(function() {
// i wrote code.
}
If I click on the deposit button some action should occur. If I click on the distribute button some other action should occur.
First of all you need to change your submit inputs to buttons (or at least one of them) as 2 submit buttons in 1 form is invalid. Then give each button its' own Id.
<input type="button" name="deposit" value="Distribute" id="distribute">
<input type="button" name="distribute" value="Deposit" id="deposit">
Then, in jQuery you can then use the Id of each button to run specific code when it is clicked, like this:
$("#distribute").click(function() {
// code to run when distribute is clicked
}
$("#deposit").click(function() {
// code to run when deposit is clicked
}
insert another input type :
<input type="hidden" name="hf" id="hf" value="">
and
$("form :submit").click(function() {
if ($(this).attr('id')=='distribute') $("#hf").val('sent by distribute');
else $("#hf").val('sent by deposit');
}
and in the server you can see who send by reading the hiddenField value ( hf)
You can add a custom attribute on your buttons in document.ready function and on click of the button you can identify which button has posted an request to form.
Example to add custom attribute
<input type="submit" id="deposit" value="Distribute">
<input type="submit" id="distribute" value="Deposit">
$(function () {
$("#deposit").attr('isDeposit','1');
$("#distribute").attr('isDeposit','0');
});
and on submit click
$("form submit").click(function()
{
var identifyButton = $(this).attr('isDeposit');
}
some thing like this.
Try to use the jQuery submit() function, like this:
$('#deposit').submit(function(){
//Code to run
});
It's better because you can cancel the client event, if some field is wrong.
http://api.jquery.com/submit/
You don't need a plugin to do it, however there's a lot of them:
http://www.designyourway.net/blog/resources/55-jquery-form-plugins-to-download-and-use/
I have a form which I want to submit upon button click which is outside the form, here is my HTML :
<form id="checkin" name="checkin" id="checkin" action="#" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
Here is my jQuery :
$("button").live('click', function() {
$("#checkin").submit();
});
$("#checkin").live('submit', function() {
});
When I click submit button inside the form its submitting ok, but its not submitting when I click on the button which is outside the form tags, why? how can I fix this ?
You are selecting all the <button> elements but you are trying to select an <input>.
It works when it is inside the form because the the normal submit functionality runs.
Change the selector to match the element you actually have: input[type=submit]
Better yet, forget about the JS and just structure your HTML better so that the submit button is inside the form.
If you're handling the form processing using JavaScript, then you'll want to return false in your button and form processing code.
I was able to achieve identical results using the JavaScript below, and the two HTML examples (with the button inside and outside of the form element).
JavaScript/jQuery
$("button").live('click', function() {
$("#checkin").submit();
return false;
});
$("#checkin").live('submit', function(){
alert("Hello world!");
return false;
});
HTML Example 1
Button inside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
<button>test</button>
</form>
HTML Example 2
Button outside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
<button>test</button>
As I said, both examples performed as expected. You may want to double-check your button listening code to ensure that you are in fact using the button element. If you're using an element with the id attribute set to button, then you'll want to ensure you are using the proper jQuery selector:
$("#button").live('click', function() { // ...
you can have a simple hyperlink outside of your form like this
click to submit and that's all you need