We Keep Coding

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>

How to select a hidden submit button

If a website that has a property to hide a form, how could I be able to press submit? This form has a hidden submit button, but if certain parameters are not correct, it automatically hides this form.
I can see it for a split second until it goes white. I tried firefox inspect element, and it's there, but is there a way to press submit while hidden? I tried pressing tab and hopefully selecting it, but it won't do it.
I'm sure there is a way to basically "push" the submit button while hidden.
Thanks

In jQuery that would be
$("name_of_form).submit();
In vanilla Javascript it should be
document.getElementById(id).submit();
or
document.forms.form_name.submit();
Of course, to retrieve the name you'd open up the browser's dev tool, there's usually an arrow you can click to find the element on the page, or just read the html and find it, and then you'll know the name of the form. This is also where you'll run the command.
Here's an example:
<form action="/weather/searchauto" method="POST" id="latlongForm">
<input id="lat" name="lat" type="hidden" value="">
<input id="long" name="long" type="hidden" value="">
</form>
So in this case the name is "latlongForm", so you can type in the console:
document.forms.latlongForm.submit()
See if that works!

Submit HTML form and get radio button value without javascript or jquery

I am trying to implement Net Promoter Score survey through email body. As email clients don't allow Javascript. I want to submit the radio button value to a url that is defined in Form Action attribute.
But my question is how to know which radio button is checked, and how to submit it to a remote url ? and in which form will it be submitted ? i.e name value pair or how ?
Note: I know how Jquery and Ajax. I want to achieve same things without using Ajax or Jquery or Javascript

A standard HTML form submission should handle this fine
Make sure your radio buttons all have the same name attribute, and give them all a different value attribute
Include an input with type="submit" and the resulting form submission should have NameOfAllRadioButtons = ValueOfSelectedRadioButton
I don't think I've ever been sent an email with form inputs in the body, which probably means there are a lot of clients that don't support them at all. You might be better off sending a link to take the survey in an actual web page.

According to this article: https://www.sitepoint.com/forms-in-email/ you should be able to use a standard html form in an email. Outlook will display the form messed up though.
To get radio value, just do this:
<form action="/yoururl.php" method="get">
<input type="radio" name="question" value="answer1" checked> answer1<br>
<input type="radio" name="question" value="answer2"> answer2<br>
<input type="submit">
</form>
In your backend code, you will be able to do $_GET["question"] to get either answer1 or answer2.
On submit user will be redirected to another page and most client will probably ask for confirmation before redirecting.

jQuery submits only one form when multiple forms are submitted

I am writing a chrome extension. In my content script I am injecting two forms into the DOM with target = "_blank". The forms are visible on the page
Form 1
<form action="page1.php" target="_blank" id="form1" method="POST">
<input type="submit" value="Save" id="savebutton1">
</form>
Form 2
<form action="page2.php" target="_blank" id="form2" method="POST">
<input type="submit" value="Save" id="savebutton2">
</form>
I want to submit the two forms using jQuery so I wrote ;
$( "#form1" ).submit();
$( "#form2" ).submit();
But finally only one tab opens, that is only the last form submits and my first form is ignored. But I want to open two tabs
I can not only see page2.php in one tab. My page1.php is never called. Please help in fixing the issue

This is not possible.
The browser can only submit one form and handle whatever redirect that single form generates at server.
If you need multiple forms to submit you would need a different approach such as using ajax

As #charlietfl said, this can't be done as you are trying to do it.
However, depending upon your back end system, you may be able to make a composite form and parse the data there. C#, I know, can handle this.
<input name="form1.xxx">
<input name="form2.xxx">
Then, in C# you could create your object
class Form1 {
xxx: string
}
class Form2 {
xxx: string
}
class Combined {
form1: Form1,
form2: Form2
}
Access it with: Combined.form1.xxx

Submitting form with Jquery Fancybox and then appending value into parents text field

I have a jQuery auto-complete field that selects clients email adddress's. Next to that is a button that allows the user to create a new client. To avoid the clients being taken away from their already half filled form I am opening the form within a lightbox.
Enter jQuery Fancybox.
The new client add form is located within a jQuery FancyBox (so it is actually an external page in an iframe).
Once the user submits the form they are redirected to a page page with parent.$.fancybox.close(); script which then closes the fancybox
I doubt this is a great way to close the lightbox. Ideally I would like the action to be fired from the submit button but then I have to take into consideration what happens if the form fails server end validation... Anyway, Moving onto my main problem.
Assuming the user was added successfully, I now would like their name and email address to be automatically inserted into the original auto-complete field back on the parent page.
This would involve some sort of interaction between frames, something I have no idea about and something Google hasn't been able to help me with either.
Is this possible? If this is could you please give me an example or point me in the right direction.
Here is some code to give you a rough idea of the parent page that calls the fancybox lightbox and ultimately needs the email and name of the newly created user passed back to it.
<tr id="client-add">
<td>Billing Client:</td>
<td><input type="hidden" value="" name="client_id" /><input type="text" id="addClient" name="client_name" value="" style="width: 200px;" /><red>*</red> <a class="iframe" href="/clients/add_lightbox"><img src="/images/16x16/user_add.png" border="0"/> Create New Client</a>
</td>
Thankyou.
Tim

I'd use fancybox with inline mode instead of iframe. So basically you should put your 'create client' form in a hidden div, in the same page where you have the rest of your client selector GUI. Once you take that approach, you can easily interact with the main page's DOM from your fancybox form, as they are essentially part of the same DOM structure. Also, you can bind an autocomplete refresh action to the fancybox's onClosed event.
Modifying your original code, something like this should do the trick (untested):
<tr id="client-add">
<td>Billing Client:</td>
<td>
<input type="hidden" value="" name="client_id" />
<input type="text" id="add_client" name="client_name" value="" style="width: 200px;" /><red>*</red>
<a id="add_client" href="#create_client_div"><img src="/images/16x16/user_add.png" border="0"/> Create New Client</a>
</td>
</tr>
... and then somewhere in your page:
<div id="create_client_div" style="display: none;">
<form name="new_client" ...>
</form>
</div>
And you just bind your fancybox the usual way, as you would with an iframe-type box:
$("a#add_client").fancybox({ ... });
This way you can freely interact between the create client form and the rest of your page.