How to create a form to change part of a href url of a button?

How to create a form to change part of a href url of a button?

Content Index :

How to create a form to change part of a href url of a button?
Tag : javascript , By : Shawazi
Date : January 11 2021, 05:14 PM

To fix the issue you can do So I want to have a form (like a textarea with a submit button or something simple) that can change part of the link of another button (shown below). , Sensible solution:
var changeForm = document.forms['changeBtn'],
    regex = /receiveAddr=(.*?)&/;

changeForm.addEventListener('submit', function(e) {
	e.preventDefault(); // Don't submit function
    var form = e.target,
    	btn = document.getElementById('btn'),
    	href = btn.href,
        textareaVal = encodeURIComponent(form.receiveAddr.value.trim());
    btn.href = href.replace(regex, 'receiveAddr=' + textareaVal + '&');
<form id="changeBtn">
    <textarea name="receiveAddr"></textarea><br>
    <input type="submit">

<a class="button" id="btn" href="https://url.com/v1/?type=buy&amp;mode=popup&amp;receiveAddr=1313mainstreetlosangelesca&amp;receiveType=USD&amp;callback=url.com" target="_blank">Buy now</a>
var changeForm = document.forms['changeBtn'],
    regexFirstPart = /(.*)\?/;

changeForm.addEventListener('submit', function(e) {
	e.preventDefault(); // Don't submit function
    var form = e.target,
    	href = document.getElementById('btn').href,
    	firstPart = regexFirstPart.exec(href)[0],
        urlParts = processQuery(href); // ends with ?
    urlParts.receiveAddr = changeForm.receiveAddr.value;
    btn.href = firstPart + objectToUrlParams(urlParts);

function processQuery(url) {
    var regex = /[?&]([^=#]+)=([^&#]*)/g,
        params = {},
    while (match = regex.exec(url)) {
        params[match[1]] = match[2];
    return params;

function objectToUrlParams(obj) {
    var str = "";
    for (var key in obj) {
        if (str != "") {
            str += "&";
        str += key + "=" + encodeURIComponent(obj[key]);
    return str;
<form id="changeBtn">
    <textarea name="receiveAddr"></textarea><br>
    <input type="submit">

<a class="button" id="btn" href="https://url.com/v1/?type=buy&amp;mode=popup&amp;receiveAddr=1313mainstreetlosangelesca&amp;receiveType=USD&amp;callback=url.com" target="_blank">Buy now</a>

No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Javascript to hide part of form on radio button change

Tag : javascript , By : Al Dimond
Date : March 29 2020, 07:55 AM
wish helps you I have the below html form and need to write javascript to hide different parts of the form depending on the top radio button selected. , One approach is the following:
function showRSVP() {
    // caching the changed element (whose change event called the function):
    var checked = this,

        // getting the value of that changed element, and changing it to a
        // number (in base-10):
        n = parseInt(checked.value, 10),

        // getting all the 'div' elements whose id starts with 'rsvp':
        rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),

        // initialising a variable for use later:

    // iterating over the collection of elements we found earlier:
    for (var i = 0, len = rsvpElems.length; i < len; ++i){

        // storing the current element over which we're iterating:
        tmp = rsvpElems[i];

        // if i < n we're showing the rsvp element, otherwise we're hiding it:
        tmp.style.display = i < n ? 'block' : 'none';

// getting all the inputs with type="radio" and name="number":
var radios = document.querySelectorAll('input[name="number"][type="radio"]');

// iterating over that collection:
for (var i = 0, len = radios.length; i < len; i++){
    // binding an change event-handler to those radio elements
    radios[i].addEventListener('change', showRSVP);
function showRSVP(e) {
    // caching the changed-element (e is the event automagically passed
    // to the function), e.target is the element upon which the event
    // originated:
    var checked = e.target,
        n = parseInt(checked.value, 10),
        rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),

    for (var i = 0, len = rsvpElems.length; i < len; ++i){
        tmp = rsvpElems[i];
        tmp.style.display = i < n ? 'block' : 'none';

// getting a reference to the relevant 'label' element:
var label = document.querySelector('label[for="number"]');

// adding a change event-listener:
label.addEventListener('change', showRSVP);

Change part of href value

Tag : javascript , By : msugar
Date : March 29 2020, 07:55 AM
it helps some times You're missing the static part in your link building.
In your Javascript, change
$(".link").attr("href", links.join(","));
$(".link").attr("href", "static_part?variable=" + links.join(","));

Change button href to other href on page

Tag : jquery , By : Carter
Date : March 29 2020, 07:55 AM
I wish this helpful for you I have a website with a logout link. , It can be something like this:
jQuery(".mb-control").on("click", function() {
  var box = $($(this).data("box"));
  if (box.length > 0) {
    box.find('.btn-close').attr('href', this.href);

    var sound = box.data("sound");

    if (sound === 'alert')

    if (sound === 'fail')
  return false;
<a href="NEED TO PUT THE UNIQUE LOGOUT LINK HERE" class="btn btn-success btn-lg btn-close">Yes</a>

get the href value from selected option and change the href of the button

Tag : javascript , By : Jµ.
Date : March 29 2020, 07:55 AM
hope this fix your issue I want to get the href value of the selected option so that i can now go to the link that i selected using the button. , Add a id to =>
<a id="link" href=''><button type="button" class="btn btn-info">View</button></a>
$(document).ready(function() {

    $("#childNames").on('change', function () {

                var ref = document.getElementById("childNames").value;
                $('#link').attr('href', ref);



How can I create a button to change part of an href?

Tag : javascript , By : MJRider
Date : March 29 2020, 07:55 AM
I hope this helps you . You have just to have your source url and then feed it with the input
function changeURL(){
var source = "https://www.google.com/"
var input  = document.getElementById("getData").value
document.getElementById("link").href = source + input
document.getElementById("getData").value = ""
<input id="getData" placeholder="email"/>
<a id="link" href="https://www.google.com"> link </a>
<button onclick="changeURL()">Click me </button>
Related Posts Related QUESTIONS :
  • get the multiple index of the same string
  • How can I iterate over an Array object by using For IN or FOR OF
  • Launch local executable from web browser
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • Is synchronous XMLHttpRequest supported in Internet Explorer 10 and 11?
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com