transfer data from javascript popup multiline textbox to a select control - javascript

I am trying to transfer data from a multiline textbox to a select control.
The multiline textbox appears as a popup and I want all the records pasted in the textbox to be transferred to the select control once the user will click submit in the popup window.
Probably with jquery or javascript, or maybe something else. The page is built in MVC3 Razor.
Here is the code from the page:
The script for the popup control:
<script type="text/javascript">
$(function () {
$("a[id^=opener]").click(function () {
$("#dialog").dialog('destroy');
$("#dialog").attr("title", "Please paste your products")
.html("<p><textarea name=\"TextMessage\" rows=\"10\" cols=\"72\" /><br /><input type=\"submit\" value=\"Submit\" /></p>");
$("#dialog").dialog({
height: 420,
width: 650,
modal: true
});
});
});
</script>
The .cshtml page:
#using (Html.BeginForm("ASPXView", "Report", FormMethod.Post)) {
#Html.ValidationSummary(true, "Password change was unsuccessful. Please correct the errors and try again.")
<div>
#Html.Hidden("Id", Model.Report.Id)
<div id="accordion">
#{int i=0;}
#foreach (var item in Model.Parameters)
{
<h3>#Html.LabelFor(m => item.Name, item.Prompt)</h3>
<div>
<div class="editor-label">
Search #*Html.TextBox("Search")*#
<input id="#("Search" + item.Name)" type="text" name="q" data-autocomplete="#Url.Action("QuickSearch/" + item.Name, "Report")" />
</div>
<div class="editor-field">
<select multiple id="#("Select" +item.Name)" name="#("Select" +item.Name)"></select>
</div>
<div class="removed" style="clear:both; float:left; margin-left:440px;">
Remove selection
<a id= "opener#(i)" class="OpenDialogClass" href="#" >Open Dialog</a>
</div>
</div>
i++;
}
</div>
<p style="text-align: right">
<input type="submit" value="Generate Report" />
</p>
</div>
}
<div id="dialog" title="Basic dialog">
</div>
Screenshot from the page:
So the data which will be pasted in the popup textbox, I would like to have it in the select control once the submit button is clicked.
Any idea how I can do that?
Thanks in advance, Laziale


You could serialize the contents of the textarea and then do what you need to do with it (Post it to a controller or perhaps hand it off to the underlying page somewhere)
$('form').submit(function(e){
e.preventDefault();
e.stopPropagation();
var o = {};
$( $('textarea').val().split(/\n|\r/) ).each(function(i){
o[i] = this;
});
var jsonString = JSON.stringify(o);
// DO SOMETHING WITH JSON OBJECT HERE
});​
http://jsfiddle.net/vUH3a/


This will give you a start.
$("Button Selector").click(function(){
var SelectOptions= [];
$("list Selector").each(function () {
SelectOptions.push($(this).attr('id'));
});
SelectOptions.each(function () {
//build your mark up here and return
});
});

Related

JQueryUI Sortable - new order to string

I'm using JQueryUi Sortable to sort gallery with user friendly drag and drop.
Thing im sorting looks like :
<div id="gallery"><div class="wrapper" data-id="//here is name of picture like :2017554352.jpg">
//actual picture and desc.. etc.
</div>
<div class="wrapper" data-id="//here is name of picture like :2017554352.jpg">
//actual picture and desc.. etc.
</div><div>
and here actual simple sorting script:
<script>
$( function() {
$( "#gallery" ).sortable();
});
</script>
I want to create php string by inputing data-id's of divs into hidden input in this form.
How would function what can do this looks like ?
<form name="sortForm" action="sortPics_submit.php" method="post">
<input type="hidden" id="sortOrder" name="sortOrder">
<button type="submit" class="submit3" name="submit"><span>Save&Continue...</span></button>
</form>
Thank You for any advice !

You can use the below function to concatenate all the data-id of the sortable divs in a comma separated format and then add it to the form input.
see the demo below
function getData() {
var string = '';
$("#gallery>div[data-id]").each(function() {
string += $(this).data('id') + ',';
});
return string.substr(0, string.length - 1);
}
$("#sortOrder").val(getData());
console.log(getData());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
<div class="wrapper" data-id="2017554352.jpg">
</div>
<div class="wrapper" data-id="2017550052.jpg">
</div>
</div>
<form name="sortForm" action="sortPics_submit.php" method="post">
<input type="text" id="sortOrder" name="sortOrder">
<button type="submit" class="submit3" name="submit"><span>Save&Continue...</span></button>
</form>

How not to lose Div focus when inside button is clicked

