I have a form defined:
<form method="post">
<label for="phone_or_uid">Enter a phone number or uid:</label>
<input type="text" name="phone_or_uid" value=""></input>
<input type="submit" name="" value="Submit"></input>
</form>
Currently, when this form is submitted I am able to work with the data and add info to the page based on the value of phone_or_uid. However, what I'd like to do is something where the form redirects to the same page but with the value of phone_or_uid appended to the end. So, if the initial page is https://myhost.com/lookup then submitting the form should bring the user to https://myhost.com/lookup/16175431234 if the value of the phone_or_uid input box is 16175431234.
Essentially, my form should then look something like this:
<form action={some code that puts the value of phone_or_uid here}>
...
</form>
Is this possible? And if so, how could I accomplish this? I don't want to create or redirect to any extra files, if possible.
I would use JavaScript. Listen for the submit event and redirect to a custom url.
this is just a really general example:
<form method="post" onsubmit="submitFunction()">
<label for="phone_or_uid">Enter a phone number or uid:</label>
<input type="text" name="phone_or_uid" id="phone_or_uid" value=""></input>
<input type="submit" name="" value="Submit"></input>
</form>
<script>
submitFunction = (event) => {
event.preventDefault();
const phoneInfo = document.getElementById('phone_or_uid').value;
fetch('http://myhost.com/lookup/' + phoneInfo, {
method: 'post'
})
.then(response => {
window.location.href = "http://myhost.com/lookup/' + phoneInfo";
});
}
</script>
Related
Thanks for reading. I'm a novice with Javscript, and have done a lot of searches to try and figure this out... (to no avail)
I'm trying to create a situation where the user inputs a single word on a form. And then when they click a submit button, the website takes the word from the input, appends it on the end of an incomplete URL, and sends them to that completed URL.
It's easy probably easy to see why this doesn't work to some of you. And also, embarassingly, I imagine a completely different approach would be best.
Your advice is appreciated.
<form action="https://vrnaut.neocities.org/" method="get">
<label for="MyForm">Enter One Word:</label>
<input type="text" id= "OneWord" name="OneWord" required>
</form>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction(form) {
var GoHere = form.OneWord.value;
location.replace("https://vrnaut.neocities.org/" + GoHere);
}
</script>
Place the button inside you form
Never listen for buttons click - rather use the FORM's "submit" Event:
const EL_form = document.querySelector("#myForm");
const EL_word = document.querySelector("#OneWord");
EL_form.addEventListener("submit", (ev) => {
ev.preventDefault();
location.replace(EL_form.action + EL_word.value);
});
<form id="myForm" action="https://vrnaut.neocities.org/" method="get">
<label for="MyForm">Enter One Word:</label>
<input type="text" id="OneWord" name="OneWord" required>
<button type="submit">Submit</button>
</form>
Your approach is perfectly fine. All that's needed is a little tweaking.
<form action="https://vrnaut.neocities.org/" method="get">
<label for="MyForm">Enter One Word:</label>
<input type="text" id= "OneWord" name="OneWord" required>
<button onclick="myFunction(this.parentElement)">Submit</button>
</form>
<script>
function myFunction(form) {
var GoHere = form.getElementsByTagName("input")[0];
location.replace("https://vrnaut.neocities.org/" + GoHere.value);
}
</script>
I am new to javascript and on every simple thing i get some kind of problem but this seems un-solve-able to me. I googled and nothing simillar.
After i input data into textbox and store it into variable, i print out variable in paragraph.
Problem is that output i printed out disappears within less than second. Code seems to be normal, what might it be? It looks like c when you dont put getch();
Thanks in advance.
<form>Unesite broj koji ce se ispisat kasnije.<br>
<input type="text" id="userInput">
<input type="submit" name="unos" value="Unesi i ispisi" onclick="unesi()"><br><br>
</form>
<br><br>
<p>Unjeli ste <b id="ispis"></b></p>
<script>
function unesi(){
var userInput = document.getElementById('userInput').value;
document.getElementById('ispis').innerHTML = userInput;
}
</script>
The <form> tag doesn't specify an action attribute, so when you click the submit button, the browser will submit the form to the current URL - which will look a lot like the page is refreshing.
If you want to run the unesi function when the user clicks submit and prevent the HTML form from submitting, you need to change it slightly:
<input type="submit" name="unos" value="Unesi i ispisi"
onclick="unesi(); return false;">
The return false prevents the form from submitting itself.
Because the form submits and refreshes the page. Cancel the form request.
<input type="submit" name="unos" value="Unesi i ispisi" onclick="return unesi()">
and the function
function unesi(){
var userInput = document.getElementById('userInput').value;
document.getElementById('ispis').innerHTML = userInput;
return false;
}
better option is to do it on the form level
<form action="#" method="get" onsubmit="return unesi()">
Instead of cancelling the form submitting, another option is to change
<input type="submit" name="unos" value="Unesi i ispisi" onclick="unesi()">
to
<input type="button" name="unos" value="Unesi i ispisi" onclick="unesi()">
This will make it so the form does not try to submit at all when the button is pressed.
Hoping someone can help with this. I have a form which has an action attribute. This action attribute enables the user to subscribe to a newsletter when the form is submitted.
What I'm trying to do is only use that action if the user has checked a checkbox giving permission to subscribe to the newsletter. If the checkbox is left unchecked, the form can still be submitted, but will be redirected to a separate URL, disregarding the form's action attribute.
So far this is what I have, I'm not great with javascript so any help would be appreciated.
$('document').ready(function () {
$('#wifi-capture-form').submit(function() {
var newsletterTrue= $(this).attr("data-newsletter-checked");
var newsletterFalse= $(this).attr("data-newsletter-unchecked");
if ($('input.newsletter-checkbox').is(':checked')) {
$('#wifi-capture-form').attr('action', newsletterTrue);
else (
$('#wifi-capture-form').attr('action', newsletterFalse);
)
}
});
});
and the form is
<form name="wifi-capture-form" id="wifi-capture-form" action="" method="post" class="f24form wifi-capture-form" data-newsletter-checked="https://email.com/t/r/s/dkhywr/" data-newsletter-unchecked="https:www.domain.com/wifi-confirm">
<label for="fieldName">Name</label><br />
<input id="fieldName" name="cm-name" class="form-control" type="text" />
<label for="fieldEmail">Email</label><br/>
<input id="fieldEmail" class="form-control" name="cm-dkhywr-dkhywr" type="email" required /><br/><br/>
<input type="checkbox" name="newsletter" class="newsletter-checkbox" id="newsletter" value="Subscribe to newsletter"> Subscribe to our newsletter<br/><br/>
<button type="submit" class="btn btn-primary">Submit</button>
You can do it by changing the action attribute value of the form on submit. Here is the syntax:
$("#wifi-capture-form").attr("action", wifiConfirm);
So your new code must be like this:
$('#wifi-capture-form').submit(function(e) {
var wifiConfirm = $(this).attr("data-redirect");
/* if newslwetter checkbox is not checked, then change form action value*/
if (!$('input.newsletter-checkbox').is(':checked')) {
$("#wifi-capture-form").attr("action", wifiConfirm);
}
f24("send", "form", "form.#wifi-capture-form");
});
You can see other examples on How to change form action based on selection
Since you're using jQuery you can assign a click event to the checkbox that would dynamically change the action URL in case the checkbox is checked/unchecked.
There's an email subscription form in a web page, When someone enters his email and clicks on submit button, We don't want this page to be redirected to form action url, We just want it's submit button text value to be converted to another text, something like "Thank You!". How is it possible? Should I go through ajax? or javascript?
Here's the form:
<form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/myownID" data-code="myownID" method="POST" target="_blank">
<div class="form-group ml-field-email ml-validate-required ml-validate-email">
<input class="newsletter-email" type="email" name="fields[email]" placeholder="Email*"/>
</div>
<input type="hidden" name="ml-submit" value="1" />
<p>
<input class="newsletter-submit" type="submit" value="Get Updates!"/>
</p>
For starters remove target="_blank" from your form tag.
Then, within your jQuery, do something along the lines of this:
$(".ml-block-form").submit(function(){
var vals = $(this).serialize();
$.ajax({
url: "postpage.php",
method: "POST",
data: vals,
success: function(data) {
$("#formsubmit").val("Thank you!");
}
});
return false; // prevent from submit
});
I've altered your HTML as well, as it was originally very messy. You can of course add the other elements back if you need:
<form class="ml-block-form" action="" data-code="myownID" method="post">
<input id="mainval" type="email" name="fields[email]" placeholder="Email*">
<input id="hiddenval" name="ml-submit" value="1" />
<input id="formsubmit" type="submit" value="Get Updates!"/>
</form>
You can simply remove target="blank" because blank value opens the linked document in a new window.
Instead of
<input class="newsletter-submit" type="submit" value="Get Updates!"/>
use
<button id="newsletter-submit" value="Get Updates!"/>
(note that I changed class for id)
And then use jQuery to handle the click on the button:
$("#newsletter-submit").click(function () {
$(this).prop("value", "Thank You!");
// do something else with the input values e.g. send them via ajax to a server script
});
I am trying to set-up a form that has 2 buttons, accept and deny. It doesn't seem to be working. Any thoughts on what I should fix?
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" action="formapprovedeny" class="iform">
Form content here.
<input type="button" onclick="submitForm('html_form_approve.php')" class="submit_button" value="Approved" name="Approved" />
<input type="button" class="submit_button" onclick="submitForm('html_form_deny.php')" value="Denied" name="Denied" />
</form>
Here is the script part.
<script>
function submitForm(action)
{
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
Your Javscript is trying to submit a form with an id of formapprovedeny but your form does not have an id. Try adding id="formapprovedeny" to your form
It should id="formapprovedeny" not action="formapprovedeny"
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" id="formapprovedeny" class="iform">
You have a problem with your naming.
You try to get the form by it's id, but it is not set. It's name is.
You should use either getElementByName or give your form an id.
The type of button must be 'submit' and the value whatever you want, look this:
<input type="submit" class="submit_button" value="Approved" name="Approved" />
<input type="submit" class="submit_button" value="Denied" name="Denied" />
What do you want to achieve using the 2 buttons? What do you expect?
http://jsfiddle.net/xaW5P/
<script>
function submitForm(action)
{
alert('hello submitForm '+action);
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
if I use your code (added an alert) this seems to work...whatever it should be doing ;)