I've try this code
<p>Watch Series Online</p>
<input type="search" id="imdbseries" class="Search" name="" value=""
placeholder="IMDB ID">
<input type="search" id="season" class="Search" name="" value=""
placeholder="SEASON">
<input type="search" id="episode" class="Search" name="" value=""
placeholder="EPISODE">
<button id= "search" onclick="search()" >Watch Now</button>
<script>
function search() {
var imdbseries = document.getElementById('imdbseriesID','season#',episode#').value
window.location.href = "https://mysiteurl.com/tv.php?imdb="+ imdbseriesID + "&season=" + season# + "&episode=" + episode#;
}
</script>
but fail for 3 ID's..
I want that when I fill the box with
IMDB ID:tt9140554
SEASON:1
EPISODE:1
it should go to this EXSACT URL when the button was clicked.
https://mysiteurl.com/tv.php?imdb=tt9140554&season=1&episode=1
Your html
<p>Watch Series Online</p>
<input type="search" id="imdbseries" class="Search" name="" value=""
placeholder="IMDB ID">
<input type="search" id="season" class="Search" name="" value=""
placeholder="SEASON">
<input type="search" id="episode" class="Search" name="" value=""
placeholder="EPISODE">
<button id= "search" onclick="search()" >Watch Now</button>
Your script
function search() {
// The document.getElementById() takes one Id
let imdbseries = document.getElementById("imdbseries").value;
let season = document.getElementById("season").value;
let episode = document.getElementById("episode").value;
location.href = `https://mysiteurl.com/tv.php?imdb=${imdbseries}&season=${season}&episode=${episode}`
}
Here's the documentation for getElementById. As you can see it accepts only one argument.
An alternative is to use querySelector. (You can tidy up the markup a little by replacing putting the id values in the name attribute, and removing the ids altogether.) Then you can just target elements by their name attributes, grab the values, and then build a string.
(Note: at some point you may want to add some validation to check the input values are valid. For example, both season and episode should both be numbers.)
function search() {
const imdbseries = document.querySelector('[name="imdbseries"]').value;
const season = document.querySelector('[name="season"]').value;
const episode = document.querySelector('[name="episode"]').value;
console.log(`https://mysiteurl.com/tv.php?imdb=${imdbseries}&season=${season}&episode=${episode}`);
}
<input type="search" name="imdbseries" placeholder="IMDB ID" />
<input type="search" name="season" placeholder="SEASON" />
<input type="search" name="episode" placeholder="EPISODE" />
<button onclick="search()" >Watch Now</button>
Related
Trying to re-create this search url
https://www.bing.com/search?q=site:https://www.imdb.com/title+Hakunamatata
but this code keeps doing the wrong thing. I want to concatenate the URL's. Not start a second query inline
<form method="get" action="http://www.bing.com/search">
<input type="text" name="q" size="25" maxlength="255" value="Hakunamatata" />
<input type="hidden" name="q1" value="site:www.imdb.com/title" />
<input type="submit" value="Bing Search" />
</form>
What I keep getting is URL's with & in them instead of +.
Is there some kind of Javascript or something that can combine the search terms into one search?
You'll need to use JavaScript to prepend 'site:www.imdb.com/title ' to the input's value when the submit event is fired.
form.addEventListener('submit', function(){
query.value = 'site:www.imdb.com/title ' + query.value;
})
<form method="get" action="http://www.bing.com/search" id="form">
<input type="text" name="q" size="25" maxlength="255" value="Hakunamatata" id="query"/>
<input type="submit" value="Bing Search" />
</form>
So, I had a brother rebuild the script in JS since I needed some complicated formatting tweaks. This is the end result
function submitForm(elm, url, values, query) {
let baseLoc = new URL(url);
let searchParams = new URLSearchParams(baseLoc.search);
for (const key in values) {
let inputBox = elm.parentElement.querySelector(
`input[name="${values[key]}"]`
);
searchParams.set(key, inputBox.value);
}
for (const key in query) {
searchParams.set(key, query[key]);
}
let newTab = window.open(`${url}?${searchParams.toString()}`);
if (!newTab)
alert(
'Pop-up Blocker is enabled! Please add this site to your exception list.'
);
}
<form onsubmit="event.preventDefault();">
<input type="text" value="" name="inputBox" />
<input type="text" value="" name="inputBox2" /><br />
<button
onclick="submitForm(this, 'https:/\/bing.com/search/',{'q':'inputBox'},{'test':'fish','123':'lookup'});"
class="btn btn-primary btn-sm"
>
btn2
</button>
<button
onclick="submitForm(this, 'https:/\/ebay.com/sch/',{'_nkw':'inputBox2'},{'asd':'123'});"
class="btn btn-primary btn-sm"
>
btn2
</button>
</form>
Optionally, use this if you want to have a button that submits all buttons at once.
function submitAllButtons(elm) {
let allButtons = elm.parentElement.querySelectorAll('button');
console.log(allButtons);
for (const button of allButtons) {
if (elm != button) button.click();
}
}
<button onclick="submitAllButtons(this)" class="btn btn-secondary btn-sm">
ALL
</button>
I have this simple code in the test0.html file, it sends data to test1.html :
<body>
<form action="test1.html">
<input type="text" name="array[0]" placeholder="val1" id="">
<input type="text" name="array[1]" placeholder="val2" id="">
<input type="submit" value="send">
</form>
</body>
Then i have this code on the test1.html, that is supposed to send some new data back to test0:
<body>
<form action="test0.html">
<input type="text" name="array[2]" placeholder="val3" id="">
<input type="text" name="array[3]" placeholder="val4" id="">
<input type="submit" value="send back">
</form>
When i send data back to test0, i just get the newest data typed in test1.html. I'd like to know how to keep track of the ones sent previously from test0.
Thanks!
As the default form method is GET, the form parameters will be passed using the query parameters
So you can add a hidden input field to your form for each query parameters.
<body>
<form action="test0.html">
<input type="text" name="array[2]" placeholder="val3">
<input type="text" name="array[3]" placeholder="val4">
<input type="submit" value="send back">
</form>
<script>
(function() {
var form = document.querySelector("form");
var queryParams = new URLSearchParams(location.search);
for (var key of params.keys()) {
var input = document.createElement("input");
input.type = "hidden";
input.name = key;
input.value = queryParams.get(key);
form.insertBefore(input, form.firstChild);
}
})();
</script>
</body>
You take the sent data and store it temporarily, so you can then pass it on to the following pages. Input fields of type hidden are suitable here.
<form action="test0.html">
<input type="hidden" name="array[0]" value="SUBMITTED_DATA">
<input type="hidden" name="array[1]" value="SUBMITTED_DATA">
<input type="text" name="array[2]" placeholder="val3" id="">
<input type="text" name="array[3]" placeholder="val4" id="">
<input type="submit" value="send back">
</form>
With this approach, you can not determine whether the data were subsequently edited! Here a signature can provide remedy.
<script>
$(document).ready(function(){
$("#search-jobs").click(function(e){
e.preventDefault();
key = $('#myInput').val();
location = $('#location').val();
alert(key);
alert(location);
});
});
</script>
<form autocomplete="off" action="javascript:void(0);" method="post">
<div class="row">
<input type="text" id="myInput" name="company" placeholder="Job title, keywords or company name">
<input type="text" id="location" name="location" placeholder="Location">
<button name="search-jobs" id="search-jobs" type="submit"><i class="la la-search"></i></button>
</div>
In this question I have create an autocomplete which is working fine. Now, what am I doing here? When I click on search-jobs it alert myInput value then alert url path like http://localhost/jobportal/index.php then redirect me on other page and url of other page is like localhost/jobportal/noida where noida is location. I don't know what is the problem is this? Please help me.
Thank You
since your variable location is not defined inside the function, it is hoisted on top in window scope. So your location variable is actually window.location, to which you are providing a value. Simple solution is try changing the name of variable or defining it inside the function with let var or const.
It is because you did not declare your variables properly.
$(document).ready(function(){
$("#search-jobs").click(function(e){
e.preventDefault();
let key = $('#myInput').val();
let location = $('#location').val();
alert(key);
alert(location);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form autocomplete="off" action="javascript:void(0);" method="post">
<div class="row">
<input type="text" id="myInput" name="company" placeholder="Job title, keywords or company name">
<input type="text" id="location" name="location" placeholder="Location">
<button name="search-jobs" id="search-jobs" type="submit"><i class="la la-search"></i>test</button>
</div>
</form>
let key = $('#myInput').val();
let location = $('#location').val();
try this code, here I have also updated the url with the url you have given in the description like "localhost/jobportal/noida"
<script>
$(document).ready(function(){
$("#search-jobs").click(function(e){
e.preventDefault();
key = $('#myInput').val();
alert(key);
loc = location.host;
newloc = loc+"/jobportal/"+$('#location').val();
alert(newloc);
return false
});
});
</script>
<form autocomplete="off" action="javascript:void(0);" method="post">
<div class="row">
<input type="text" id="myInput" name="company" placeholder="Job title, keywords or company name">
<input type="text" id="location" name="location" placeholder="Location">
<button name="search-jobs" id="search-jobs"><i class="la la-search"></i></button>
</div>
i have a complex div with input field somewhat like this
<input type="text" name="firstname">
<input type="text" name="lastname">
<input type="text" name="email">
<input type="text" name="address">
<div id="section_toClone">
<input type="text" name="tree[tree1][fruit]">
<input type="text" name="tree[tree1][height]">
<input type="checkbox name tree[tree1][color] value="green">Green </input>
<input type="checkbox name tree[tree1][color] value="yellow">yellow </input>
</div>
<button id="add_more"> Add </button>
now when someone click on add i want something like this to happen
<input type="text" name="tree[tree1][fruit]">
<input type="text" name="tree[tree1][height]">
<input type="checkbox name tree[tree1][color] value="green">Green </input>
<input type="checkbox name tree[tree1][color] value="yellow">yellow </input>
<input type="text" name="tree[tree2][fruit]">
<input type="text" name="tree[tree2][height]">
<input type="checkbox name tree[tree2][color] value="green">Green </input>
<input type="checkbox name tree[tree2][color] value="yellow">yellow </input>
<input type="text" name="tree[tree3][fruit]">
<input type="text" name="tree[tree3][height]">
<input type="checkbox name tree[tree3][color] value="green">Green </input>
<input type="checkbox name tree[tree3][color] value="yellow">yellow </input>
and so on..... but my script only clone doesnt change the value of tree from tree1 to tree2 to tree3 and so on.... here is my jquery script
$('#add_more').click(function(){
$("#section_toClone").clone(true).insertBefore("#add_more").find('input').val("").val('');
});
how do i increment that automatically?? i want to mention one more thing in actual html code. it has more then 3 input and 3 checkbox field
Don't even bother putting the numbers into the array keys. Just let PHP take care of it itself:
<input name="tree[fruit][]" value="foo" />
<input name="tree[fruit][]" value="bar" />
<input name="tree[fruit][]" value="baz" />
Any [] set which DOESN'T have an explicitly specified key will have one generated/assigned by PHP, and you'll end up with
$_POST['tree'] = array(
0 => 'foo',
1 => 'bar',
2 => 'baz'
);
As long as your form is generated consistently, browsers will submit the fields in the same order they appear in the HTML, so something like this will work:
<p>#1</p>
<input name="foo[color][]" value="red"/>
<input name="foo[size][]" value="large" />
<p>#2</p>
<input name="foo[color][]" value="puce" />
<input namke="foo[size][]" value="minuscule" />
and produce:
$_POST['color'] = array('red', 'puce');
| |
$_POST['size'] = array('large', 'minuscule');
But if you start mixing the order of the fields:
<p>#3</p>
<input name="foo[color][]" value="red"/>
<input name="foo[size][] value="large" />
<p>#4</p>
<input namke="foo[size][] value="minuscule" />
<input name="foo[color][] value="puce" />
$_POST['color'] = array('red', 'puce');
/
/
$_POST['size'] = array('minuscule', 'large');
Note how they're reversed.
I wouldn't post this without feeling a bit ashamed of how bad it is written, but the following solution does the trick. Badly.
var treeCount = 1;
$('#add_more').click(function(){
$("#section_toClone")
.clone(true)
.insertBefore("#add_more")
.find('input')
.val('')
.each(function(key,element){
var $element = $(element),
oldName = $element.attr('name'),
newName;
if(oldName){
newName = oldName.replace(/tree[0-9]+/, 'tree'+(treeCount+1));
$element.attr('name', newName);
}
else {
treeCount--;
}
})
.promise().done(function(){
treeCount++;
});
});
(please don't shoot me)
I am kind of new to javascript however I have created a submit form that I want to redirect me to a url based on form input. Here is my current code...
The issue I'm running into however is that the form is sending me the initial value rather than the updated form value (It is using "whatevs" no matter what).
HTML
<form id="Search-Form" onClick="genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Javascript
function genURL() {
var searchSubmit = document.getElementById("searchSubmit").value;
window.location = "randomsite/view" + searchSubmit;
}
Add return and use onsubmit:
<form id="Search-Form" onsubmit="return genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Revise function like so:
function genURL()
{
location.href = "randomsite/view" + document.getElementById("search").value;
return false;
}
If you were to use onclick, it would go on the button, not the form.