Change form action target without JavaScript - 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.

Related

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

handling onchange with 2 submit buttons jquery

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!

How to navigate to other php pages using drop down list?

I am having trouble trying to figure out how to navigate to different web pages using a drop down list and submit. I have three forms:
main.php
two.php
three.php
In my main.php page I have a drop down list consisting of only two options 'second' and 'third'. How can I use these two options to navigate to other php pages? For example, if I selected the option 'two' and click submit, the page should then take me to the second.php page. And if I select option 'three', I will be taken to the third.php page.
Also, once I am directed to one of the php pages, how can I then be able to go back to the 'main.php' page if I decide to go to the other php page instead? (I thought perhaps the use of a back button).
Below is part of my 'main.php' page:
<label>Select the page you wish to go:</label></td>
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select></td>
On <select></select> value change :
HTML :
<select name="pages" onChange="my_function(this)">
JavaScript :
function my_function(element){
document.location.href = element.value
}
Example
On <button></button> click :
HTML :
<button onClick="my_function()"></button>
JavaScript :
function my_function(){
document.location.href = document.querySelector('select[name="pages"]').value
}
Example
You can do multiple things. If you dont wan't to rely on javascript, make the form submit to a file like router.php.
inside router.php put:
<?php
if (isset($_POST['pages']) {
header('Location: ' . $_POST['pages']);
}
Which will effectively forward the request to the page you submitted in the select.
You also have to change your html a bit:
<label>Select the page you wish to go:</label></td>
<form method="post" action="router.php">
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select>
<input type="submit" value="go there" />
</form>
If you are fine with javascript go with #notulysses's answer, its way easier and quicker.
Using POST values directly in a header method is kinda nasty imo.
Jquery solution
HTML CODE:
<form id="frm" method="post" action="" >
<label>Select the page you wish to go:</label>
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select>
<input type="submit" name="sub" value="Finish" />
</form>
JQUERY CODE
$('#frm').on('submit',function () {
var nextPage= $('select option:selected').val();
$(this).attr('action',nextPage);
return true;
});
Happy Coding :)

Javascript onclick confirm not working with "required" tag HTML

I have a <select> list written in HTML and it's marked with the <required> tag for validation. Like this <select name="users" width="200" size="11" style="outline:none" required>
And a submit button for the form <input type="submit" onclick="return confirm(\Are you sure to disable this user?\'); value="Disable user" formaction="disableuser">
But when I submit the form without selecting a user from the list it still fires the confirm pop-up, even nothing is selected. I'm stuck with this, can somebody help me? Thanks.
Try this..
function Submit() {
if(//check whether a user is selected)
{
var r = confirm("Are you sure to disable this user?");
if (r == true) {
//do what ever you need
}
else {
return;
}
}
else
{
alert('Please select a user!!!');
}
}
Invoke Submit() on onclick of submit button...
I am assuming that the code actually has size="1" instead of size="11", because with the latter, the problem does not arise (on modern browsers). For size=1, the first option is interpreted as selected, so the element satisfies the requiredness constraint even when the user has not made any selection. To avoid this, insert a dummy option with an empty value. It is customary to use it in a placeholder-like manner:
<select name="users" width="200" size="1" style="outline:none" required>
<option value="">Select a user:
<option>foo
<option>bar
</select>
The issue is explained in detail at Can I apply the required attribute to <select> fields in HTML5?
As always, you should not rely on any client-side checks; they are for user comfort, not for security. The processing of the form data server-side should be based on the assumption that the user is a malevolent hacker who uses a modified version of your form. In particular, in this case, the value of users can be literally anything.

onchange="javascript: document.my_form.submit()" vs. normal submit

I have a select field within a form:
<form id="myform">
<select id="value" onchange="javascript: document.myform.submit()">
<option>....
</select>
</form>
After the form is submitted, it is impossible to use the 'back' button without resubmitting the form. However, if I use a regular 'submit' button, it is possible.
Is there a way you know of to get this behavior while still being able to use the javascript 'submit()'?
Accessibility is not a concern, having javascript enabled is required to use this site and that is the way the client wants it.
Call a function instead.
<select id="value" onchange="sendForm()">
...script block...
function sendForm() {
document.myform.submit()
}
Also, you never need to specify javascript: outside of an HREF tag.
"onchange only works first time?"
Are you re-selecting the same value? onchange only fires when there is a change. If you want to be able to reselect the same option, you need to use onblur.
Also you really should be using
document.getElementById("myform").submit();

Categories