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())
Related
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
I have a list pulled from a database that currently uses 2 submit buttons. one to refresh the page with a different set of data and the other to update the page.
the code is basically...
// this is a little bit pseudo so dont worry about spelling mistakes...
<?php
if($_POST['update']) {
// update database
}
if($_POST['filter']) {
// show different data
}
?>
<form type="post">
<button type="submit" name= "update" value="update">Update</button>
<select name="selectitem">
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type='submit' name='filter' value='filter'>Filter</button>
</form>
This works fine but I was thinking it would be better to have the select element do the refresh when changed using onChange but how do i get it to submit the right button (in this case the filter button). I am using jquery so suggestions using that would be fine too.
the form posts back to the same page so it can refresh or update the data based on the select element.
I guess i want to get rid of the filter button but perform its specific action onchange of the select element.
hope you can help
thanks
Set an event handler on the select element that will trigger a click to the button.
Like this:
$('select[name="selectitem"]').change(function(e) {
$('button[name="filter"]').click();
});
I hope that helps!
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 have a home page that contains a texfield that reads the user input, sends the value of whatever is typed in and sends it to another page where the search will happen and display the search results.
<div>
<form action="****.jsp" method="get" id="search-id">
<input type ="text" name = "search" id="search" size="70"/><br>
<br />
<input type="Submit" value="Search" class="button rounded">
</form>
<br />
<br />
<br />
</div>
But the thing is that it takes some time before the actual second page shows up, therefore I wanted to make a little loading gif to appear while waiting for that page to actually load up. I have a gif file ready to use, but I can't figure out how to implement it into the website so that it would show up after I click on the search button.
I'm very new to HTML/JS and I been searching for a possible way for days. Is this possible at all?
Add a submit event handler to your form, that makes the animated gif appear and doesn't prevent the form submission. Example with JQuery:
$('#search-id').submit(function() {
$('#animated-gif').show();
});
assuming you have the animated gif hidden somewhere in the page:
<img src="..." style="display: none;" id="animated-gif"/>
Since you are new to HTML, you will need to search more about ajax and jquery. That will ideally answer your question. Have a look on this similar question as well. Hope this will help you.
I was having a problem loading a view into a page, I got it to work about 90%, but Im more wondering about the problem, like the why and such and was hoping for some enlightenment, Im trying to load a view into a div tag with the .load() function, but for some reason if the view has another div tag starting it, it won't load. The view is
<div id="gameselectform" style="display: none">
<form id = "selectgame" onsubmit = "loadForm(); return false;" method="get">
<select name="game" id="gameselect" method="get">
<option value="starcraftii">Starcraft II</option>
<option value="worldofwarcraft">World of Warcraft</option>
<option value="callofduty">Call of Duty</option>
</select>
<input type="submit" value="Add" >
</form>
</div>
and if I remove the div tag, it loads. Im wondering why, and if there is a way around this? Thanks a lot in advanced! Im pretty new to javascript and jQuery, so don't use too many big words! Haha
Edit:
The javascript function is:
function loadForm(game){
game = game || $("#gameselect").val();
var url = "<?php echo BASE_URL;?>Gameformload/"+game;
$("#maindisplay").load(url);
}
It might be because of the display:none and the DOM?
Have you tried swapping the display property for visibility:hidden;