How to split the Response html of ajax in jquery

Question

This code is working fine. But i could not spilt the response of html using ajax jquery. i need to split it to #div1 and #div2. Please Use "|" to split response. please explain with full code. because i don't have much knowledge about jquery.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var Names = $('#Names').val();//alert(Names);
        var ArrNames = Names.split(",");
        var Name1 = ArrNames[0];//alert(Name1);
        var Name2 = ArrNames[1];//alert(Name2);
        $("#div1").load('result.php', {
            "FirstName": Name1,
            "SecondName": Name2
        });
        return (false);
    });
});
</script>
</head>
<body>
<div style="float:left;"><b>Response Data1:</b></div><div id="div1" style="float:left;"></div><br><br><br>
<div style="clear:both;">
<div style="float:left;"><b>Response Data2:</b></div><div id="div2" style="float:left;"></div><br><br><br>
<div style="clear:both;">
<form>
<input id="Names" type="text" value="name1,name2">
<button>Event</button>
</form>
</body>
</html>

this is result.php

<?php
       $name1 = $_REQUEST['FirstName'];
       $name2 = $_REQUEST['SecondName'];

// i need to split by | this symbol;
    ?> 

<input type="text" value="This is 1st response <?php echo $name1;?>"> | This is 2nd Response <?php echo $name2;?>

this has NOTHING to do with jquery. a string is a string. just because you're using jquery doesn't magically make all javascript strings different. — Marc B, Oct 21 '16 at 16:44

Device · Accepted Answer · 2016-10-21T17:30:09.063

3

Hey once again :D here is ajax documentation http://api.jquery.com/jquery.ajax/ and some code.

<form id="form">
  <input id="Names" type="text" value="name1,name2">
  <input type="submit">
</form>


// I would use $("#form").submit(function() {}) instead of $.click()
$("#form").submit(function(){
    var Names = $('#Names').val();//alert(ArrNames);
    var ArrNames = Names.split(",");
    var Name1 = ArrNames[0];//alert(Name1);
    var Name2 = ArrNames[1];//alert(Name2);
    $.ajax({
      url: "result.php",
      method: "POST",
      data: {"FirstName": Name1, "SecondName": Name2}
    }).done(function(response) {
      var splitted = response.split("|"); // RESULT
      $("#div1").html(splitted[0]); // The first name
      $("#div2").html(splitted[1]); // The secondname
    });
});

// Also change your php to this, so it is compatible
<?php
  $name1 = $_POST['FirstName'];
  $name2 = $_POST['SecondName'];
  ...

Edit:
You can split the response (as done above) using split() function example

"name 1 | name 2".split("|") -> ["name 1 ", " name 2"]

edited Oct 21 '16 at 17:30

answered Oct 21 '16 at 16:55

Device

574
4
19

The variable splitted is the response splitted by "|" – Device Oct 21 '16 at 17:05
please split the response to #div1 and #div2 – Yaseen Ahmed Oct 21 '16 at 17:07
please use this to "|" split the response. – Yaseen Ahmed Oct 21 '16 at 17:08
Done, this is a working example. I don't really know what else do you want – Device Oct 21 '16 at 17:09
Thank lot.it is what i was looking. but the code is not working. please lookup. – Yaseen Ahmed Oct 21 '16 at 17:14
It should be workiong now, see the answer – Device Oct 21 '16 at 17:20
Btw change the method of ajax to post please, i've edited it just now in the answer. – Device Oct 21 '16 at 17:30
i have one more question here http://stackoverflow.com/questions/40190792/how-to-validate-a-forms-input-from-ajax-page-using-jquery . related same thing. please help me. – Yaseen Ahmed Oct 22 '16 at 10:05

How to split the Response html of ajax in jquery

1 Answers1