Inserting the URL output of Javascript in HTML as HREF

Question

I have a form on my website where inputs are given by visitors. After submitting it, they get redirected to the URL generated by Javascript on base of their inputs.

Thus to illustrate: If they give Data1 and Data2 as input, they get redirected to www.example.com/ajaData1+Data2

Actually, I don't want to redirect them to any URL. I want that they get a href to see after they click on the submit button so that they can choose whether they want to go to that URL or not.

This one is my JavaScript

<script type="text/javascript">function goToPage(){
var date = $('input[name=date]:checked').val();
var time = $('input[name=time]:checked').val();
var subject = $('input[name=subject]:checked').val();
window.location.href ="http://bay02.calendar.live.com/calendar/calendar.aspx?rru=-"+date+"-"+time+"-"+subject+"-";}</script>

And this one is the html code that I want to modify. My question is how I can insert the output of the javascript into the href section of my HTML?

<div class="group submit">
                <label class="empty"></label>
                <div><input name="submit" type="submit" onclick="goToPaget()" value="Get your appointment!"/></div>
            </div>


            <div id="form-message" class="message hide">
                Thank you for your request
            <div id="output" class="message hide "></div>

                <h4><a href="**SO HERE I WANT TO PUT THE OUTPUT OF THE JAVASCRIPT**" title="Add To Calender">Add To Calender</a></h4>

            </div>

And consider to prevent default submit behavior to stop redirect. — user4164128
– user4164128, Commented Apr 1, 2016 at 3:54
@DaveNewton How about this one? jsfiddle.net/kutlu01/L688swfz Still not working why? — kutlu01
– kutlu01, Commented Apr 1, 2016 at 21:53

Vasyl Moskalov · Accepted Answer · 2016-04-01 03:56:40Z

2

Something like this:

document.querySelection("div#form-message h4 a").setAttribute(
    "href",
    PUT YOUR VALUE HERE
);

answered Apr 1, 2016 at 3:56

Vasyl Moskalov

4,6403 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kutlu01 Over a year ago

What I have this on base of your suggestion. Still, it doesn't get me to the generated URL: jsfiddle.net/kutlu01/L688swfz

Vasyl Moskalov Over a year ago

Looks like you miss # in front of your element id. You need something like document.querySelector("#AddToCalendar").setAttribute("href", link)

IrkenInvader · Accepted Answer · 2016-04-01 21:39:52Z

0

Solution using jQuery selector to set the href of your anchor after generating the string from user input:

$('.group.submit').on('click', 'input[type="submit"]', function(){
    var date = $('input[name=date]:checked').val();
    var time = $('input[name=time]:checked').val();
    var subject = $('input[name=subject]:checked').val();
    var link = "http://bay02.calendar.live.com/calendar/calendar.aspx?rru=-"+date+"-"+time+"-"+subject+"-";

    $('a[title="Add To Calender"]').attr('href', link);
    $('#output').removeClass('hide');
}))

Add this code to your script and it should generate the appropriate link and assign the href to your "Add To Calender" anchor.

edited Apr 1, 2016 at 21:39

answered Apr 1, 2016 at 4:00

IrkenInvader

4,0401 gold badge14 silver badges25 bronze badges

4 Comments

kutlu01 Over a year ago

Thank you. However, I couldn't make it happen. Two questions: - To where exactly I should put the following code that you wrote: " $('a[title="Add To Calender"]').attr('href', link); " - How can I let the javascript talk with the html code so that I can show the generated link when the visitor hits the submit button?

IrkenInvader Over a year ago

does your submit button call the function goToPaget? it appears that way in the source you gave but we cannot see it. If that is the case, putting it at the end of that function would work. Another way is to create a listener for the button click in jQuery, i'll edit that into my answer.

IrkenInvader Over a year ago

As for showing the link, I took a guess and added code to remove the hide class from your output div that contains the link.

kutlu01 Over a year ago

It doesn't help buddy. Thanks in anyway.

Andrey · Accepted Answer · 2016-04-01 21:46:07Z

0

Maybe you can do with this:

<script>
$(document).ready(function(){
        $('#modalon').click(function() { 
            $.ajax({
            $('#imgloada4b').hide(); // hide old image
            var urload = "<?php bloginfo('template_url') ?>/img/loading.gif";
            $('#modal1Desc').html("<img href="/img/loading.gif" id='imgloada4b' src='"+urload+"'>"); // show new
            });
        });
});
</script>

it's very simple solution, not absolute good, but it's a solution, first hide te old image and add another in the parent element of image.

answered Apr 1, 2016 at 21:46

Andrey

7227 silver badges12 bronze badges

2 Comments

kutlu01 Over a year ago

Your answer has no any value and relevancy buddy.

Andrey Over a year ago

It is an example, I will not write the code that you need, I'll show you how you could fix it. I say that with AJAX show the item you need and when you click, show the item with the link.

Collectives™ on Stack Overflow

Inserting the URL output of Javascript in HTML as HREF

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related