How to check which <button> was clicked? - javascript

I am using <button> instead of <input> because I need to contain an image in the buttons. This makes the form submit behavior different. How do I check which button the user clicked? There is no post data returned.
Example:
<button onclick="this.form.submit()" value="Done" name="Done"><img src='...'></button>
<button onclick="this.form.submit()" value="Save" name="DSave"><img src='...'></button>

Get rid of the onclick attributes. Let the button's natural submit feature submit the form instead of using JS. This will make the clicked button a successful control and it's name/value will appear in the submitted data.

Use a hidden input to carry the value, if POST isn't working

you can also use <submit> and that field name will be sent with the value Done or Save...

Use <input type="submit"> and just style them with css. In this way you can assign values to input.

Related

Cant submit my button with form

I am trying to submit my button with a form. Im not trying to make my button submit the form. I want to be able to see my button value in the POST variable after the form submits. From my understanding all I need is to give my element a name and value. I should be able to see all the form variables once my form is submitted.
<input name='MC[]' type='text' size='51' placeholder='Enter In Question'>
<br/>
<input name='MC[]' type='button' value='Incorrect'>
<input name='MC[]' id='Options' size='40' placeholder='Enter In Option A'>
I'm new to this site not sure if I'm providing enough information but I simply want to submit this button inside a form and to be able to add the value of my button to a file. For some reason I cant see the button once the form is submitted. Are type button not sent to POST when submitted?
Note, I am able to see my other input elements. The type button one is the only one I cant see.
You can use Javascript that fills in the value of a hidden input from the value of the button that was clicked.
HTML:
<input type="hidden" name="answer" id="answer">
JS:
document.querySelectorAll("input[name='MC[]']").forEach(function(el) {
el.addEventListener("click", function() {
document.getElementById("answer").value = el.value;
}
}
Then you'll be able to get the button's value in $_POST['answer'].
That's not how buttons work... they perform an action, they don't get included in the post data. What you need is a checkbox, or a disabled input perhaps?

HTML form - POST or GET depending on button clicked

Let there be a search form with quite many of the input fields. The user may either click:
[Search] and GET the list of the results,
[Save search criteria] for future use and POST the form content to be stored on server (I'm not interested in storing locally in cookies or so).
How do I achieve that? I've only found solutions to make two types of POST request on two separate buttons.
Maybe a JavaScript onclick function to set <form method="??"> right before its submitted? Would that work?
In HTML5, the <input> element got some new attributes
<input type="submit" formmethod="post" formaction="save.php" value="Save" />
<input type="submit" formmethod="get" formaction="search.php" value="Search" />
The same attributes are valid for <button>
Yes you can change form method before submit form using jquery
<form method="POST" id="myForm">
<button onclick="changeMethod()">submit</button>
</form>
Function changeMethod in jquery
function changeMethod(){
$("#myForm").attr("method", "get");
}

knockout "submit" interferring with Razor #html.beginform submit

I have a form that includes some Knockout code, but the form is being submitted too early. I have the following
<form data-bind="submit:addItem">
Add illness: <input type="text" data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
</form>
The button is interfering with my Razor form, I assume that because it is of type="submit", so when I click this button unfortunately the form is being submitted, when all I want to use this button for is to call a Knockout function.
So I guess one way to solve the problem is to not use the code above, but I don't know what the alternative would be. Hopefully I don't need to put type="submit" right there, because I need to save that functionality for when I submit my final form much much later
Try this:
<form data-bind="submit:addItem.bind($data)">
I use the .bind in all my click events as it stops the click events being fired on applying of bindings and also allows you to pass extra parameters.

input type disabled and readonly behave differently with a href

I have below code where i disable and enable a calendar clickable icon.
<p>
<label>
<input type="text" name="date18" id="date18" value="01/01/2012"
style="width:75px;" disabled/>
</label>
<a href="#" onclick="somecaledarrelatedstuff()" name="calid" id="calid">
<img src="icon-Calendar.jpg" alt="Click to pick a date from a popup
calendar"/>
</a>
</p>
When I add disable as above both the input field and the link to the calendar popup are disabled as well. But because the values of disabled elements are not submitted, I thought of making it read-only. However, the problem is that when it's read-only, only the input field is getting read only (not also the calendar pop up link) too, like using disable.
I know if I want to disable (just to prevent the user from editing) both input field and href I can use disabled and have a hidden input variable, and submit it and refer to that variable. But I was looking for an alternative way because I will have a lot of refactoring to do to my code if I introduce a new hidden variable.
Thanks.
If you want the input field to be disabled but still send its value upon submission of the form, you can use bit of JavaScript for that.
To achieve this, first add this bit to the <form> tag:
<form ... onsubmit="EnableInputs(this);">
Then add this JS function:
function EnableInputs(oForm) {
oForm.elements["calid"].disabled = false;
}
You can enable more elements like this, or all inputs using getElementsByTagName and looping over it.
This will just enable the element when submitting thus send its value.
Disabled does not submit values, but read-only does submit values.

Know the name of the form in JavaScript

I have a button called "Next" that exists in a couple of asp.net pages. Actually it is in a User Control. When "Next" is clicked it calls a function CheckServicesAndStates in JavaScript. I want to know the page that has initiated this "Next" button click.
Can anyone tell me how is this possible?
Add a hidden field to the form then check for the existence of it:
<input type="hidden" name="sender" value="page-name" />
In a <button> event handler this.form.name is the name of the containing form.
<form name=foo>
<button type=button onclick="alert(this.form.name)">
</form>
alerts "foo" when clicked.
window.location.href
contains the current url.

Categories

Resources