How to make go to "link" button from option value? - javascript

How to make go to "link" button after changing option value and click sumbit?
I've got problem, because when I change value it's going to "link" before i click submit
<form action="search-form" method="post">
<select onChange="window.location.href=this.value" >
<option value="here comes a link nr 1">coffie medium</option>
<option value="here comes a link nr 2">coffe big</option>
</select>
<button type="submit" name="submit" value="submit"><img src="xyz.JPG" width="240" height="72">
</button>
</form>

Remove the onchange from the select element and write a listener for your submit button (you are using search-form action already)
<form action="search-form" method="post">
<select>
<option value="here comes a link nr 1">coffie medium</option>
<option value="here comes a link nr 2">coffe big</option>
</select>
<button type="submit" name="submit" value="submit"><img src="xyz.JPG" width="240" height="72">
</button>
</form>
EDIT:
#Peril Adding a solution as requested. Now it is working if you use onsubmit for the form submit as per below. Note that you should give valid links for the option values
function submit_form() {
window.location.href= document.getElementById('select-box').value;
}
<form onsubmit="submit_form()" method="post">
<select id="select-box">
<option value="http://google.com">coffie medium</option>
<option value="http://yahoo.com">coffe big</option>
</select>
<button type="submit" name="submit" value="submit">submit</button>
</form>
EDIT 2:
#Peril Normally we load external links into a page when we click on anchor tag. If you load it using window.location.href, you will get the cross-origin access error. Take the below snippet into a local html file and check it out.
// load href initially
document.getElementById('form-button').setAttribute('action', document.getElementById('select-box').value);
// load href on value change of select
function onChangeValue() {
document.getElementById('form-button').setAttribute('action', document.getElementById('select-box').value);
return false;
}
<body>
<select id="select-box" onchange="onChangeValue()">
<option value="http://www.google.com">coffie medium</option>
<option value="http://www.facebook.com">coffe big</option>
</select>
<form action="#" id="form-button" style="display:inline">
<input type="submit" value="Submit" />
</form>
</body>

Try including in your select the attribute 'onchange' and in the value of option the link, how that:
<select name="form" onchange="location = this.value;">
<option value="Home.php">Home</option>
<option value="Contact.php">Contact</option>
<option value="Sitemap.php">Sitemap</option>
</select>

remove the onchange event from select box and validate it in js on button click. If the page redirects what is the use of submit button

<form action="search-form" method="post">
<select>
<option value="here comes a link nr 1">coffie medium</option>
<option value="here comes a link nr 2">coffe big</option>
</select>
<button type="submit" name="submit" value="submit"><img src="xyz.JPG" width="240" height="72">
</button>
</form>
This isn't working, it only ads to adres url "search-form"

Ok, so if you use JavaScript or Jquery?
First Created the select:
<select name="form" id="form">
<option value="url">Home</option>
<option value="url">Contact</option>
<option value="url">Sitemap</option>
</select>
Try .change for assing a new location:
$("#form").change(function(){
var url = $(this).val();
location.assign(url);
});

Related

Check string in select option

