I have this code:
how can I make my code to work with both options? because now it only use one selection because I believe the code is not proper duplicated
<form action="https://track.aftership.com/tuffnells/" method="get" target="_blank" id="my-form">
<input type="text" name="reference-number" id="reference-number" value="" />
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
var form = document.querySelector('#my-form'),
text_field = document.querySelector('#reference-number');
function submitHandler(){
// build the new url and open a new window
var url = form.action + text_field.value + '?tracking_account_number=318843';
window.open(url);
// prevent form from being submitted because we already
// called the request in a new window
return false;
}
// attach custom submit handler
form.onsubmit = submitHandler;
</script>
<form action="https://track.aftership.com/tnt-reference/" method="get" target="_blank" id="my-form1">
<input type="text" name="reference-number1" id="reference-number1" value="" />
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
var form = document.querySelector('#my-form1'),
text_field = document.querySelector('#reference-number1');
function submitHandler(){
// build the new url and open a new window
var url = form.action + text_field.value + '?';
window.open(url);
// prevent form from being submitted because we already
// called the request in a new window
return false;
}
// attach custom submit handler
form.onsubmit = submitHandler;
</script>
how can i make this work twice, because now is working only once.
just rename your variables in the second script part, this:
var form = document.querySelector('#my-form1'),
text_field = document.querySelector('#reference-number1');
to:
var form1 = document.querySelector('#my-form1'),
text_field1 = document.querySelector('#reference-number1');
also change the (on the second script) :
var url = form.action + text_field.value + '?';
window.open(url);
to:
var url1 = form1.action + text_field1.value + '?';
window.open(url1);
here is a fiddle: https://jsfiddle.net/cLhvuy68/
Related
I'm trying to Collect URL.pathname from user input and add to existing url, but when I do so, it doesn't seem to work when I output new URL.
<form id="myForm">
<input id="inputId" type="search" placeholder="Enter BSC Contract Address...">
<button onclick="getEndString()" id="submit" type="submit">Go</button>
</form>
let apiUrl = new URL('https://api.pancakeswap.info');
let myInput = document.getElementById("inputId");
let myForm = document.getElementById("myForm");
apiUrl.pathname = `/api/v2/tokens/` + getEndString(myInput.value);
function getEndString(x) {
return x;
}
myForm.addEventListener("submit", (e) => {
e.preventDefault();
console.log(apiUrl.toString());
});
Remove the onclick listener from the <button> element.
<form id="myForm">
<input id="inputId" type="search" placeholder="Enter BSC Contract Address...">
<button id="submit" type="submit">Go</button>
</form>
Move the assignement of the pathname into the event handler. The reason for this is that you want to read the value of the input and create the value for the pathname whenever you submit. Doing it outside of the event handler will only trigger the assignment whenever the script is loaded, but not after that.
let apiUrl = new URL('https://api.pancakeswap.info');
let myInput = document.getElementById("inputId");
let myForm = document.getElementById("myForm");
myForm.addEventListener("submit", (e) => {
e.preventDefault();
apiUrl.pathname = `/api/v2/tokens/` + myInput.value;
console.log(apiUrl.toString());
});
I have a basic form. I have hidden inputs outside the form. I want to set the form action with JavaScript to include the values from the hidden parameters as variables in the GET of the form when the user press the enter/submit button.
The form's current action is "https://example.com". I want to use JavaScript to take the values from the hidden inputs and concatenate them to the form's action so that the information stored outside the form is submitted with the form.
For example, the desired output for the form's action would be "https://example.com?firstParameter=parameter&secondParameter=secondParameter".
Here is what I have so far.
<form action="https://example.com" method="GET">
<input type="text"></input>
<button type="submit"></button>
</form>
<input type="hidden" id="firstParameter" value="parameter">
<input type="hidden" id="secondParameter" value="anotherParameter">
<script>
function setFormAction() {
var firstParameter= $("#firstParameter").val();
var secondParameter= $("#secondParameter").val();
var url = "https://example.com?";
if(firstParameter!== ""){
url = url + "&firstParameter=" + firstParameter;
}
if(secondParameter!== ""){
url = url + "&secondParameter=" + secondParameter;
}
// form action = url; (Need help here)
}
</script>
A simpler solution might be to add names to the hidden inputs then append them to the form so they get submitted by default process.
HTML
<input type="hidden" id="firstParameter" name="firstParameter" value="parameter">
<input type="hidden" id="secondParameter" name="secondParameter" value="anotherParameter">
JS
$('form').submit(function(){
const $form = $(this);
$('#firstParameter, #secondParameter').each(function(){
if(this.value){
$form.append(this)
}
});
});
Try the following:
document.querySelector('form').setAttribute('action', url);
function setFormAction() {
var firstParameter = $("#firstParameter").val();
var secondParameter = $("#secondParameter").val();
var url = "https://example.com";
if (firstParameter !== "") {
url = url + "&firstParameter=" + firstParameter;
}
if (secondParameter !== "") {
url = url + "&secondParameter=" + secondParameter;
}
document.querySelector('form').setAttribute('action', url);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://example.com" method="GET">
<input type="text" />
<button type="button" onclick="setFormAction()">Test</button>
</form>
<input type="hidden" id="firstParameter" value="parameter">
<input type="hidden" id="secondParameter" value="anotherParameter">
Use encodeURIComponent() in case of user input to sanitise it.
I think you should avoid using form submission if you are not actually submitting a form in the general sense and use a simple button with an event to a function. You can then declare states which do different things with the submission like:
<button id="submit-button">Submit</button>
let state = 'default'
function onFormSubmit()
{
if (state == 'default') doDefaultThings()
else doLessDefaultThings()
}
async function doDefaultThings()
{
//collect necessary data
let url = "https://example.com" //append here
let res = await fetch(url)
//do other things or redirect
}
document.getElementById('submit-button'
.addEventListener('click', onFormSubmit)
I have a link to a database in the server and I'm using an HTML form where the action points to the link and GET the information from the server.
I need to change the 'username' part of the link so that it takes in the username i enter and uses it in the link.
What's the best way to achieve something like this?
<body>
<form id = "me" action= "http://10.10.10.10/foods/<username>/" target="_blank" method="GET">
<h2>Enter Username</h2>
<input type="text" name="user" placeholder="username" id = "user" >
<br>
<button class="button" type="submit" value="Submit" >get</button>
</form>
<script>
var username = //need to get input username;
document.getElementById('me').action = "http://10.10.10.10/foods/" + username + "/";
</script>
</BODY>
this is all i have so far and i am stuck
Do this simple submit event
$('#me').submit(function(e){
e.preventDefault();//prevent the submit
var username = $(this).find('#user').val();//take the username
window.location = "http://10.10.10.10/foods/" + username + "/";//redirect to the page
})
<script>
var username = document.getElementById("me").action;
var updatedStr = username.replace("<username>", "action name");
document.getElementById("myForm").action = updatedStr;
</script>
I found this script in a previous search for a way to submit a url from a radio button to the browser:
<script type="text/javascript">
function doSubmit(form) {
var urls = form['url'];
var i = urls && urls.length;
while (i--) {
if (urls[i].checked) {
window.location = urls[i].value;
}
}
return false;
}
</script>
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="url" value="http://www.google.com"> Google
<input type="radio" name="url" value="http://www.yahoo.com"> Yahoo
<input type="submit" value="Submit">
</form>
What I'm trying to do is modify the script so that it opens the url in a new tab. I've tried adding the '_blank' parameter with no luck, but I'm not even 100% sure where it would go. Has anybody got an answer for me?
function doSubmit(form) {
form.target = "_blank";
var urls = form['url'];
var i = urls && urls.length;
while (i--) {
if (urls[i].checked) {
form.action = urls[i].value;
}
}
return true;
}
This code will do the trick. HTML5 supports the target attribute. The script returns true to allow the form action to be done. The script sets the action to the desired URL, while the form target is set to _blank, opening the url in a new window.
Suppose that I have a simple form in my page like this :
<form action="/properties/search" method="GET" id="form_search">
<p>
<label for="price">Min price:</label>
<input type="text" name="min_price" id="min_price">
</p>
<p>
<label for="price">Max price:</label>
<input type="text" name="max_price" id="max_price">
</p>
<p>
<input type="submit">
</p>
</form>
When I submit my form, I have the following url :
http://.../properties/search?min_price=100000&max_price=200000
I want to change this url to have :
http://.../properties/search?price=100000,200000
To do that, I'm using JQuery and the JQuery querystring plugin :
$(document).ready(function() {
$("#form_search").submit(function() {
var querystring = rewrite_interval_qstring();
// querystring equals "?price=100000,200000" -> exactly what I want !
// ???
});
});
How can I change (comment "???") the submit url ? I have tested the following instructions separately, but it does not work.
window.location = querystring;
window.location.href = querystring;
window.location.search = querystring;
You're almost there. Intercept the submit event (as you are doing), extract the min and max values, build your url and set window.location.href
$(document).ready(function() {
$("#form_search").submit(function(event) {
event.preventDefault();
$this = $(this);
// var url = rewrite_interval_qstring();
var min_price = $('#min_price').val();
var max_price = $('#max_price').val();
var url = $this.attr('action') + '?price=' + min_price + ',' + max_price;
window.location.href = url;
});
});
You need to prevent the default submit action from happening
$(document).ready(function() {
$("#form_search").submit(function(event) {
event.preventDefault(); // <-- add this
var querystring = rewrite_interval_qstring();
// querystring equals "?price=100000,200000" -> exactly what I want !
window.location.href = querystring; // <-- this should work.
});
});
Answer by Rob Cowie is one method. Another one is adding a hidden field named "price" and fill it before submitting it with the value you want.