I have an HTML form with a button and some checkboxes. The values of the checkboxes are passed to the next page via GET parameters. The target of the form submission is a blank page.
<form id="myForm" method="get" action="launch.php" target="_blank">
<input type="submit">Launch</input>
<input type="checkbox" class="checkbox" name="reset" /> Reset
<input type="checkbox" class="checkbox" name="erase" /> Erase
</form>
The checkboxes allow the user to reset and/or erase files prior to launching the web app. Since they are "dangerous", I wish to uncheck them automatically after the use launches the app. This is to help prevent the user from accidentally erasing or resetting their files twice in a row.
I added an onClick
action to the button that unchecks the boxes using jQuery. However, they get unchecked before the form is submitted, and therefore the values of the boxes aren't included in the GET.
<input type="submit" onClick="uncheckBoxes();" />
...
<script>
function uncheckBoxes() {
$(".checkbox").prop("checked", false);
}
</script>
I think I want to do one of two things. Either:
$("#myForm").submit()
function to uncheck the boxes, then open a new window. However, I'd have to write code to construct the URL, which is not very scalable (what if I want to add a new checkbox?) and error-prone. Or,uncheckBoxes
function after the new page/tab has opened. Since the page/tab with the form on it remains open, I can still run additional JS code.What are some solutions to this?
$('#submit-button').click(function() { var url = "launch.php?"; $('input[type="checkbox"]').each(function() { url = url + this.name + "=" + this.checked + "&" this.checked = false; }); url = url.slice(0, -1) console.log(url); //wondow.open(url, '_blank'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>Option 1</label><input name="option1" type="checkbox"> <br> <label>Option 2</label><input name="option2" type="checkbox"> <button id="submit-button">Submit</button>
This is a scalable way!
If you just want to prevent twice clicking, you can do something like:-
<form id="myForm" method="get" action="launch.php" target="_blank">
<input type="submit" id ="button" onclick = "Clicked(event)" value="Launch">
<input type ="reset" onclick ="button.style.display ='inline'">
<input type="checkbox" class="checkbox" name="reset" /> Reset
<input type="checkbox" class="checkbox" name="erase" /> Erase
</form>
<script>
var button = document.getElementById("button");
function Clicked(e) {
e.preventDefault();
button.style.display = 'none';
document.querySelector("#myForm").submit();
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.