How To Get Multi Inputs Value And Save To Db?
this is my Input Generator:
<div class="form-group input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-add">
+
</button>
</span>
</div>
and Jquery Codes:
<script>
(function ($) {
$(function () {
var addFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $formGroupClone = $formGroup.clone();
$(this)
.toggleClass('btn-default btn-add btn-danger btn-remove')
.html('–');
$formGroupClone.find('input').val('');
$formGroupClone.insertAfter($formGroup);
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', true);
}
};
var removeFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', false);
}
$formGroup.remove();
};
var countFormGroup = function ($form) {
return $form.find('.form-group').length;
};
$(document).on('click', '.btn-add', addFormGroup);
$(document).on('click', '.btn-remove', removeFormGroup);
});
})(jQuery);
</script>
the code generate Several Input text By push on the + Button.
Question:
how to get values all inputs?
in razor page and input model class?
if this is only One Input i can do it.but several input that genereted by javascript i tired to this action!
Question: how to get values all inputs? in razor page and input model class?
Since you use $formGroup.clone(), you could simply apply same name attribute on all inputs and save it as List<string> in PageModel. For example：
1.page.cshtml
#model TestInputModel
<form method="post">
<div class="form-group input-group">
<input type="text" class="form-control" name="MyAllInputs">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-add">
+
</button>
</span>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</form>
#section Scripts{
<script>...</script>
}
2.PageModel
public class TestInputModel : PageModel
{
//using your db context by DI
private readonly MyApplicationDbContext _context;
public TestInputModel(MyApplicationDbContext context)
{
_context = context;
}
//bind your all inputs' values
[BindProperty]
public List<string> MyAllInputs{ get; set; }
public void OnGet()
{
}
public void OnPost()
{
//logic to save you input values to dbcontext
var data = MyAllInputs;
//...
}
}
Related
This is the button that needs to change color when click. This is from a Razor page. I have tried the javascript code but it gives an error when I put in & I tried css code too(focus & active), didn't work. I'm new to this code. Please help. I just want something like this
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="outline-color:red" #onclick="() => UpdateTheChart(11)">#Language.T35</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(12)">#Language.T36</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(13)">#Language.T37</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group">
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(21)">#Language.T138</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(22)">#Language.T38</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(23)">#Language.T39</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(24)">#Language.T40</button>
</div>
</div>
</div>
</div>
This is the full code here. Im new with this code. Please tell me how to put a js code without error ( error no component )
#page "/results"
#inject Blazored.LocalStorage.ISyncLocalStorageService localStore
#inject IJSRuntime JSRuntime;
#inject Toolbelt.Blazor.I18nText.I18nText I18nText
<h1>#Language.T8</h1>
<div>
<div class="row">
<div class="column" id="chartColumn" style="width:80%;text-align:center">
<canvas id="myChart"></canvas>
</div>
<div class="column" style="width:20%;text-align:center;font-size:1.5vw">
<br />
<br />
<br />
<br />
<span>
#ResultInText <br />
</span>
<h1 style="font-weight:bolder">#FilterSavings</h1>
<br />
<br />
<span>
#WasteTextPaper<br />
#WasteTextPlastic
</span>
#if (SelectedChartCategory == 13)
{
<br />
<br />
<br />
<br />
<br />
}
<span style="font-size:0.4vw">#DisclaimerText</span>
</div>
</div>
<hr />
<div class="row">
<div class="column" style="width:30%">
<b>#Language.T33</b>
</div>
<div class="column" style="width:70%">
<b>#Language.T34</b>
</div>
</div>
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="outline-color:red" #onclick="() => UpdateTheChart(11)">#Language.T35</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(12)">#Language.T36</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(13)">#Language.T37</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group">
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(21)">#Language.T138</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(22)">#Language.T38</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(23)">#Language.T39</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(24)">#Language.T40</button>
</div>
</div>
</div>
</div>
#code {//handles initialization
I18nText.Language Language = new I18nText.Language();
List<float> retResultMHC = null;
List<float> retResultCom = null;
string retResultMHCProduct = "";
string retResultCOMProduct = "";
double retResultCostSavings = 0;
double retResultTimeSavings = 0;
double retResultWasteReduction = 0;
double retResultWastePaper = 0;
double retResultWastePlastic = 0;
string retResultWasteFlag = "";
string retResultCostFlag = "";
string retResultTimeFlag = "";
string FilterSavings = "";
string WasteTextPaper = "";
string WasteTextPlastic = "";
string retCurrency = "";
string DisclaimerText = "";
string ResultInText = "Cost savings for all patients during a year";
int SelectedChartCategory = 11;
int SelectedChartPeriod = 24;
int CalChartPeriod = 1;
string SelectedResultFlag = "savings";
string PeriodUOM = "year";
protected override void OnInitialized()
{
InitializeLocalStorage();
if (retResultMHC != null && retResultCom != null)
{
UpdateTheChart(11);
}
}
protected override async Task OnInitializedAsync()
{
Language = await I18nText.GetTextTableAsync<I18nText.Language>(this);
ResultInText = Language.T118 + Language.T127;
}
private void InitializeLocalStorage()
{
retResultMHCProduct = localStore.GetItemAsString("Result-MHC-Product");
retResultCOMProduct = localStore.GetItemAsString("Result-COM-Product");
retResultMHC = localStore.GetItem<List<float>>("Result-MHC");
retResultCom = localStore.GetItem<List<float>>("Result-COM");
retResultCostSavings = localStore.GetItem<double>("Result-Cost-Savings");
retResultTimeSavings = localStore.GetItem<double>("Result-Time-Savings");
retResultWasteReduction = localStore.GetItem<double>("Result-Waste-Reduction");
retResultCostFlag = localStore.GetItemAsString("Result-Cost-Flag");
retResultTimeFlag = localStore.GetItemAsString("Result-Time-Flag");
retResultWasteFlag = localStore.GetItemAsString("Result-Waste-Flag");
retResultWastePaper = localStore.GetItem<double>("Result-Waste-Paper");
retResultWastePlastic = localStore.GetItem<double>("Result-Waste-Plastic");
retCurrency = localStore.GetItemAsString("CurrencyKey");
}
}
#code{//handles chart
private IJSObjectReference _jsModule;
//this will be the live code
private async Task UpdateTheChart(int clickedButton)
{
//assign the selected parameters
if (clickedButton == 11 || clickedButton == 12 || clickedButton == 13)
SelectedChartCategory = clickedButton;
else
SelectedChartPeriod = clickedButton;
if (SelectedChartPeriod == 21)
{
PeriodUOM = Language.T124;
CalChartPeriod = 365;
}
else if (SelectedChartPeriod == 22)
{
PeriodUOM = Language.T125;
CalChartPeriod = 52;
}
else if (SelectedChartPeriod == 23)
{
PeriodUOM = Language.T126;
CalChartPeriod = 12;
}
else if (SelectedChartPeriod == 24)
{
PeriodUOM = Language.T127;
CalChartPeriod = 1;
}
else
{
PeriodUOM = Language.T127;
CalChartPeriod = 1;
}
ResultInText = "";
//things to do before showing the selected chart
if (SelectedChartCategory == 11)
{
if (retResultCostFlag == "savings")
ResultInText = Language.T118 + PeriodUOM;
else
ResultInText = Language.T119 + PeriodUOM;
WasteTextPaper = "";
WasteTextPlastic = "";
FilterSavings = string.Format(retCurrency + "{0:n0}", retResultCostSavings / CalChartPeriod);
DisclaimerText = "";
}
else if (SelectedChartCategory == 12)
{
if (retResultCostFlag == "savings")
ResultInText = Language.T120 + PeriodUOM;
else
ResultInText = Language.T121 + PeriodUOM;
WasteTextPaper = "";
WasteTextPlastic = "";
FilterSavings = string.Format("{0:n0}", retResultTimeSavings / CalChartPeriod) + " " + Language.T134;
DisclaimerText = "";
}
else if (SelectedChartCategory == 13)
{
if (retResultCostFlag == "reduction")
ResultInText = Language.T122 + PeriodUOM;
else
ResultInText = Language.T123 + PeriodUOM;
WasteTextPaper = Language.T128 + string.Format("{0:n2}", retResultWastePaper / CalChartPeriod) + " " + Language.T135;
WasteTextPlastic = Language.T129 + string.Format("{0:n2}", retResultWastePlastic / CalChartPeriod) + " " + Language.T135;
FilterSavings = string.Format("{0:n2}", retResultWasteReduction / CalChartPeriod) + " " + Language.T135;
DisclaimerText = Language.T136;
}
//calling js to make the chart
_jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/MakeChart.js");
if (SelectedChartCategory == 11)
{
await _jsModule.InvokeVoidAsync("showChartCost", CalChartPeriod, Language.T131, Language.T132, Language.T133);
}
else if (SelectedChartCategory == 12)
{
await _jsModule.InvokeVoidAsync("showChartTime", CalChartPeriod, Language.T130);
}
else
{
await _jsModule.InvokeVoidAsync("ShowChartPic");
}
}
}
Are you sure you want to use Javascript? You can use variables to update properties in Blazor:
<button style="background-color:#bgcolor" #onclick=SetColor>Click</button>
#code
{
string bgcolor {get; set;} = "00f"; // (starting value)
void SetColor(){
bgcolor = "#fd7"; (will update instantly)
StateHasChanged(); // may not be required, but I'm at work right now, so can't check
}
}
Better would be to use a variable to set the CLASS of the object:
<button class="#buttonclass" #onclick=SetColor>Click</button>
#code
{
string buttonclass{get; set;} = "btn btn.primary"; // (starting value)
void SetColor(){
buttonclass= "btn btn.secondary";
StateHasChanged(); // may not be required, but I'm at work right now, so can't check
}
}
Also, it looks like you have a lot of repeated entries. In Blazor, consider having a List with all your various languages, and do this in your markup:
<div>
#foreach (item in LanguageItems){
<button class="btn btn-primary" >#item.Language</button>
}
</div>
#code
{
List<MyLanguageClass> LanguageItems {get; set;}
protected override async Task OnInitializedAsync(){
// Loadup your list of items from a database or whatever
}
}
I use css(.btn:focus) and it can work.Here is a demo:
<div>
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group">
<button type="button" class="btn btn-primary">Language.T35</button>
<button type="button" class="btn btn-primary">Language.T36</button>
<button type="button" class="btn btn-primary">Language.T37</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group">
<button type="button" class="btn btn-primary">Language.T138</button>
<button type="button" class="btn btn-primary">Language.T38</button>
<button type="button" class="btn btn-primary">Language.T39</button>
<button type="button" class="btn btn-primary">Language.T40</button>
</div>
</div>
</div>
</div>
<style>
.btn:focus {
background-color: #ff6e40;
}
</style>
result:
Ok. So what you can do in javascript is to write `document.getElementById("id of button").backgroundColor="whatever color you need to set in button"'
<button onclick="updateColor(this)">click me</button>
inside of javascript
function updateColor(btn){
btn.style.backgroundColor = 'red';
btn.style.color = 'white';
}
I'll explain what's going on here.
Inside the button the onclick attribute takes a function (or a javascript instruction) and you can pass the clicked button inside the arguments as this.
then you can modify the clicked element in javascript function.
edit:
to use JavaScript you use the script tag as follows...
<script>
// your JavaScript code
</script>
just put the above script tag at the end of the body.
It's not good to write all JavaScript code inside the html script tag.
So instead you can just add src to the script tag and link to a separate javascript file like...
<script src="./yourpath/filename.js"></script>
i have form like this:
and database like this:
id tagname
1 horor
2 race
and so far i have code like this:
<div class="form-group">
<label>Tags:</label>
<input data-role="tagsinput" type="text" name="tags" id="myBtn" class="form-control">
#if ($errors->has('tags'))
<span class="text-danger">{{ $errors->first('tags') }}</span>
#endif
</div>
<div class="form-group">
#foreach ($tags as $item)
<button type="button" onclick="myFunction()" class="btn btn-secondary btn-sm">{{$item-
>tagname}}</button>
#endforeach
</div>
<script>
function myFunction() {
document.getElementById("myBtn").value = "{{$item->id}}";
}
</script>
my controller code
public function create()
{
$tags = tag::select('id','tagname')->get();
return view('artikel.create', compact('tags'));
}
what i trying to archive is if i select button below tags input so it will appear on tags input text bar of course it will not just add 1 value but can select multiple button and make it appears on that text input and automaticaly separate by , like this:
.thnx for advance.
not using framwrok, use html javascript to show it work.
html :
<input type="text" name="tags" id="myBtn" class="form-control">
<button type="button" onclick="myFunction(this)" class="btn btn-secondary btn-sm" value='horor'>horor</button>
<button type="button" onclick="myFunction2(this)" class="btn btn-secondary btn-sm" value='race'>race</button>
<script>
function myFunction(me) {
txt = document.getElementById("myBtn").value;
if( txt == '' ) {
document.getElementById("myBtn").value = me.value;
} else {
document.getElementById("myBtn").value += ',' + me.value;
}
}
function myFunction2(me) {
txt = document.getElementById("myBtn").value;
// skip duplicate
if( txt.search( me.value ) >= 0 ) {
return;
}
if( txt == '' ) {
document.getElementById("myBtn").value = me.value;
} else {
document.getElementById("myBtn").value += ',' + me.value;
}
}
</script>
I'm building a small ChatHub application based on the Microsoft-Tutorial for SignalR and JavaScript.
In short: hub-messages are put in a created-on-demand (li)
For styling purposes I'm looking to add a classname to these (li), differentiating them into categories "sender" and "receiver"
Background:
Each Side of the ChatConnection has a different view. I'm still building on the logic of the texting, so this is far from flawless.
My dbo for friendstable is UserFriends, depending on which side of the friendship you are, you get a different (but mirrored) chatwindow.
Cshtml-snippet:
#foreach (var item in Model.UserFriends)
{
#if (item.FriendChatName == #User.Identity.Name)
{
<div>
<button class="open-button" onclick="openChatForm()">#item.UserChatName</button>
<div class="chat-popup" id="myChatForm" style="display:none">
<form action="/action_page.php" class="form-container">
<button type="button" class="btn cancel" onclick="closeChatForm()">#item.UserChatName</button>
<input type="hidden" id="receiverInput" value="#item.UserChatName"/>
<ul id="messagesList" class="chatmessage receiver" ></ul>
<input type="hidden" id="userInput" class="receiverInput" value="#item.FriendChatName" />
<textarea placeholder="Type message.." required style="height:32px;" id="messageInput"></textarea>
<button type="submit" asp-route-user="#User.Identity.Name" asp-route-sender="#User.Identity.Name" asp-route-receiver="#item.UserChatName" class="btn" id="sendButton">Send</button>
</form>
</div>
</div>
}
#if (item.UserChatName == #User.Identity.Name)
{
<div>
<button class="open-button" onclick="openChatForm()">#item.FriendChatName</button>
<div class="chat-popup" id="myChatForm" style="display:none">
<form action="/action_page.php" class="form-container">
<button type="button" class="btn cancel" onclick="closeChatForm()">#item.FriendChatName</button>
<input type="hidden" id="receiverInput" value="#item.FriendChatName" />
<ul id="messagesList" class="chatmessage sender" ></ul>
<input type="hidden" id="userInput" value="#item.UserChatName" />
<textarea placeholder="Type message.." required style="height:32px;" id="messageInput"></textarea>
<button type="submit" asp-area="" asp-route-user="#User.Identity.Name" asp-route-sender="#User.Identity.Name" asp-route-receiver="#item.FriendChatName" class="btn" id="sendButton">Send</button>
</form>
</div>
</div>
}
}
the ChatHub Class:
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
and the chat.js script-snippet:
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var encodedMsg = user + ": " + msg;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
connection.start().catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
I'm trying to get this kind of thing:
if (user == reciever ) {
li.className = "receiver";
}
if (user == sender) {
li.className = "sender";
}
With the help of this snippet
var sender = document.getElementById("senderInput").value;
var receiver = document.getElementById("receiverInput").value;
But when all smoothed out i get nothing but a runtime error
this is the view in two browser windows
Anybody can help me with the building of the If in the chat.Js or has other structural notes on how i would go about styling sendermessenges and receivermessages differently, would be much appreciated!
I'm back to post my solution for this problem:
#foreach (var item in Model.User.Friends)
{
<li>
<button class="open-button" onclick="openChatForm(event, '#item.Id##ChatForm')" type="button" style="max-width:200px;">#item.UserName</button>
<div class="chat-popup" id="#item.Id##ChatForm" style="display:none; width:300px; margin-left:900px;">
<div>
<form action="/action_page.php" class="form-container" style="position:absolute">
<button class="btn cancel" onclick="closeChatForm(event, '#item.Id##ChatForm')" type="button">#item.FirstName</button>
<input type="hidden" id="receiverInput" value="#item.UserName" />
<ul id="messagesList" class="chatmessage" style="max-height:600px;"></ul>
<input type="hidden" id="senderInput" value="#User.Identity.Name" />
<textarea placeholder="Type message.." required style="height:32px;" id="messageInput"></textarea>
<button type="submit" class="btn" id="sendButton">Send</button>
</form>
</div>
</div>
<script>
</script>
</li>
}
this is the chat.js
connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var encodedMsg = user + ": " + msg;
var li = document.createElement("li");
li.className += user;
var senderForSenderForm = document.getElementById("senderInput").value;
var senderForReceiverForm = document.getElementById("receiverInput").value;
var receiverForSenderForm = document.getElementById("receiverInput").value;
var receiverForReceiverForm = document.getElementById("senderInput").value;
if (senderForSenderForm === li.className ) {
li.className += " toRight";
}
if (receiverForSenderForm === li.className) {
li.className += " toLeft";
}
if (senderForReceiverForm === li.className ) {
li.className += " toRight";
}
if (receiverForReceiverForm === li.className) {
li.className += " toLeft";
}
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
connection.start().catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("senderInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
ChatHub is still the same..
In short i refactored the chatwindow to one scope,
generated (li)'s for messages and adding a class to it to finally base the styling off this className.
Styling for all friends is Okay, Chatting atm is just possible with one friend, will update when fixed!
I am using jQuery to move items from one listbox to another using "Add" / "Remove" buttons' click events. On the screen I can see items move but when I put a breakpoint in the code and examine the content after move is complete, I don't see moved item(s). This affecting server side processing since I cannot get correct data.
<div class="row" id="zip">
<div class="col-sm-10 col-sm-offset-2" style="padding-left: 0px;">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="lbxUnassignedZips">All ZIPs</label>
<asp:ListBox runat="server" ID="lbxUnassignedZips" ClientIDMode="Static"></asp:ListBox>
</div>
</div>
<div class="col-sm-2">
<div class="form-group center-block text-center" style="margin: 0 -20px;">
<div class="form-group center-block" style="padding-top: 70px">
<button id="btnAddZip" type="submit" class="btn btn-default btn-block">Add <i class="fa fa-angle-double-right"></i></button>
<button id="btnRemoveZip" type="submit" class="btn btn-default btn-block"><i class="fa fa-angle-double-left"></i> Remove</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lbxAssignedZips">Assigned ZIPs</label>
<asp:ListBox runat="server" ID="lbxAssignedZips" ClientIDMode="Static"></asp:ListBox>
</div>
</div>
</div>
<!--/.row -->
</div>
</div>
<button id="btnSubmit" class="btn btn-primary" aria-hidden="true" aria-label="Submit">Submit</button>
Javascrip/jQuery
$(document).ready(function () {
....
$('#btnAddZip').click(function () {
var selectedOptions = $('#lbxUnassignedZips option:selected');
if (selectedOptions.length == 0) {
alert("Please select option to move");
return false;
}
$('#lbxAssignedZips').append($(selectedOptions).clone());
$(selectedOptions).remove();
return false;
});
// When I examine lbxUnassignedZips content after I moved one item to it using
// this function, it still lists old items only!
$('#btnRemoveZip').click(function () {
var selectedOptions = $('#lbxAssignedZips option:selected');
if (selectedOptions.length == 0) {
alert("Please select option to move");
return false;
}
$('#lbxUnassignedZips').append($(selectedOptions).clone());
$(selectedOptions).remove();
return false;
});
});
$(document).on("click", "#btnSubmit", function (event) {debugger
var isValid = validateUpdateSubmit();
if (isValid) {
var assignedZips = $('#lbxAssignedZips option').not('option:eq(-1)').map(function () {
return this.innerHTML;
}).get().join(',');
// does not show newly added item
var unassignedZips = $('#lbxUnassignedZips option').not('option:eq(-1)').map(function () {debugger
return this.innerHTML;
}).get().join(',');
__doPostBack('btnubmit', "SaveUpdate");
$('#editModal').modal('hide');
}
else
return false;
});
Please look on below code. I have changed some jQuery code now you will have all items of listboxs
$(document).on("click", "#btnSubmit", function (event) {
var isValid = validateUpdateSubmit();
if (isValid) {
var assignedZips = [];
$('#lbxUnassignedZips').children("option").each(function () {
var $this = $(this);
assignedZips.push($this.text() + "," + $this.val());
});
alert("AssignedZips => " + lbxUnassignedZips.join());
var lbxUnassignedZips = [];
$('#lbxUnassignedZips').children("option").each(function () {
var $this = $(this);
lbxUnassignedZips.push($this.text() + "," + $this.val());
});
alert("AssignedZips => " + lbxUnassignedZips.join());
__doPostBack('btnubmit', "SaveUpdate");
$('#editModal').modal('hide');
}
else
return false;
});
Im a bit lost and figured you guys might be able to help.
What I am trying to do:
I have a form where the user will dynamically add fields and then I would like the user to submit that form and display the values on the next page. But the user has to select a dropdown to show the type of data they are submitting inside the text box. For example
--------------------------
- Drop Down -Text Box -
--------------------------
--------------------------
- INT - 123 -
--------------------------
--------------------------
- TEXT - ABC - +
--------------------------
After Form Submit:
INT - 123
TEXT- ABC
Does anyone know how I could do this?
My Code:
<div class="col-md-4">
<div class="values">
<label>Type:</label>
<form method="post" action="values.php">
<div class="form-group multiple-form-group input-group">
<div class="input-group-btn input-group-select">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="concept">int</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>int</li>
<li>text</li>
</ul>
<input type="hidden" class="input-group-select-val" name="contacts['type'][]" value="int">
</div>
<input type="text" name="contacts['value'][]" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-add">+</button>
</span>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<script>
(function ($) {
$(function () {
var addFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $formGroupClone = $formGroup.clone();
$(this)
.toggleClass('btn-success btn-add btn-danger btn-remove')
.html('–');
$formGroupClone.find('input').val('');
$formGroupClone.find('.concept').text('int');
$formGroupClone.find('.input-group-select-val').text('int');
$formGroupClone.insertAfter($formGroup);
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', true);
}
};
var removeFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', false);
}
$formGroup.remove();
};
var selectFormGroup = function (event) {
event.preventDefault();
var $selectGroup = $(this).closest('.input-group-select');
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$selectGroup.find('.concept').text(concept);
$selectGroup.find('.input-group-select-val').val(param);
}
var countFormGroup = function ($form) {
return $form.find('.form-group').length;
};
$(document).on('click', '.btn-add', addFormGroup);
$(document).on('click', '.btn-remove', removeFormGroup);
$(document).on('click', '.dropdown-menu a', selectFormGroup);
});
})(jQuery);
</script>