get input from form and use it in url for ajax call

Question

How can I asynchronously put the new url in the ajax call? I've tried a few changes but they don't work. Currently code is:

<!-- Input form -->
<form class="navbar-form navbar-left" role="search" id="formversion">
  <div class="form-group">
    <input type="text" id= "version_number" class="form-control" placeholder="Place version number">
  </div>
</form>

I want to get the input value, my .js file: var version_picked = $("#version_number").val();

I want to use this version_picked string in a function similar to the next [full code]:

var defau;
var version_picked;

$(document).ready(function(){
    $('#formversion').on('submit', function() {
        version_picked = $("#version_number").val(); 
        defau = version_picked;
        console.log("here",defau);
        return false;
    });

    var p1 = $.ajax({
        "url":"https://www.blabla.com/api/6/61fq8sx8?",
        "crossDomain":true,
        "dataType":"jsonp",
    });

    var p2 = $.ajax({
        "url":"https://www.blabla.com/api/" + defau + "/61fq8sx8?",
        "crossDomain":true,
        "dataType":"jsonp",
    });

    Promise.all([p1,p2])
    .then(function(results){
        // console.log(results[1]); //Sat Jan 16 2016 07:12:47 GMT+0000 (UTC)
        var thisversion = results[1].version; //get the version of the second url/column
        var res_today = results[0].results;
        var res_otherdate = results[1].results;
        var date_today = res_today.collection1[0].date;
        var date_other = res_otherdate.collection1[0].date;
        var collection_today = results[0].results.collection2;
        var collection_otherdate = results[1].results.collection2;
        $(".table-group1").append('<tr>'+'<td class=well"></td>'+ 
            '<td class=well">'+ date_today.substr(56,60) +'</td>'+ 
            '<td class=well">' + date_other.substr(56,60) +'</td>' + 
            '<td class=well">'+ "DNS_1" +'</td>' + 
            '<td class=well">'+ "DNS_2" +'</td>' + 
            '<td class=well">'+ "Mail_1" +'</td>'+
            '<td class=well">'+ "Mail_2" +'</td>'+
            '<td class=well">'+ "Web_1" +'</td>' + 
            '<td class=well">'+ "Web_2" +'</td>' + '</tr>');
        for (var i = 1; i < collection_otherdate.length; i++){ 
            $(".table-group1").append('<tr>' + '<td class="well">' + i + '</td>' +'<td class="well">' + collection_today[i].domain.href + '</td>' + '<td class="well" id="domain1">' + 
                collection_otherdate[i].domain.href + '</td>'+ '<td class="well" >' + collection_today[i].dns + '</td>' + '<td class="well">' + 
            collection_otherdate[i].dns + '</td>' + '<td class="well">' +
            collection_today[i].mail + '</td>' + '<td class="well">' + 
            collection_otherdate[i].mail + '</td>' + '<td class="well">' + 
            collection_today[i].web + '</td>' +  '<td class="well">' +
            collection_otherdate[i].web + '</td>' +'</tr>');     
        }
    })
});

Can you just add the lookup right inline instead of assigning a variable? `"url":"https://www.blabla.com/api/"+ $('#version_number').val()+ "restofurl"` — Damon, Jan 28 '16 at 18:38
hmmm i could try that! as it is now, version_picked is " " :( — user65165, Jan 28 '16 at 18:39
so you get a url like `/api/ /restofurl` or `/api/undefined/restofurl`? — Patrick Evans, Jan 28 '16 at 18:40
@user65165: I reopened, but you might want to read this Q&A for another problem you might have: http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Andrew Whitaker, Jan 28 '16 at 18:41
When does this code get executed? Is it in an event handler somewhere? Or is that what you're trying to figure out - how to execute the code when a value has been entered? — Peter, Jan 28 '16 at 18:42
You don't set version_picked until your ajax requests are done, how do you expect to use it in order to make the ajax calls in the first place — Patrick Evans, Jan 28 '16 at 18:46
alright, ive added a sort of placeholder variable. so that i can change that one. when the user inputs. — user65165, Jan 28 '16 at 18:51

score 0 · Answer 1 · answered Jan 28 '16 at 19:05

0

You are using 'jsonp' for your ajax call. The server side code should track queryString["callback"] in the url as the function name, and wrap the result into the argument of that function. Then you can return the function. Example:

string result = ....
return queryString["callback"] + "(" + result + ")"

answered Jan 28 '16 at 19:05

Z.Z.

674
6
16

im having trouble with 1) accessing the inputted value/text 2) getting that input in the url (the second one is not a problem right now because the first one isnt working yet so) – user65165 Jan 28 '16 at 19:45
1

Sorry. Totally misunderstood. I noticed there is space between id= and "version_number" in your input tag. The might be the reason $("#version_number").val() not working – Z.Z. Jan 28 '16 at 19:52
no worries. thanks for catching that... it still seems to not be the problem. but wll keep trying stuff :) thanks – user65165 Jan 28 '16 at 19:59
Is there another input tag with same id? Then JQuery might only see the first one. Maybe you could try var version_picked = $("#formversion #version_number").val()? – Z.Z. Jan 28 '16 at 20:10
i keep getting undefined.. :( – user65165 Jan 28 '16 at 20:15

get input from form and use it in url for ajax call

1 Answers1