I have a web form with radio buttons and a input field for autocomplete. Based on the selected radio button a different webservice (url) needs to be called to work with the data that the user is entering in input field.
The following code works well, but I don't know how to make it more flexible to accept different URL's.
$("#txtCriteria").autocomplete({
source: function (request, response) {
$.ajax({
async: false,
delay: 500,
url: "../../CommonWebServices/wsEntity.asmx/ReportBuildings",
data: "{ 'Name': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.Text,
value: item.Value
} // end of return
})) // end of response
} // end of success
}); // end of ajax
}, // end of source
minLength: 1,
});
Here are the radio buttons. So If I select Region the webservice URL is different then the Building.
<input id="Radio1" type="radio" value="S" name="rblRptChoice" class="label" checked="checked" />State Wide<br />
<input id="Radio2" type="radio" value="P" name="rblRptChoice" class="label" />Prosperity Region<br />
<input id="Radio3" type="radio" value="R" name="rblRptChoice" class="label" />Region<br />
<input id="Radio4" type="radio" value="T" name="rblRptChoice" class="label" />Cluster<br />
<input id="Radio5" type="radio" value="C" name="rblRptChoice" class="label" />CEPD<br />
<input id="Radio6" type="radio" value="F" name="rblRptChoice" class="label" />Fiscal Agency<br />
<input id="Radio7" type="radio" value="B" name="rblRptChoice" class="label" />Building<br />
<input id="Radio8" type="radio" value="P" name="rblRptChoice" class="label" />CIP Code<br />
<input id="Radio9" type="radio" value="Y" name="rblRptChoice" class="label" />Year<br /><br />
<asp:Label ID="lblDetails" runat="server" Text="Enter Details"></asp:Label><br />
<input id="txtCriteria" type="text" placeholder="Enter Criteria" style="width:250px" />
Any assistance is appreciated.
I put the path value in a variable when the radio button is selected and then set the url to the variable.
Related
here is my code
this is simple form. I am trying to call on click event on button click
render: function () {
return (
<form className="commentForm">
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
You forgot to pass the onSubmit event for form
render: function () {
return (
<form className="commentForm" onSubmit={this.submit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
submit: function() {
// do your stuff
}
try this:
<form className="commentForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
Can you try like this
handleTextChange(e) {
const { name, value } = e.target;
this.setState({
[name]: value
});
}
_handleSubmit(e) {
e.preventDefault();
let { author, text} = this.state;
// dispatch the submit function
}
render: function () {
return (
<form className="commentForm" onSubmit={this._handleSubmit}>
<input
type="text"
placeholder="Your name"
name="author"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
name="text"
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Post" />
</form>
);
u want onclick method here it is onsubmit same work of onclick.
handleSubmit(){
console.log(this.state.author);// u can see the value of autor and say somthing input vale in here it is coming right value or not
console.log(this.state.text);
axios.post(route,{
name:this.state.author, //these name and say are the variable whice are use to take the values to back end
Say :this.state.text
}).then({response}); //here u cn give some thing to disply after data add to database.
}
<form className="commentForm" onsubmit={this.handleSubmit.bind(this)}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange}
/>
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange}
/>
<input type="submit" value="Submit" />
</form>
You need not have separate onChange for two fields unless you do something different in each of them.
Render:
<form className="commentForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
name="author"
onChange={this.handleChange}
/>
<input
type="text"
placeholder="Say something..."
name="text"
onChange={this.handleChange}
/>
<button type="submit" >submit</button>
</form>
When submit is clicked :
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state.author) //whatever you want to process the data with...
}
You can have single handleChange to set the state
handleChange = (e) => {
const { value, name } = e.target;
this.setState({ [name]: e.target.value })
}
Below is a group of radio buttons that appear on my view. I am able to retrieve the selected item via this simple code
string criteria = filter["criteria"];
however I do not know how to retain the selected item. Once the controller posts back to the view the default radio button is always selected.
<form method="post">
#Html.TextBox("searchValue", ViewBag.CurrentFilter as string, new { placeholder = "Search" })
<input type="image" src="#Url.Content("~/Content/Images/Filter.bmp")" alt="Filter" style="padding-top: 0px;" />
<span class="error" style="clear: both;">
#ViewBag.ErrorMessage
</span>
<br />
<br />
<input type="radio" name="criteria" id="bankName" value="bankName" checked="true"/>
<label for="bankName">Bank Name</label>
<input type="radio" name="criteria" id="EPURL" value="EPURL" />
<label for="EPURL">EPURL</label>
<input type="radio" name="criteria" id="specialNotes" value="specialNotes" />
<label for="SpecialNotes">Special Notes</label>
<input type="radio" name="criteria" id="email" value="email" />
<label for="email">Email</label>
<input type="radio" name="criteria" id="dynamicsId" value="dynamicsId" />
<label for="dynamicsId">Dynamics ID</label>
<input type="radio" name="criteria" id="stat" value="stat" />
<label for="fixed">Agent ID </label>
</form>
The answer to this question wound up being incredibly simple. First mistake I made was not using the #Html controls. Second was using FormCollection as an input parameter for the index controller. By changing the radio buttons to the following:
#Html.RadioButton("criteria", "bankName", true)<span>Bank Name</span>
#Html.RadioButton("criteria", "EPURL")<span>EPURL</span>
#Html.RadioButton("criteria", "specialNotes")<span>Special Notes</span>
#Html.RadioButton("criteria", "email")<span>Email</span>
#Html.RadioButton("criteria", "dynamicsId")<span>Dynamics ID</span>
#Html.RadioButton("criteria", "stat")<span>Agent ID</span>
and the signature of the Index method in the controller to this:
public ActionResult Index(string criteria, string searchValue)
The selected radio button stayed selected after the post back.
If I understand your need correctly you could set the name of the item you want checked in the ViewBag (or ViewData or Model) and set the checked property in your view accordingly. Something like this:
<form method="post">
#Html.TextBox("searchValue", ViewBag.CurrentFilter as string, new { placeholder = "Search" })
<input type="image" src="#Url.Content("~/Content/Images/Filter.bmp")" alt="Filter" style="padding-top: 0px;" />
<span class="error" style="clear: both;">
#ViewBag.ErrorMessage
</span>
<br />
<br />
#{
var checkedItemName = ViewBag.CheckedItemName;
}
<input type="radio" name="criteria" id="bankName" value="bankName" checked="#((checkedItemName == "bankName"))"/>
<label for="bankName">Bank Name</label>
<input type="radio" name="criteria" id="EPURL" value="EPURL" checked="#((checkedItemName == "EPURL"))"/>
<label for="EPURL">EPURL</label>
<input type="radio" name="criteria" id="specialNotes" value="specialNotes" checked="#((checkedItemName == "specialNotes"))"/>
<label for="SpecialNotes">Special Notes</label>
<input type="radio" name="criteria" id="email" value="email" checked="#((checkedItemName == "email"))"/>
<label for="email">Email</label>
<input type="radio" name="criteria" id="dynamicsId" value="dynamicsId" checked="#((checkedItemName == "dynamicsId"))"/>
<label for="dynamicsId">Dynamics ID</label>
<input type="radio" name="criteria" id="stat" value="stat" checked="#((checkedItemName == "stat"))"/>
<label for="fixed">Agent ID </label>
</form>
Don't refresh the complete page...Use JQuery and do an Ajax call
$.ajax({
url: "Your Url",
async: true,
type: 'POST',
data: JSON.stringify({ ParameterName: Param_Value }),
beforeSend: function (xhr, opts) {
},
contentType: 'application/json; charset=utf-8',
complete: function () { },
success: function (data) {
//Success Callback
//Code to set value to your control
}
});
On my form I have several hidden fields with the same name (RemoveId)
<input type="hidden" value="1" name="RemoveId" />
<input type="hidden" value="2" name="RemoveId" />
<input type="hidden" value="3" name="RemoveId" />
<input type="hidden" value="4" name="RemoveId" />
<input type="hidden" value="5" name="RemoveId" />
I would like to pass checked items (int(s)) to a controller via ajax/json
How would i do it?
thanks
here is something that should help
Using getElementsByName on the name "RemoveId" will give you an array
var list = document.getElementsByName("RemoveId");
var arrId = [];
for (var i = 0; i < list.length; i++) {
arrId.push(list[i].value);
}
Pass this list of id's prepared to the controller
$(function(){
$.ajax({
type: "POST",
url: "#Url.Action("PostArray")" %>",
data: {idArray: arrId},
dataType: "json",
success: function(msg){console.log(msg)}
});
})
and here is how your controller should look like
[HttpPost]
public ActionResult PostArray(int[] idArray)
{
// do your thing..
}
Try to do this:
<input type="hidden" value="1" name="RemoveId" />
<input type="hidden" value="2" name="RemoveId" />
<input type="hidden" value="3" name="RemoveId" />
<input type="hidden" value="4" name="RemoveId" />
<input type="hidden" value="5" name="RemoveId" />
<input type="button" value="do" class="send" />
<script type="text/javascript" >
$(function () {
$(".send").click(function () {
var myValues = [];
$("[name = 'RemoveId']").each(function (index, element) {
myValues.push($(element).val());
});
$.ajax({
type: "POST",
url: "/Home/Method",
data: { myValues: myValues }
});
});
})
</script>
[HttpPost]
public ActionResult Method()
{
var b = Request["myValues[]"].Split(',').ToList();
return null;
}
Gidday
Just learning the jquery UI, and have made some really good progress today, but have got stumped when figuring out how to get the ID of the selected button in a buttonset before the form is submitted.
I know how to make the AJAX POST work once I get the ID of the selected button.
How is the first part done?
Here's my jquery:
$( "#pi" ).buttonset();
$( "#req1" ).dialog({
resizable: false,
height:350,
minWidth: 310,
modal: true,
buttons: {
"Send request": function() {
//what goes here to retrieve the ID of the selected button?
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
And my form...
<div id="req1" title="make your selection:">
<form>
<div id="pi">
<input type="radio" id="p1" name="pi" /><label for="p1">3</label>
<input type="radio" id="p2" name="pi" /><label for="p2">2</label>
<input type="radio" id="p3" name="pi" /><label for="p3">1</label>
<input type="radio" id="p4" name="pi" checked="checked" /><label for="p4">0</label>
<input type="radio" id="p5" name="pi" /><label for="p5">1</label>
<input type="radio" id="p6" name="pi" /><label for="p6">2</label>
<input type="radio" id="p7" name="pi" /><label for="p7">3</label>
</div>
Thanks for your time and help.
Try this:
var id = $('#pi input[name=pi]:checked').attr('id');
Hello i want to create a popup with Jquerymobile.
in my application i have one question and three answer options. If the user click on one answer then it should appear a popup: for the right answer : This is right. And for the wrong answers: This is wrong.
3 answer option, two are wrong and one is right.
Could somebody help me?
<fieldset data-role="controlgroup">
<legend>
Question?
</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Körpergewicht / (Körpergröße)2</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">(Körpergewicht) / Körpergröße 2</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Körpergewicht / (Alter)2</label>
</fieldset>
prüfen
<script type="text/javascript">
$(document).ready(function() {
$(document).delegate('#popupbut', 'click', function() {
alert($("input[name='radio-choice-1']:checked").val());
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Falsch',
headerClose: true,
blankContent :
'<p><br /><br />This is wrong.</p>'
})
});})
</script>
This should resolve your problem.
$(document).ready(function () {
$(document).delegate('#popupbut', 'click', function () {
var content = '';
var headerText = '';
if ($("input[name='radio-choice-1']:checked").val() == 'choice-1') {
content = '<p><br /><br />Right!.</p>'
headerText = 'Right';
} else {
content = '<p><br /><br />Wrong!.</p>'
headerText = 'Wrong';
}
$('<div>').simpledialog2({
mode: 'blank',
headerText: headerText,
headerClose: true,
blankContent: content
});
});
});