One button firing another buttons click event - javascript

I'd like two submit buttons on a form i have my team building, one above the fold, and one below. I'm getting complaints from my tech team about adding it because it requires some server side coding to make sure the user doesn't click it more than once. Apparently they have it one button, but to add that validation to two would be a problem.
Can you not just call the button the same thing, with the same ID and wouldn't the form treat it as one button?
Another option I thought would be for new button to fire a click even on the other button. Then they still have one click even for the form, but I get my two buttons. How would I write that?
Thanks,
Adma

I'm only familiar with ASP.net and C# buttons, but using C# you could wire two different buttons to the same click event handler. You could also do it client side by triggering the primary buttons click event with your secondary button. Here's a VERY simple example:
HTML
<input type="button" id="primaryButton" onclick="ExistingLogic()" />
<input type="button"
id="secondaryButton"
onclick="document.getElementById('primaryButton').click()" />

<input type="button" id="primaryButton" onclick="ExistingLogic()" />
<input type="button" id="secondaryButton"/>
$('#secondaryButton').click(function(){
$("#primaryButton").click();
})

If you want to use vanillaJS to do this... here is a generic very long way (with functions for both to be clear what is happening).
html
<input type="button" id="primaryButton" />
<input type="button" id="secondaryButton"/>
script
const primary = document.getElementById('primaryButton');
const secondary = document.getElementById('secondaryButton');
function somePrimaryAction(e){
e.preventDefault();
console.log('you clicked the primary button');
}
function someSecondaryFunction(e){
e.preventDefault();
console.log('you clicked the secondary button');
primary.click();
}
primary.addEventListener("click", somePrimaryAction, false);
secondary.addEventListener("click", someSecondaryFunction, false);

Yeezy
<button onclick="$('#button2').click()">button 1</button>
<button id="button2" onclick="doSomethingWhenClick()">button 2</button>
(((You need jQuery to run this)))

Related

How To Update Hidden Field In Django Form

I am trying to figure out the best approach to modifying a hidden django form field. Or if it's even possible. I had my HTML setup to accomplish this very task and it was working perfectly. However, in order to prevent multiple submissions I had to change my HTML and now I am unable to figure out how to pass a value via an HTML button depending on what the user clicks on.
Previously, I had two buttons defined as outline below:
<button type="submit" class="button1" name="status" value="Saved"><h3 class="txtalgn4">Save</h3></button>
<button type="submit" class="button2" name="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>
As stated above, this worked perfectly for the purpose of passing a value to an attribute for my model. The value of status was saved as expected depending on which button the user clicked on.
Now I have updated the buttons to type="button" in response to this issue that I opened up today...How To Prevent Double Submit With Form Validation
I tried using the following code:
<button type="button" class="button1" name="status" value="Saved"><h3 class="txtalgn4">Save</h3></button>
<button type="button" class="button2" name="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>
And then I also changed the status field to {{ status.as_hidden }} in my HTML to get the value. This only works if I hardcode the status value in my database structure. I need to be able to get this value dynamically depending on what the user clicks. Is JQuery with Ajax the right approach for this? Is there some simple way to modify the hidden field depending on which button the user clicks?
Is there some better way to go about trying to get this field in a hidden manner? As stated above the HTML way with type="submit" worked perfectly, but caused problems when I was trying to prevent the user from double submitting the form. As in all things programming I solved one problem and created another.
Thanks in advance for any thoughts.
Keep using two submit buttons like you were. But instead of disabling the buttons, you disable the whole form from submitting if once submitted.
First, give your form a unique html ID.
<form id="myform">
...
</form>
<!-- JS code -->
<script type="text/javascript">
$('#myform').on('submit', function(e) {
if ($(this).hasClass('submitted')) {
// prevent submission
e.preventDefault();
return;
}
$(this).addClass('submitted');
});
</script>

Insert javascript buttons inside form but not send form on Submit

hmm, i dont know how to explain this properly but i'll do my best.
I got a PHP form that has many fields. One of them is a textarea that i hold some php values in there. I wanted to install a beautifier to show the php values with a nice css style.
The whole thing works fine...but the beautifier has some javascript buttons that go with it to Toggle on/off styles in the textarea. Now this textarea is inside a form so when i click the buttons the form gets submitted. Although the buttons are only javascript changes...
The buttons are like this:
<p>
<button class="actions" onclick="settings.toggleEditor()">turn on/off CodePress</button>
<button class="actions" onclick="settings.toggleLineNumbers()">show/hide line numbers</button>
<button class="actions" onclick="settings.toggleAutoComplete()">turn on/off auto-complete</button>
<button class="actions" onclick="settings.toggleReadOnly()">turn on/off read only</button>
</p>
If i add the buttons outside the form, of course they work fine....but the end of the form tag is far and i have to scroll down to Toggle them.
My question: How can i add the buttons under my textarea but NOT execute the form when clicked ? Just let them do their thing to the textarea.
-Thanks
Use a button button instead of a submit button (which is the default).
<button type="button" ...>

Adding extra submit function to dynamically populated jquery .submit

