CODEWITHSUNDEEP
javascriptjqueryjsonforms
elksie5000
elksie5000

Reputation: 7752

Form results immediately overwritten with jQuery

I'm trying to create a simple for that replaces keywords in a document, but I'm struggling with the basic input.

Essentially, I've used jQuery's ajax function to pull in the contents of a Google spreadsheet which I then want to use as a source for keywords to change.

I've then tried to connect an HTML up to jQuery so someone could paste in some text on which to do the work.

The problem is that as soon as I paste in some copy and then click submit, it appears briefly and then the HTML resets. What have I done wrong?

You can find the code here: http://jsbin.com/IMIwabe/1/edit?html,console,output

<title>Test Form</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    #results_box {
        border: red 5px solid;
                }

    #place {
        border: #cccccc 1px solid;

    }           
</style>
<script type="text/javascript">
$(document).ready(function() {
    var json_source = "https://spreadsheets.google.com/feeds/list/0ApL1zT2P00q5dG1wOUMzSlNVV3VRV2pwQ2Fnbmt3M0E/od7/public/basic?alt=json";
    var json_data = $.ajax({

        dataType: 'jsonp',
        url: json_source,
        success: function(data){
            //for (i=0; i<data.feed.entry.length; i++){
            //  $('#results_box').append(data.feed.entry[i].title['$t']);
            //} 
            json_data = data.feed.entry;
            return json_data;

        },      

        error: function(jqXHR, textStatus, errorThrown){ 
                        $('#results_box').html('<h2>Something went wrong!</h2><p><b>' + textStatus  + '</b> ' + errorThrown  + '</p>');
        }
    }); 

    $(':submit').click(function(){
        //function convert text box postcode into lat long
        if ($('#place').val() !=''){
            var copy_string = $('#place').val();
            $('#results_box').html(copy_string);
        }  

    }); 

});//document ready end 
</script>
</head>

<body>
    <div id="wrapper">
    <div id="query_box" class="panel">  
  <form id="form_submit"><h4>Copy to process:</h4>
    <textarea id="place"></textarea>
    <input type="submit" value="Go" />

  </form>
</div>
<div id="results_box" >Results will appear here</div>  
</div>



</body>
</html>

Upvotes: 0

Views: 88

Answers (4)

OlivierH
OlivierH

Reputation: 3890

Change 

$(':submit').click(function(){
            //function convert text box postcode into lat long
            if ($('#place').val() !=''){
                var copy_string = $('#place').val();
                $('#results_box').html(copy_string);
            }  

        });

To something like that

<input type="submit" value="Go" onclick = "convertTextBox(); return false;"/>

And in your js : 

function convertTextBox(){
                //function convert text box postcode into lat long
                if ($('#place').val() !=''){
                    var copy_string = $('#place').val();
                    $('#results_box').html(copy_string);
                }  

            });

See the return false after the call of the convertTextBox() function, it prevents your form from being really submitted, reloading the webpage with form parameters.

Upvotes: 1

Slaven Tomac
Slaven Tomac

Reputation: 1550

You should prevent default in your click event because GO is submit button and it will try to submit entire form:

$(':submit').click(function(event){
    //function convert text box postcode into lat long
    if ($('#place').val() !=''){
        var copy_string = $('#place').val();
        $('#results_box').html(copy_string);
         event.preventDefault();
    }  

});

Upvotes: 2

Liam
Liam

Reputation: 29694

You need to return false from your submit to prevent the submit from actually firing. Your click event is firing but then the form is getting submitted, resetting the page.

$(':submit').click(function(){
    //function convert text box postcode into lat long
    if ($('#place').val() !=''){
        var copy_string = $('#place').val();
        $('#results_box').html(copy_string);
    }  
    return false;
});

You could also use preventDefault but return false does effectively the same thing.

Upvotes: 2

Sridhar R
Sridhar R

Reputation: 20418

Try this

$('#te').click(function(){
            //function convert text box postcode into lat long
            if ($('#place').val() !=''){
                var copy_string = $('#place').val();
                $('#results_box').html(copy_string);
            }  

        }); 

    });//document ready end 
    </script>
</head>

<body>
    <div id="wrapper">
    <div id="query_box" class="panel">  
      <form ><h4>Copy to process:</h4>
        <textarea id="place"></textarea>
        <input id="te" type="button" value="Go" />

      </form>
    </div>
    <div id="results_box" >Results will appear here</div>  
    </div>

Upvotes: 1

Related Questions