In a input form in a HTML file, the user is supposed to put an URL (let's call it thislink). Then I want, when the user clicks on the submit button, to open a new window whose URL integrates thislink, that is its URL should be: '/selection/yes/?value='+thislink'.
Here are 2 tentatives of code:
1st tentative:
<form id="urlarticle">
<input type='text' name='thislink'>
<input type='submit' value='Select' onclick = function() {window.open('/selection/yes/?value='+thislink)};>
</form>
2nd tentative:
<form id="urlarticle">
<input type='text' name='thislink'>
<input type='submit' value='Select'>
</form>
<script type='application/javascript'>
$("#urlarticle").submit(function() {
window.open('/selection/yes/?value='+thislink);
});
</script>
But both tentatives are not working, any help to get the right way to write it appreciated!
Since you tagged jQuery, you could do it like this:
http://jsfiddle.net/729uh/
Javascript:
$("#urlarticle").submit(function() {
var linkValue = $('input[name="thislink"]').val();
window.open('/selection/yes/?value='+linkValue);
});
Html:
<form id="urlarticle">
<input type='text' name='thislink'/>
<input type='submit' value='Select'/>
</form>
What this does is:
use jQuery to select the input that has a name attribute with value thislink
take the value that was written in it
append that value to your link
Related
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>
I am wondering how to get 2 actions in PHP from a single Button.
Attached here is an screenshot of the page:
I have the following code:
For the Submit button
<form method='POST'>
<div class="form-group">
<input type="text" name="s_amount" style='width:20%;' required>
<input type="submit" class="btn btn-primary" name="submit" value="Submit" />
</div>
</form>
<?php
$s_amount = $_POST['s_amount'];
echo $s_amount;
?>
AND for the Submit Code button
<button id="submitcode"type="button" class="btn btn-default">Submit Code</button>
<pre><code id="output">.../...</code></pre>
When the Submit code is pressed, this executes the following script
<script>
$(document).ready(function(){
$("#submitcode").on("click", function(){
ocpu.seturl("https://public.opencpu.org/ocpu/library/base/R")
//arguments
var mysnippet = new ocpu.Snippet("V_CT="+$('[name="CT"]:radio:checked').val()+"\r V_TP="+$('[name="LENGTH"]:radio:checked').val()+$('#input2').val());
//perform the request
var req = ocpu.call("identity", {
"x" : mysnippet
}, function(session){
session.getObject(function(data) {
//data is the object returned by the R function
$("#output").text(data);
});
});
})
});
</script>
What I would like to have is a single button, which not only gets the value next to the first submit button (here 12, see attached pciture) but also executes the script.
Many thanks !
try giving id to form tag and on click on submitcode button call the form using its id.
for ex.
<form method='POST'>
function(session){
session.getObject(function(data) {
//data is the object returned by the R function
$("#output").text(data);
// using form id call the form
$("#formdata").submit(); // it will simply submit the form.
});
});
<form method="post" id="formdata"> <!--assign id to form tag-->
</form>
Could finally do it very easily using js.
<input type="text" id="VTP" value="0">
and get the value in the javascript form
document.getElementById("VTP").value
# nikhil borikar: Thanks but it did not work
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 have a form on my page and want to be able to submit the text box value (partnumber) as a query string in a hyperlink without submitting the form itself ? Is this possible ?
I have done some research and have tried document.getElementById("partnumber").value but am getting the error "Object Required". Code Below.
<form id="form3" name="form3" method="post" action="formpost?rmaid=<%=rmaid%>">
<input name="partnumber" type="text" id="partnumber" size="10" />
<span class="style11">Suggest Link</span>
<input name="invoice" type="text" id="invoice" size="15" />
</form>
I'll set the new page to open in a pop up window and list a series of values in the database but then I need the value selected to come back into the invoice field on the original page. I believe this can be done with JavaScript but I am new to this, can anyone help ?
For those Looking to pass values back I have found this snippet that works...
Put this in the child window
<script language="javascript">
function changeParent() {
window.opener.document.getElementById('Invoice').value="Value changed..";
window.close();
}
</script>
<form>
<input type=button onclick="javascript:changeParent()" value="Change opener's textbox's value..">
</form>
For the input field you should add an OnChange to it. This event should call a function which will then set your link's value.
You can see an example of this here (it uses a button press though and not an input OnChange Event): http://www.java2s.com/Code/JavaScript/HTML/ChangeURLandtextofahyperlink.htm
Edit: Added a Stack Snippet illustrating the solution.
function SetSuggestLink() {
var suggest = document.getElementById('partnumber').value;
document.getElementById('innerSpan').innerHTML =
"Suggest Link: suggest.asp?partnumber=" + suggest;
document.getElementById('QueryLink').href =
"suggest.asp?partnumber=" + suggest;
}
.style11 {
color:black;
}
.style2 {
text-decoration:none;
}
<form id="form3" name="form3" method="post" action="formpost?rmaid=SomeValue">
<input name="partnumber" type="text" id="partnumber" size="10"
OnChange="SetSuggestLink()" /> </br>
<a id="QueryLink" class="style2" href="#">
<span id="innerSpan" class="style11">Suggest Link</span>
</a></br>
<input name="invoice" type="text" id="invoice" size="15" />
</form>
I have to link three input values to the link. How I can do in easy way and I click the link I want open the URL.
<html>
<script type="text/javascript">
function changeText2(){
var userInput0 = document.getElementById('userInput').value;
var userInput11 = document.getElementById('userInput').value;
var userInput21 = document.getElementById('userInput2').value;
document.write("userinput");
}
</script>
Here is a link : <a href="/00ON0000000FOHS?pc0=userInput0&pn0=userInput11&pv0=userInput21" >nothing here yet</a> <br/>
<input type='text' id='userInput' value='Enter Search String Here' />
<input type='text' id='userInput1' value='Enter Text Here' />
<input type='text' id='userInput2' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Link'/>
</html>
If Your link is static than you can create your href link in script it self like :
var link = document.getElementById("test");
link.href = "/00ON0000000FOHS?pc0="+userInput0+"pn0="+userInput11+"pv0="+userInput21;
Here test is id of your <a> element.
You can crate href link by appending parameter value.
I wrote a jsFiddle with a working solution:
http://jsfiddle.net/t8kAS/
Note that I removed the Button and put the event on the onchange event.
$(".jsCustomField").on("change", function() {
var customLink = linkTemplate.replace("{0}", $input1.val())
.replace("{1}", $input2.val())
.replace("{2}", $input3.val());
$dynLink.attr("href", customLink);
});
Hope this helps!
The most standard-based way is using form with GET method
<form method='GET' action='/00ON0000000FOHS?'>
<input type='text' id='userInput' name='pc0' value='Enter Search String Here' />
<input type='text' id='userInput1' name=pn0' value='Enter Text Here' />
<input type='text' id='userInput2' name='pv0' value='Enter Text Here' />
<input type='submit' value='Change Link'/>
</form>
The name part of the input tag will be used as the argument key, and the value entered into the input field is the value in the get request.
Change your function to:
function changeText2(){
var userInput0 = document.getElementById('userInput').value;
var userInput11 = document.getElementById('userInput1').value;
var userInput21 = document.getElementById('userInput2').value;
//document.write("userinput");
window.open("/00ON0000000FOHS?pc0="+userInput0+"&pn0="+userInput11+"&pv0="+userInput21, "_self");
}
If you want it to open in a new window, use "_blank" in the 2nd argument of window.open.
After reading STO's answer (it's inaccurate) I realize, you actually don't need to use js for this. The standard html form was built for exactly this. Use just this, no js required:
<form method='GET' action='/00ON0000000FOHS'>
<input type='text' id='userInput' name='pc0' value='Enter Search String Here' />
<input type='text' id='userInput1' name='pn0' value='Enter Text Here' />
<input type='text' id='userInput2' name='pv0' value='Enter Text Here' />
<input type='submit' value='Change Link'/>
</form>
The name part of the input tag will be used as the argument key, and the value entered into the input field is the value in the get request.