I have created with javascript and I get a result of a string.I get that result on my html code
<div id="results"></div>
Next,I want when I select for example Red to check if it is the the same thing (string), the select option - > Red with the string of this code
<div id="results"></div>
I was trying to do it but I failed.It is not working not even sure ,if I press the submit button I will send the string.
<div id="results"></div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="submit" value="results"/>
It appears that you want to check whether the selected option is equal to the text value of the div #results. You can achieve this effect like so:
$(document).ready(function(){
var select = $("select");
$("input[type=\"button\"]").click(function(){
var text = select.find(":selected").text();
if(text==$("#results").text()){
$("#results").html(text+" is equal!");
}else{
$("#results").html(text+" is not equal :(");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results">Red</div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="button" value="results"/>
</form>
A form is going to be Sending data somewhere, it would be best to remove the form, leaving the select and button elements. In the button add the code onclick='myFunction() ; when the button is clicked it will run the javascript function called myFunction(). Also you need to give the select a Id. I'm using selectInput
<script>myFunction() { document.getElementById('result').innerHTML = document.getElementById('selectInput').value;} </script>
Now when ever the button is pressed it will set the content of the div equal to the value entity in the selected select box option
You lack an action attribute.
<form method="post" action="path/to/file">
<select name="select">
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input type="submit" value="Get Results" />
</form>
Use a function, and a regular button. No form is needed.
<button onclick='func()'></button>
const func = () => {...}

How to get 2 urls from 2 Options in one form

<form action="Url1" method="post">
<select class="selectpicker">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>
<button type="submit" class="btn btn-success pull-right">Submit</button>
</form>
This is a example code for my problem. What i want is to get different urls When select Text 1 Option or Text 2 Option. How can i do it?
Edit: I want to get different web URLs for these 2 options. For an example when someone select Text 1 Option, He must be directed to URL 1 And when someone selects Text 2 option He must be directed to URL 2
Add id attribute to your selector and get the selected value using java and use window.location to redirect on selected url
The corrected code is as below.
Try this ..
<form action="Url1" method="post">
<select name="url" id ="url" class="selectpicker"
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>
<button type="submit" class="btn btn-success pull-right">Deposit
Now</button>
</form>
<script type = "text/javascript">
function Redirect() {
var e = document.getElementById("url");
var strUrl = e.options[e.selectedIndex].text;
window.location = strUrl;
}
</script>

Change Button Name="" and Form Action based on Select Option in Jquery

Hi I have form which contains three search criteria.
These search criteria are jobs, resume, recruitment consultant.
Based on the drop down, fields are updated accordingly.
Based on the select value I want to change the action on the form, and name of the submit button. Problem is putting values with hyphen in option select makes jquery not work.
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment Consultant">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>
Change the form action as per following
action="search-recruitment-consultant-results?"
action="search-resume-results?"
action="search-job-results?"
And the button name (NOT VALUE OR TEXT) as per following
name="searchrecruitmentconsultantbutton"
name="searchresumebutton"
name="searchjobbutton"
I put these in option values accordingly
search-recruitment-consultant-results?
search-resume-results?
search-job-results?
and then used
<select name="search_for" onchange="this.form.action=this.value;">
but putting hyphen in option values makes the jquery show/hide not work
Try this code, see i have use hyphen in option and it works properly.
<form method="get" name="search" id="form" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment-Consultant">Recruitment Consultants</option>
</form>
<script>
$(document).ready(function() {
$("#search_for").change(function(){
if($(this).val()=='Jobs')
{
$("#form").attr("action",'search-job-results?');
$("#search_submit").attr('name',"searchjobbutton");
}
else if($(this).val()=='Resume'){
$("#form").attr("action",'search-resume-results?');
$("#search_submit").attr('name',"searchresumebutton");
}
else if($(this).val()=='Recruitment-Consultant'){
$("#form").attr("action",'search-recruitment-consultant-results?');
$("#search_submit").attr('name',"searchrecruitmentconsultantbutton");
}
});
});
</script>
i think this will help you
add id for your form 'formId'
$(document).ready(function(){
$('#search_for').change(function(){
var cur = $(this);
var search = cur.val();
if(search == 'job'){
$('#formId').attr('action', 'search-job-results?');
$("search_submit").attr('name', 'searchjobbutton');
} else if(search == 'Resume'){
$('#formId').attr('action', 'search-resume-results?');
$("search_submit").attr('name', 'searchresumebutton');
}else if(search == 'Recruitment Consultant'){
$('#formId').attr('action', 'search-recruitment-consultant-results?');
$("search_submit").attr('name', 'searchrecruitmentconsultantbutton');
}
});
});
try this
Add data attribute with button name
only you need to add - onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));" in the select
and data-name="" in the option
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>
Instead of writing multiple forms, just write one and use .change() and data-* attribute which is used to create custom tags. Store the button names inside <option data-name="button name"> then you can access this value with on change.
The data-* attributes is used to store custom data private to the page or application.
.change()
Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
$('#search_for').on('change', function () {
$('form[name="search"]').attr('action', $(this).val()).find(':submit').attr('name', $(this).find(':selected').data('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option data-name="searchjobbutton" value="search-job-results?">Jobs</option>
<option data-name="searchresumebutton" value="search-resume-results?">Resumes</option>
<option data-name="searchrecruitmentconsultantbutton" value="search-recruitment-consultant-results?">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>

submitting a HTML form using JavaScript

i want to have a button to submit a form, but it doesnt seem to work. when the button is clicked, nothing happens.
HTML
<form method="post" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>
JavaScript
function FormSubmit() {
document.getElementById("taskOption").submit();
}
PHP
<?php
$option = isset($_POST['taskOption2']) ? $_POST['taskOption2'] : false;
if ($option) {
header("Location: $option");
}
else {
echo "Venligst velg en side.";
exit;
}
?>
Your function is wrong.
document.getElementById("taskOption").submit();// this is wrong
taskOption it is the id of select box not your forms
<form name="F1">// give a name to your form
.....
</form>
function FormSubmit() {
document.F1.submit();
}
or
<form id="formid">// give a id to your form
.....
</form>
function FormSubmit() {
document.getElementById('formid').submit();
}
You must write id of Form, like instead of below:
<form method="post" action="process.php" id="taskOption2">
<select name="taskOption" >
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
Use:
Javascript:
function FormSubmit() {
document.taskform.submit();
}
HTML:
<form method="post" name="taskform" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>
first you gave a name to form here form1 is name
then onclick you call the form
<form method="post" name="form1" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="FormSubmit()" class="button button1 button1:hover">Take me there</button>
function FormSubmit() {
document.form1.submit();
}
Seems to me you just want a submit button in a form:
In that case, by far the easiest solution is move the <button> to inside the form tags, and make its type="submit". There's no Javascript required at all:
<form method="post" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
<button type="submit" class="button button1 button1:hover">Take me there</button>
</form>
Try this
function submitMyForm()
{
alert("Test");
document.getElementById("myForm").submit();
}
<form id="myform" method="post" action="process.php">
<select name="taskOption" id="taskOption2">
<option value="Select">Please select a site</option>
<option value="http://www.Itslearning.com">Itslearning</option>
<option value="http://www.NDLA.no">NDLA</option>
</select>
</form>
<button onclick="submitMyForm()">The time is?</button>
It will not work because you forgot to add the id in the form and you are calling submit function on a form with id taskOption.
<form method="post" action="process.php">
there is no id in the form tag, add the id as:
<form method="post" action="process.php" id="taskOption">
You have wrong call submit , only form id or element can use submit() . So call form element first
function FormSubmit() {
document.getElementById("taskOption2").parentNode.submit(); //must call id not name (parentNode is getting for parent form element)
}
In your php you have wrong access with select id ,the correct thing is access by element name
$option = isset($_POST['taskOption']) ? $_POST['taskOption'] : false; //element name is valid call

Display HTML while <option> is viable selection

I have something like the below:
<select name="blah">
<option disabled="disabled" selected="selected">Select an option</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select><br/>
<input type="submit" value="Submit"/>
I want it such that the submit button only appears if the user has selected an option with value >= 1 So on page load it will not display the submit button because the currently selected option has no value, but the moment a user selects a valid option, the submit button appears.
Is this something that can be accomplished with JS/JQ?
If you don't want to display submit button when page loads then add below css
input[type=submit] {display:none;}
To show submit button on value changes try below js code
$(function(){
$('select').change(function(){
var value = parseInt($(this).val().replace(/[^0-9-]/,""),10)
if(value >= 1)
{
$('input[type=submit]').show();
}
});
});;
Working Demo
Try following code in java script
function isSelected() {
var value =document.getElementById("blah").selectedIndex;
if(value >='1'){
document.getElementById('btnSubmit').style.display='block';
}else{
document.getElementById('btnSubmit').style.display='none';
}
}
Your HTML
<select id="blah" onChange="isSelected();">
<option disabled="disabled" selected="selected">Select an option</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select><br/>
<input type="submit" value="Submit" style="display:none" id="btnSubmit"/>
change this
<input type="submit" value="Submit"/>
to
<input type="button" value="Submit" id="submit"/>
in jQuery:
$(document).ready(function(){
$('#submit').click(function(){
if($('select[name="blah"]').val() > 1)
$('#yourform').submit();
else
alert('selected value > 1');
});
});
you form need to have an id for example, in my case yourform
DEMO

Categories