Below is my HTML and js code, i want when write_post_text (id) get focus then write_post_upload (id) div should show and when write_post_container (id ) div lose the foucus then it should get hide, actually its working fine but the problem is. when user click the upload_post_img (id) button then it lose focus and the write_post_upload got hide with slideUp function but when. I want to keep the focus even when this button is clicked.
<div class="upload_post" id="write_post_container" tabindex='-1'>
<form method="post">
<div class="upload_div">
<textarea class="form-control" rows="1" cols="30" id="write_post_text" placeholder="Write what in your mind"></textarea>
</div>
<div class="upload" id="write_post_upload">
<input type="hidden" name="post_img">
<ul>
<li><button type="button" id="upload_post_img"><i class="fa fa-camera" ></i>Image</button></li>
</ul>
<input type="file" name="file" id="bTimelineFile" onchange="readURL(this);" />
<div class="post">
<button>Post</button>
</div>
</div>
</form>
Here is my JS code :
<script type="text/javascript">
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
$("#write_post_upload").slideUp();
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
</script>

you can create a variable and change it whenever Choose file is clicked
like this
don't forget to reset it
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
var blur = false;
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
if(!blur){
$("#write_post_upload").slideUp();
}
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
$("#bTimelineFile").click(function () {
blur = true;
});

ASP .NET MVC cannot submit form with jQuery/JavaScript