Background
Okay, I have a unique web application, and after reading around on SO and some great other questions, I am still scratching my head as to how I can accomplish this feat. The end result: I must add a cancel button to a form which has populated input fields dynamically after a link click... It is a third stage function which is being activated, and must be able to be run solely within the context of the dynamic form (because there are other modal form windows on the same page)... please follow below for the flow. Any suggestions are much appreciative.
Steps Followed that end input form is affected by
1) User clicks on a link.
2) Modal window opens with dynamically populated fields
3) AJAX/JSON method pulls information through mysql
4) div's and spans populated inside modal window
5) Edit links are added for corresponding fields... Registers event handler to listen to user either clicking "edit", or closing modal window.
6) If user clicks edit, input fields appear, as well as a submit button.
7) on submit,
a) deactivate all other event handlers on other "edit" links
b) send ajax/json
c) activate all other event handlers
d) hide all input fields and 'reset' the modal window for next item edit
html
<form id="updation_station" action=''>
<div class="view_info">
Test 1:<span class="view_test_1"></span>
Edit
<span class="edit_test_1_input"><input type='text' name='test_1_input' /></span>
</div>
<div class="view_info">
test_2:<span class="view_test_2"></span>
Edit
<span class="edit_test_2_input"><input type='text' name='test_2_input' /></span>
</div>
<input type="submit" name="update" id="change_btn" value="Save Changes" />
<input type="submit" name="cancel" id="cancel_btn" value="Cancel" />
</form>
In order to accomplish what I needed, I run $('.edit_link').on('click', doUpdate); to execute the function of the updater... as follows
function doUpdate(e) {
// show input fields, sets variables, etc....
// Turn off the event handler for all the other edit links
$('.edit_link').not(this).off('click', doUpdate);
//Now open the listener for the submit form
$('#updater').submit(function() {
//Now close the editing fields
//closes edit fields, etc...
$.ajax({//do something });
//Now reset the event handlers so the links are re-activated regardless of what was clicked
$.ajax().always(function() {
$('.edit_link').on('click', doUpdate);
});
return false;
});
// hides input fields, etc.... and tells client to go on merry way
};
Unfortunately, I am extremely weary to change the $('#updater').submit(function() { action itself due to complications with some other omitted functionality... I would prefer to only append functions to it and/or touch the html portion, such as..if ($submitted_value == "cancel") { //cancel} else {//act}, but that seems to be an issue because any submit button itself will activate the form itself.
Anyone have any ideas? Snippets That may help?
Hopefully the experts of SO will be a better guide on how I can go about this...
Thank you in advance.
May not be best practice.. but might work
anonymous call
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(this).parent().hide()" />
anonymous if two elements deep
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(this).parent().parent().hide()" />
hide by div id or class
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(".formDiv").hide()" />

Onclick and submit for toggle button

<button type="submit" id="start-break" name="start" type="button" class="actv-btn-dft1 blbg" onClick="showhide('start-break', 'stop-break');return false;" title="Start Break">Start Break</button>
<button type="submit" id="stop-break" type="button" class="actv-btn-dft1 orbg" onClick="showhide('stop-break', 'start-break');return false;" style="display:none" title="Stop Break">Stop Break</button>
I am using something like a toggle button where click of start makes visible stop then on click of stop start button is visible.
I am using showhide('start-break', 'stop-break') JavaScript function as described below:
function showhide(hideid,showid)
{
document.getElementById(showid).style.display='block';
document.getElementById(hideid).style.display='none';
}
I want to know why I am not able to get the value of the start or stop in the controller.
-> If I remove that return false in the onclick I get it submitted but the UI gets disturbed (the button does not remain in the stop position when start is clicked).
The return false; is blocking the submit. When the form is submitted, the page will of course be refreshed with the response of the form submit request.
Just don't use JS to show/hide the buttons. Use the server side language for this (based on your profile and the edit history you're using "J2EE" and thus you're familiar with JSP):
<c:if test="${empty param.start}">
<button type="submit" name="start">Start</button>
</c:if>
<c:if test="${not empty param.start}">
<button type="submit" name="stop">Stop</button>
</c:if>
An alternative is to use Ajax to submit the form. But that's a completely different story.
Have you tried putting return false; at the end of the showHide() function as opposed to in the elements' onclick attribute? If I'm not mistaken, you're not supposed to have multiple javascript statements in one inline attribute.
If nothing happens, could it be that your function declaration is out of window scope? Your code works fine for me in http://jsfiddle.net/TZMkH/1/

HTML Button behaving badly

I added a button that is supposed to open a calendar 'date-picker'. The button is in a form that is rendered inside an EXTJS TabPanel. When the button is clicked, it causes the EXTJS tab panel to reload. Even if I remove everything but the following (making it a dumb button) the page still reloads.
<button id="calendar-trigger">...</button>
Edited: derived from: http://www.dynarch.com/projects/calendar/doc/
<input type="text" id="id_activity_date" name="activity_date">
<input type="button" value="..." id="calendar-trigger">
<script type="text/javascript">
new Calendar({
trigger : "calendar-trigger",
inputField : "id_activity_date",
onSelect : function() { this.hide() }
});
</script>
I don't want the reload to happen and I can't figure out why the reload is happening. or how to stop it. Something is getting triggered beyond just the button click. I suspect that EXTJS is causing it, but I can't figure out why.
I would like to start by killing all code that is triggered by this button. I want to make this a dumb button that doesn't do anything when clicked.
What is likely going on here? and How can I fix it?
Try this instead:
<input type="button" id="calendar-trigger" value="Button Label">
I've had trouble with <button> tags trying to submit forms and what not when they should not. Using an <input> tag with a type of "button" seemed to help me - maybe it will work for you as well.
If you have a <button> tag on a form which does not have a submit button (<input type="submit">), the <button> becomes the input button by default, apparently.
In HTML, <button> has a type attribute. The default value for type is submit, meaning that unless you specify type="button" (or something else), the button will trigger the submission of the form it is associated with. That is probably what is causing your page to reload (because the form is being submitted).
Alternatively, you could use <input type="button" id="calendar-trigger" />.
I would recommend using <input> as opposed to <button>
<input type="button" value="Click Me" id="calendar-trigger" />
Typically the <input type="submit" /> will make a submit button when in a form, I suspect that is what the <button> tag is doing.

Categories