We Keep Coding

Automatically click button once the page loads

I have a starting page with some text, where when I click show images button in starting page, It will redirect to another page and displays images.
<form>
<select name="images" id="images">
<option value="cars">Car Images</option>
<option value="cycles">Cycle Images</option>
<option value="bike">Bike Images</option>
</select>
<input id="getimages" type="submit" name="submit" value="Get Images">
</form>
when I select any of the option and click Get Images button, only then it will show images accordingly. But I want to display images with automatically selected option(first) when page loads with out clicking Get Images button. I tried using
document.getElementById("getimages").click()
but the page is reloading again and again. How can I solve this with JS/JQuery. I hope you understand the above issue. If not please let me know. Thanks.

If you auto click the submit button when page loads without any condition it will create an infinite loop.
You can use select onchange event.
<select name="images" id="images" onchange="document.getElementById("getimages").click()">
But it's not the optimum solution.
I recommend you to use an ajax request to load images without any page refresh.

I don't know if I understood you well but if yes then this might help you:
I don't have your JS code but I can guess that you have an event runned when clicked the input, so you could just add the same event which would run when the document loads. I mean something like that
const showImages = () => {
// the code that shows the images
}
document.querySelector("#getimages").addEventListener("click", showImages())
document.addEventListener("load", showImages())

How do I submit a form's data to another function without refreshing the page?

I'm working on a collection of web apps using REACT JS. For part of the current app I'm working on, I have a modal that renders on a state change and has a form to receive a name with some related data. I want the submit button in this form to submit the code to a submitNewName() function which will compare the submitted name & data to names & data from a JSON file. Unfortunately, I cannot test to see if any of my code works because the page refreshes upon submission, which refreshes the developer console.
Within my submitNewName() function, I have the following line of code:
var newName = document.getElementById("newNameForm").submit(). I read another similar question where someone suggested adding function(e) {e.preventDefault();} as an argument for .submit, but when I tried that it didn't change anything.
Here's my form:
<form id="addNameForm" className="RNGpopupTXT">
Name: <input type="text" name="name"/>
<br/><br/>
Type: <select>
<option value="fname">First Name</option>
<option value="lname">Last Name</option>
<option value="sname">Single Name (e.g. Madonna)</option>
<option value="title">Title</option>
</select>
<br/><br/>
Gender: <select>
<option value="mg">Male</option>
<option value="fg">Female</option>
<option value="ng">Non-specific</option>
</select>
<br/><br/>
Tags: <input type="text" size="40" name="tags" placeholder=" eg. 'Star Wars,Scifi,Space'"/>
<br/><br/><br/><br/>
<div align="center">
<input type="submit" value="Submit" className="mdc-button" style={{ textDecoration: 'none' }} onClick={() => this.submitNewName()}/>
</div>
</form>
and here's my function:
submitNewName() {
var newName = document.getElementById("newNameForm").submit(function(e) {
e.preventDefault();
});
}
I would like the data from the form to be given to the function in a way that would allow it to be compared to the JSON file data. I also do not want the page to refresh, as that refreshes the state of the page, closing the modal prematurely. When I run the program now, it does send an error message to the console, but I cannot read what it says because the console is refreshed with the web page.

It feels like you could use more React to make your life easier here.
You don't have to use the form's onSubmit event. You could just add an onClick handler to the button. In that function, you could do all the comparing you want and, whrn you're ready, it can do the submitting logic too.
If you wanted to compare the form's values, you might want to keep those values in state. To do so though, you would need onChange functions on each of the form elements to update the state as the user provides input.
As I didn't see much React code in your example, I took the liberty of writing some out. Hopefully it will help you:
https://codesandbox.io/s/elastic-shape-yrv0b

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 add another option to website and

I have a javascript that shows and hides options from a html form. What I am trying to do is be able for the user to add a new category and then write that into the database as an option and add that subject to the option form.
Here is an example of the html code,
<select id="team1" name="team1" style="display:none">
<option value="subcat1">subcat1</option>
<option value="subcat2">subcat2</option>
<option value="subcat3">subcat3</option>
I then want them to be able to add another subcat4 via the website.
the javascript i'm using is an if statement with show and hides from different selects.
The user needs to be able to enter the category name and add it to the relevant select.
Currently im unsure on how to get this to add and save the new subcat4 to the database and to the html.
Any help would be appreciated.

When you first load the page you construct the select element by using the values stored in the database.
Then you can have a form that posts the filled info and stores subcategories into the database. This form may contain the identifier of your select for knowing in which select you are assigning the new option. It could be in a hidden input.
here comes a simple example of that form
<form method='post' action='/your/action/here' >
<input type='hidden' name='main_category' value='team1' />
Subcategory: <input type='text' name='subcategory' value='' />
<input type='submit' name='submit_btn' value='submit' />
</form>
You could also do it without page refresh by using an ajax post (this should be your next step, make it first work the simple way) to store the info and then by appending the option to your select using javascript. Check the jquery append or the appendChild() if you are not using jquery.

With jquery you can do this code to append new child in your select element.
$('#team1').append('<option value="subcat4">subcat4</option>');

Change form action target without JavaScript

I have a form with select box. With JavaScript on, I take the change event to define the options-values as location.hrefs:
$('select').change(function(){
window.location.href = $(this).val();
});
With JavaScript off, I have a basic form with a submit button. To follow the targets given in the option values, I have to set them to the form action. Do you have any idea how I could get only the selected option as form target e.g. with any CSS selector or something like that?
The form:
<form action="test-1.html">
<fieldset>
<select id="lorem">
<option value="test-1.html">test1</option>
<option value="test-2.html">test2</option>
<option value="test-3.html">test3</option>
</select>
<input type="submit" value="senden" class="submit" />
</fieldset>
</form>

You will have to do this in server-side code. Without JavaScript enabled, there is no way to dynamically change anything in an HTML DOM.
So, submit to some intermediary page that's sole purpose is to redirect and perform the logic there.