I want to insert input values to link - javascript

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.

Related

The difference between .value and .nodeValue

I add the JavaScript code needed to enable auto-complete on this form.
<form>
<label for='shippingName'>Name</label>
<input type='text' id='shippingName' name='shippingName' required></br></br>
</form>
<form>
<input type='checkbox' id='same' name='same' onchange='billingFunction()'>
<label for='same'>Is the Billing Information the Same?</label>
<label for='billingName'>Name</label>
<input type='text' id='billingName' name='billingName'></br></br>
<input type='submit' value='Verify'>
</form>
My script:
function billingFunction(){
if(document.getElementById('same').checked) {
var name = document.getElementById('shippingName').value;
document.getElementById('billingName').value = name;
}else{
document.getElementById('billingName').value = "";
}
}
My question is if I use .nodeValue instead .value in var name, the function does not work. What is the difference bettween them?
.nodeValue is not supposed to be used to get the values of inputs, it's meant to get the data of text nodes and things such as data sections.

How to pass text box value as argument in jquery function on click event

I want to get a value of text box on click as parameter
<input type="text" id="remark_mention" />
// link is here for click
<a class="remark "href="javascript:void(0);"style="text-decoration:none;color:#d90000;" id="st_mention<?php echo strip_tags($row["pid"]); ?>" onClick="mention_or_remmove_remarks('<?php echo strip_tags($row["pid"]); ?>','st_mention');"> Mention</a>
My jquery function is follow
function mention_or_remmove_remarks(mention_id, action){
var dataString = "mention_id=" + mention_id + "&action=mention_or_remmove_remarks";//ajax code here for post mention_update.php
}
How I get a value of textbox in link Onclick event
You can get it by.
Use form and get it:
<form>
<input type="text" id="remark_mention" name="remark_mention_ID"/>
<input type="button" onclick="foo(this.form.remark_mention_ID.value)"/>
</form>
OR :
<input type="text" id="remark_mention" />
and in your js file :
var value = $('#remark_mention').val(); // value variable has your latest value
Html
<input type="text" id="remark_mention" />
<a class="remark "href="javascript:void(0);"> Mention</a>
Js
$('.remark').on('click', function(){
var text_val = $('#remark_mention').val();
console.log(text_val);
});
jsfiddle demo

Open a new window using data from input form

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

Search bar is not working when I perform a copy paste

The search bar only works when I type in it and hit enter but if I copy a word from a different website and paste it, it wont search UNLESS I click on it edit(by putting a space then deleting the space) only then I'm able to press enter key. I added the script so people wouldn't just hit enter with it being empty but now I think its messing up the search bar.How could I copy and paste a word with out me having to edit it?
Edit:
<form action='/search.php' method='GET'>
<input id='searchbar' type='text' name='search' placeholder="search for movies & shows" maxlength="50" required />
<input id='submit' type='submit' name='submit' value='Search' disabled />
</form>
<script>
document.getElementById('searchbar').onkeypress = function() {
document.getElementById('submit').disabled = !this.value.trim();
}
</script>
Try this
document.getElementById('searchbar').oninput = function() {
document.getElementById('submit').disabled = !this.value.trim();
}

Validating an HTML form with onClick added form fields

I have a form I cobbled together with bits of code copied online so my HTML and Javascript knowledge is VERY basic. The form has a button that will add another set of the same form fields when clicked. I added some code to make it so that if the "Quantity and Description" field is not filled out, the form won't submit but now it just keeps popping up the alert for when the field's not filled out even if it is. Here's is my script:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'>
</script><script type='text/javascript'>
//<![CDATA[
$(function(){
$('#add').click(function() {
var p = $(this).closest('p');
$(p).before('<p> Quantity & Description:<br><textarea name="Quantity and Description" rows="10"
cols="60"><\/textarea><br>Fabric Source: <input type="text" name="Fabric Source"><br>Style# & Name: <input
type="text" name="Style# & Name"><br>Fabric Width: <input type="text" name="Fabric Width"><br>Repeat Information:
<input type="text" name="Repeat Info" size="60"><input type="hidden" name="COM Required" /> </p><br>');
return false;
});
});
function checkform()
{
var x=document.forms["comform"]["Quantity and Description"].value
if (x==null || x=="")
{
alert("Quantity & Description must be filled out, DO NOT just put an SO#!!");
return false;
}
}
//]]>
</script>
And here's my HTML:
<form action="MAILTO:ayeh#janusetcie.com" method="post" enctype="text/plain" id="comform" onSubmit="return
checkform()">
<div>Please complete this worksheet in full to avoid any delays.<br />
<br />Date: <input type="text" name="Date" /> Sales Rep: <input type="text" name="Sales Rep" /> Sales Quote/Order#: <input type="text" name="SQ/SO#" /><br />
<br />Quantity & Description: <font color="red"><i>Use "(#) Cushion Name" format.</i></font><br />
<textarea name="Quantity and Description" rows="10" cols="60">
</textarea>
<br />Fabric Source: <input type="text" name="Fabric Source" /><br />Style# & Name: <input type="text" name="Style# & Name" /><br />Fabric Width: <input type="text" name="Fabric Width" /><br />Repeat Information: <input type="text" name="Repeat Info" size="60" /><br /><font color="red"><i>Example: 13.75" Horizontal Repeat</i></font><br />
<br /><input type="hidden" name="COM Required" />
<p><button type="button" id="add">Add COM</button></p>
</div>
<input type="submit" value="Send" /></form>
How can I get it to submit but still check every occurence of the "Quantity and Description" field?
First, I would not use spaces in your input names, as then you have to deal with weird escaping issues. Use something like "QuantityAndDescription" instead.
Also, it looks like you're trying to have multiple fields with the same name. The best way to do that is to add brackets to the name, meaning the values will be grouped together as an array:
<textarea name="QuantityAndDescription[]"></textarea>
This also means the code has to get all the textareas, not just the first. We can use jQuery to grab the elements we want, to loop over them, and to check the values. Try this:
function checkform()
{
var success = true;
// Find the textareas inside id of "comform", store in jQuery object
var $textareas = $("form#comform textarea[name='QuantityAndDescription[]']");
// Loop through textareas and look for empty values
$textareas.each(function(n, element)
{
// Make a new jQuery object for the textarea we're looking at
var $textarea = $(element);
// Check value (an empty string will evaluate to false)
if( ! $textarea.val() )
{
success = false;
return false; // break out of the loop, one empty field is all we need
}
});
if(!success)
{
alert("Quantity & Description must be filled out, DO NOT just put an SO#!!");
return false;
}
// Explicitly return true, to make sure the form still submits
return true;
}
Also, a sidenote of pure aesthetics: You no longer need to use the CDATA comment hack. That's a holdover from the old XHTML days to prevent strict XML parsers from breaking. Unless you're using an XHTML Strict Doctype (and you shouldn't), you definitely don't need it.

Categories

Resources