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()" />
Related
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>
greeting developers. i am doing project for university related to Javascript. i create one page got button add and unfriend button which is disable.once user click add button the prompt box appear and after they click Ok for promp, the unfriend button will able to click while add button become disable. if click unfriend, add button will able to click. i don't know how explain it. may be read my question can be headache. sorry for that. my problem is button does not disable,if i never put inside form it work but since i put inside form doesnt work. guys is there any solution please help me
function myFunction(add){
var subject = prompt("Please enter Subject that want to study");
if (subject != null){
document.getElementById("subject").value = subject;
document.getElementById("btn").disabled=false;
document.getElementById("add").disabled=true;
document.getElementById("add").value="request sent";
}
}
function disableButton(btn){
document.getElementById("add").disabled=false;
document.getElementById("btn").disabled=true;
document.getElementById("add").value="Add friend";
form.submit();
}
<form method="post" id="form" enctype="multipart/form-data" autocomplete="off" >
<input type="submit" value="unfriend" id="btn" onClick="disableButton(btn)" disabled/>
<input type="hidden" id="subject" name="subject"/>
<input type="submit" value="add" id="add" onclick="myFunction(add)" /></form>
The "add" and "unfriend" buttons both submit a POST request which is refreshing the page since there is no form action specified. Perhaps you need to read up on HTTP methods. https://www.w3schools.com/tags/ref_httpmethods.asp is a good resource.
If your plan is to add a server side page to handle the request at a later time you can temporarily add the following to the form tag onsubmit="return false".
If you simply want to use the form inputs without submitting the form you should remove form.submit() from the disableButton function and change the types of the add and unfriend buttons from type="submit" to type="button". You can also remove the method and enctype of the form.
Personally I don’t really use forms unless its more than 3 fields.
Two things to think about:
You got the right written idea, you are however missing event.preventDefault(), which will make your website refresh itself, which will then force out everything to refresh.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
The other is that try between the both buttons as they are both i suggest one myfunction to be onclick in a button tag. just to avoid two inputs types.
Additional:
I suggest you add jquery to make things easier with the toggle function.
I have a button in the form in a page1.asp.
I am getting getting response from page2.asp after form submission.
It is take sometime for processing data in page2.asp.
User stays at page1 and clicking the button again and again.
so I want to have an "Loading window" while data processing and user could not click the Button again.
please help me to get this done.
Thanks in advance.
AGM Raja
You can use submit button's "onclick" event both to disable the button (so user won't be able to click it again) and to display "Loading..." message to the user.
At the very simplest you can display the message in the button itself, e.g.
<input type="submit" value="submit" onclick="this.disabled=true;this.value='Please wait...'" />
Demo: http://jsfiddle.net/t4f3T/
UPDATE
I don't know why it worked in my own tests, but Shadow Wizard pointed errors of my way: Form will not be submitted by disabled button, you have to add form.submit() yourself:
<input type="submit" value="submit" onclick="this.disabled=true;this.value='Please wait...';form.submit()" />
Demo 2: http://jsfiddle.net/t4f3T/2/
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)))
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.