CODEWITHSUNDEEP
javascriptgetelementbyidurl-parameters
ThreeFifty
ThreeFifty

Reputation: 1

Get value from input field and insert in URL Javascript

I have a form on wordpress, I need to get a value from a field and pass it into this script. This is what I've managed to do so far. The redirection works perfectly. I just need to put the value into the url as a parameter. I don't know the basics or theories of javascript. I just google and manage to put them together. Could anyone please help me out? Thanks!

<script>
  function getinputval()
    {
        var numpages1 = document.getElementById("numberofpages1").value;} 
document.addEventListener( 'wpcf7mailsent', function( event ) {
if (document.getElementById('selectservice').value=='Certified Translation') {location.replace('https://example.com?add-to-cart=856&quantity=+numpages1;')}
else if (document.getElementById('selectservice').value=='Business Translation') {location.replace('http://www.redirectedpage2.com')}
else { location.replace('http://www.redirectedpage3.com/') }
}, false );
</script>

Upvotes: 0

Views: 2662

Answers (1)

ash
ash

Reputation: 1055

Listen so you want to get the value from the input field. Then there are some cases by which you can gather input mentioning some:

  1. Do you want Live typing results
  2. or want results when the user clicks somewhere else other than the input box
  3. or you want to get value on form submission

Formal Way of Gathering Data is On Submission(3). As the user is giving its concern to Give his data. HTML

<input type="text" name="name" id="uniquestring" value="value" />

Javascript Function

var variablename = document.getElementById("uniquestring").value;

So, What You want Means You want to redirect users to a particular website I understand this use Form

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_page2.php" value="Submit to another page">
</form>

And then create a variable to change form Value

    function select_change(){
var z = document.getElementById("form_action").selectedIndex;
var z1 = document.getElementsByTagName("option")[z].value;
alert ("Form action changed to "+z1);
}


function select_change() {
var z = document.getElementById("form_action").selectedIndex;
var z1 = document.getElementsByTagName("option")[z].value;
alert("Form action changed to " + z1);
}
function myfunction() {
if (validation()) {
// Calling Validation function.
//select option value from select tag and storing it in a variable.
var x = document.getElementById("form_action").selectedIndex;
var action = document.getElementsByTagName("option")[x].value;
if (action !== "") {
document.getElementById("form_id").action = action;
document.getElementById("form_id").submit();
} else {
alert("Please set form action");
}
}
}
// Name and Email validation Function.
function validation() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var emailReg = '';
if (name === '' || email === '') {
alert("Please fill all fields...!!!!!!");
return false;
} else if (!(email).match(emailReg)) {
alert("Invalid Email...!!!!!!");
return false;
} else {
return true;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Change Form Action Using Javascript</title>
<!-- Include jQuery Library and File Here -->
<script type="text/javascript" src="js/form_action.js"></script>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="container">
<div class="main">
<h2>Dynamically Change Form Action Using Javascript</h2>
<form id="form_id" method="post" name="myform">
<label>Name :</label>
<input type="text" name="name" id="name"/>
<label>Email :</label>
<input type="text" name="email" id="email"/>
<label>Set Form Action :</label>
<select id="form_action" onChange="select_change()" >
<option value="">--- Set Form Action ---</option>
<option value="first.php">first.php</option>
<option value="second.php">second.php</option>
<option value="third.php">third.php</option>
</select>
<input type="button" value="Submit" onclick="myfunction()"/>
</form>
</div>
</div>
</body>
</html>

Upvotes: 1

Related Questions