I need your help. I am trying to realize a live search. So whenever I switch from one TextBox to another, a form should be submitted, to update the URL and to pass the data to the controller. It works perfectly fine when I click the submit button but it does not work the way I want.
Here is my code:
Controller:
public ActionResult Index(string number, string caption)
{
//Fetch data from the database
return View();
}
View:
$(document).ready(function () {
$('#number').change(function () {
$('#filter').submit();
});
});
#using (Html.BeginForm("Index", "Home", FormMethod.Get, new { id = "filter" }))
{
<div class="row">
<div class="col-sm-2 checkbox">
Number:
</div>
<div class="col-sm-3">
#Html.TextBox("Number", "", new { #class = "form-control", type = "text", id = "number" })
</div>
</div>
<div class="row">
<div class="col-sm-2 checkbox">
Caption:
</div>
<div class="col-sm-3">
#Html.TextBox("Caption", "", new { #class = "form-control", type = "text", id = "caption" })
</div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-2">
<button type="submit" id="submit" class=" btn btn-block btn-primary">Search</button>
</div>
</div>
}
Output HTML:
<script>
$(document).ready(function () {
$('#number').change(function () {
$('#filter').submit();
});
});
</script>
<form action="/" id="filter" method="get"> <div class="row">
<div class="col-sm-2 checkbox">
Number:
</div>
<div class="col-sm-3">
<input class="form-control" id="number" name="Number" type="text" value="">
</div>
</div>
<div class="row">
<div class="col-sm-2 checkbox">
Caption:
</div>
<div class="col-sm-3">
<input class="form-control" id="caption" name="Caption" type="text" value="">
</div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-2">
<button type="submit" id="submit" class=" btn btn-block btn-primary">Search</button>
</div>
</div>
Browser Console:
Uncaught TypeError: elem[type] is not a function
at Object.trigger (http://localhost:49782/Scripts/jquery-1.8.2.js:2991:18)
at HTMLFormElement.<anonymous> (http://localhost:49782/Scripts/jquery-1.8.2.js:3618:17)
at Function.each (http://localhost:49782/Scripts/jquery-1.8.2.js:625:20)
at init.each (http://localhost:49782/Scripts/jquery-1.8.2.js:255:17)
at init.trigger (http://localhost:49782/Scripts/jquery-1.8.2.js:3617:15)
at init.jQuery.fn.(anonymous function) [as submit] (http://localhost:49782/Scripts/jquery-1.8.2.js:3671:9)
at HTMLInputElement.<anonymous> (http://localhost:49782/:63:26)
at HTMLInputElement.dispatch (http://localhost:49782/Scripts/jquery-1.8.2.js:3077:9)
at HTMLInputElement.eventHandle (http://localhost:49782/Scripts/jquery-1.8.2.js:2695:28)

Your JavaScript code is looking for the tag with ID #number. Because browsers mostly read the source code from the top to the bottom, the code will be evaluated well before the #number <input> is even declared. This means that jQuery will not find it and will therefore not attach the event. If you move the script after the HTML, or wrap it into document.ready, it will work as expected:
$(document).ready( function() {
$('#number').change(function () {
$('#filter').submit();
});
} );
//or simpler equivalent
$( function () { ... } );
This however will still not work as you want, because each time the input changes, the whole page will be posted back to the server, so user will have to wait for the entire page to reload after he tries to switch focus from one input to another. This is not very convenient and you would probably be better off changing the logic to use AJAX calls and dynamically update the search results. Although it is not a requirement, it is a nice to have and user-friendly approach :-) .
Update - solution to submit error
I have just found the solution for the error you get trying to submit. Your submit button's id is submit. This is not "wrong" per se, but it causes a problem trying to submit with jQuery. You see, because the button is inside your form, when jQuery returns the #filter form, when you try to use submit() on it, JavaScript finds your submit button in scope and thinks that you want to "call it" - hence you get the error, because you you cannot "call" an element. This might also happen if you use submit as the name of a button.
The best and easiest solution for you will be to change the id to something else:
<button type="submit" id="submitButton" class=" btn btn-block btn-primary">Search</button>

In modern browsers use the input event. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.
$('#number').on('input', function() {
$('#filter').submit();
});

It's working fine for me I hope it also working for u
C# Code:
[HttpPost]
public ActionResult Index(string firstname)
{
return Json("Done");
}
Razor Code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var abc = document.getElementById('Number');
abc.onchange = (function () {
document.forms[0].submit();
});
});
</script>
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id= "filter" }))
{
<div class="row">
<div class="col-sm-2 checkbox">
Number:
</div>
<div class="col-sm-3">
#Html.TextBox("Number", "", new { #class = "form-control", type = "text", id = "Number" })
</div>
</div>
<div class="row">
<div class="col-sm-2 checkbox">
Caption:
</div>
<div class="col-sm-3">
#Html.TextBox("Caption", "", new { #class = "form-control", type = "text", id = "caption" })
</div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-2">
<button type="submit" id="submit1" class=" btn btn-block btn-primary">Search</button>
</div>
</div>
}
Do Not use submit as id or name of button it override the meaning of Java Script submit Method

Function saves and prints only one value from array. how it can be fixed?

I have got a function which allows me to save droped items for a loop inside form. Here is sample with two processes. What i want to do is to print saved values on the next page after submitting the form.
So again main idea, is that after choosing number of processes on first form user proceeds to the second form where he can drop items for each row in the loop. Then he can submit it by pressing save button and system should print saved values for each process.
I found a way to break an array for each process by using this:
var LISTOBJ = {
saveList: function() {
$(".proc").each(function() {
var listCSV = [];
$(this).find("li").each(function(){
listCSV.push($(this).text());
});
$("#output").append("<p>"+listCSV.join(", ")+"</p>");
//$(".hiddenListInput").val(listCSV);
console.debug(listCSV);
});
}
}
And its working fine, it prints a list of saved values for each process, however when I am trying to print it on the new page after submitting form using $(".hiddenListInput").val(listCSV); it displays only last saved value.
Here is my form:
<form class="formcss" method="POST" action="test2.php">
<?php
$len=2;
for($y=0;$y<$len;$y++)
{
?>
<div class='proc'>
<label>Process:</label>
<span> </span>
<br />
<div class="leader">
<label>Leader:</label>
<div class="ui-widget-content">
<div class="projLeader">
<ol>
<li class="placeholder" name="leader[]"></li>
<input type="hidden" name="leader[]" class="hiddenListInput" />
</ol>
</div>
</div>
</div>
</div>
<?php
}
?>
<div class="row">
<input type="submit" id="savebutton" style="margin-top:25px;" name="submit" class="button" value="Save" onclick="userSubmitted = true;" />
</div>
<div id="output"></div>
</form>
And test2.php where i want to print saved array:
$procleader=$_POST['leader'];
print_r ($procleader);

Ok, I added hidden input into the function and it helped me. Here is what i did:
var LISTOBJ = {
saveList: function() {
$(".proc").each(function() {
var listCSV = [];
$(this).find("li").each(function(){
listCSV.push($(this).text());
});
var values = '"'+listCSV.join('","')+'"';
$(".procChecker").append("<input type='hidden' name='prodstuff[]' value='+values+' />");
$("#output").append("<p>"+values+"</p>");
console.debug(listCSV);
});
}
}
And fiddle

Popup box doesn't return a value when click ok

Im working with Asp .net MVC3.I'm using text box in viewpage when focusing on a text box popup window will open which contains a textarea and ok button.when click ok populated in viewpage textbox and popup page has to be hided.im using following code,
<input type="text" id ="Comments" class="Comments" value= "value"/>
<div id="popup">
<input type="text" id="content" style="width:243px;height:150px" maxlength="250" cols="70" rows="50"></input>
<input id="popupok" type="Button" value="Ok" />
<input id="popupclose" type="Button" value="Close"/>
</div>
and following is the Jquery,
$(function () {
$('.Comments').focus(function(){
$('#popup').show("slow");
});
$('#popupclose').click(function () {
$('#popup').hide("slow");
});
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").Val()=thought;
$('#popup').hide("slow");
});
});
Im not getting the Content value on the thought variable when click ok.what is wrong in thie above code.some one please help on this

Try this,
$('#popupok').click(function () {
var thought = $("#content").val();
$(".Comments").val(thought); // val function need an argument to set value
$('#popup').hide("slow");
});
Live Demo

Categories

Resources