kumarabinash/_form.html.erb

## _form.html.erb
<div id="wrapper">
    <div id="menu">
        <p class="welcome">Welcome, <b></b></p>
        <p class="logout"><a id="exit" href="#">Exit Chat</a></p>
        <div style="clear:both"></div>
    </div>

    <div id="chatbox"></div>

    <form id="frm1" action="">
      Message: <input type="text" name="fname" value="Donald"><br>
      <!-- <input type="submit" value="Submit"> -->
    </form>
    <button name="submitmsg" type="submit"  id="submitmsg" value="Send">Try it</button>
</div>

<p id="demo"></p>
<script>
  $(document).ready(function(){
    $("#submitmsg").on('click', function(e){
      e.preventDefault();

      var x = document.getElementById("frm1"); //This is the form, and not the value of the textbox

      var text = "";
      var i;
      for (i = 0; i < x.length ;i++) {
        text += x.elements[i].value + "<br>";
      }
      document.getElementById("chatbox").innerHTML += text;

      //Actual message is in 'text'

      $.ajax({
        url: "/messages",
        method: "post",
        data: { data_value: text },
        dataType: "JSON",
        success: function(response){
          //do something,maybe notify user successfully posted their message
        },
        error: function(error){
          console.log(error);
        }
      });
    });
  });
</script>

## application.html.erb
<!DOCTYPE html>
<html>
<head>
  <title>Attr</title>
  <%= csrf_meta_tags %>
  <%= javascript_include_tag "application" %>
</head>
<body>

<%= yield %>

</body>
</html>

## messages_controller.rb
  def create
    # debugger

    @message = Message.new(message_params)

    respond_to do |format|
      if @message.save
        format.html { redirect_to @message, notice: 'Message was successfully created.' }
        format.json { render :show, status: :created, location: @message }
      else
        format.html { render :new }
        format.json { render json: @message.errors, status: :unprocessable_entity }
      end
    end
  end
	<div id="wrapper">
	<div id="menu">
	<p class="welcome">Welcome, <b></b></p>
	<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
	<div style="clear:both"></div>
	</div>

	<div id="chatbox"></div>

	<form id="frm1" action="">
	Message: <input type="text" name="fname" value="Donald"><br>
	<!-- <input type="submit" value="Submit"> -->
	</form>
	<button name="submitmsg" type="submit" id="submitmsg" value="Send">Try it</button>
	</div>

	<p id="demo"></p>
	<script>
	$(document).ready(function(){
	$("#submitmsg").on('click', function(e){
	e.preventDefault();

	var x = document.getElementById("frm1"); //This is the form, and not the value of the textbox

	var text = "";
	var i;
	for (i = 0; i < x.length ;i++) {
	text += x.elements[i].value + "<br>";
	}
	document.getElementById("chatbox").innerHTML += text;

	//Actual message is in 'text'

	$.ajax({
	url: "/messages",
	method: "post",
	data: { data_value: text },
	dataType: "JSON",
	success: function(response){
	//do something,maybe notify user successfully posted their message
	},
	error: function(error){
	console.log(error);
	}
	});
	});
	});
	</script>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Attr</title>
	<%= csrf_meta_tags %>
	<%= javascript_include_tag "application" %>
	</head>
	<body>

	<%= yield %>

	</body>
	</html>
	def create
	# debugger

	@message = Message.new(message_params)

	respond_to do \|format\|
	if @message.save
	format.html { redirect_to @message, notice: 'Message was successfully created.' }
	format.json { render :show, status: :created, location: @message }
	else
	format.html { render :new }
	format.json { render json: @message.errors, status: :unprocessable_entity }
	end
	end
	end