CODEWITHSUNDEEP
javascripthtmloutput
kutlu01
kutlu01

Reputation: 21

Inserting the URL output of Javascript in HTML as HREF

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>

Upvotes: 2

Views: 1368

Answers (3)

Andrey
Andrey

Reputation: 722

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.

Upvotes: 0

IrkenInvader
IrkenInvader

Reputation: 4050

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.

Upvotes: 0

Vasyl Moskalov
Vasyl Moskalov

Reputation: 4630

Something like this:

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

Upvotes: 2

Related Questions