Jquery - Change value of Input button without displaying value - javascript

So I have a form that I am submitting and the valueof the input button is "View Insight." When I submit the form using Request, I get a nasty string in the URL like Insight=View+Insight.
What I want it to say in the URL is "Insight=Confirmed". I tried using jquery to change the value of the button and it worked but you see it changing the value in the user interface. How do I change the value of what I want without showing the user?
Here is what I have so far:
JQUERY
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#savebtn").bind("click",function(){
    $(this).val('confirmed');
  });
});
</script>
HTML
<form action="confirm4.php" method="request">
<input type="submit" name="insights" id="savebtn" value="View Insights" />
</form>

You can change the input[type=submit] to button[type=submit] like so:
<form action="confirm4.php" method="request">
<input type="hidden" name="Insight" value="Confirmed">
<button type="submit" id="savebtn">View Insights</button>
</form>

First, .bind is deprecated and you should be using .on instead.
Second, what you are looking for is
$("#savebtn").on("click",function(e){
e.preventDefault(); //stop current submission
var $this = $(this);
$this.val('confirmed'); //change the value
$this.off("click"); //unbind the handler
$this.click(); //click the button again
});

Related

how to bind bootstrap loading button success / error on form submit

I'm trying to bind a bootstrap button with loading state to a form.
I would like the button to keep the data-loading state until the form is submitted. If the form errors out the data-loading should ideally stop or display a different message.
How can I achieve this?
My code for the button:
http://www.bootply.com/128762
what would be the best approach for a form that is not ajax?
Are You looking Something Like this Below
$('#loading-example-btn').click(function () {
if($("#txt").val().length > 0)
{
var btn = $(this)
$(this).attr('value','Loading');
}
else
{
$(this).attr('value','error On Submit');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="test" id="txt">
<input type="submit" id="loading-example-btn" value="Submit" data-loading-text="Loading...">
</form>

ASP.NET MVC and Javascript - Submit button submitting form, onclick #URL.Action not firing

I have two submits, one to submit the form on page 1, the other to submit form on page 1 and redirect to form 2 on page 2.
<input type="submit" value="Submit and Add Expense" onclick="window.location.href='#Url.Action("Create", "Expense")';"/>
The issue is, when this secondary submit button is clicked it just submits the form just like the first submit button. It appears that the redirect #url.action is not firing. Thoughts?
The following code should do the trick.
<input type="submit" id="btnOne" value="One"/>
<input type="button" id="btnTwo" value="One"/>
<script>
var sample = sample || {};
sample.url = '#Url.Action("Create", "Expense")';
</script>
//you can move it to a separate file
<script>
$(function(){
$("#btnTwo").click(function(){
var form = $("form");
form.submit();
setTimeout(function() {
window.location.href = sample.url;
},100);
});
});
</script>
I wound up going the easy route of assigning value property to the button, and then checking the button value in the controller.
// View
<input type="submit" value="Submit" />
<button name="button" value="SubmitAndExpense">Submit and Add Expense</button>
// Controller
[HttpPost]
public ActionResult Create(string button)
{
if (button != "SubmitAndExpense") {...}
}

jQuery Popup submit not responding

I have created a popup which allows users to edit a value then they can submit it again
Html:
<body>
<input id="submit" type="submit" value="Submit" data-theme="b" data-icon="check" data-rel="popup"/>
<div id="success" data-role="popup">
</div>
<div id="fail" data-role="popup">
<p>Fail</p>
</div>
</body>
jQuery:
$('#submit').click(function(){
var doStuff = true;
if(doStuff === true){
$("#success").empty();
$("#success").append('<p> <input type="text" value="' + doStuff + '" /> <input type="submit" id="popupConfirm" value="Submit" /> </p>');
$("#success").popup("open");
}else{
$("#fail").popup("open");
}
});
$('#popupConfirm').click(function(){
console.log("jhasgd");
});
Currently the click is not working at all that's why I have gibberish in the console.log and also I am not sure how to get the value of the entered input.
So my question is first how can I get the submit click to work and then output what they wrote?
fiddle of the code
$(document).on('click', '#popupConfirm', function(){
console.log("jhasgd");
});
Where are you adding the jQuery code at? If you are adding it all above the HTML, it might be trying to bind the #submit input before it exists in the DOM. Can you try to wrap the code in a document ready so it won't do the click binding before the DOM gets filled up.
$( document ).ready(function()
{
$('#submit').click(function(){
console.log("clicked the button");
});
});
Edit: I just saw the comment where you figured this out above. You didn't really have a code solution provided, so I will just leave this as is.

javascript jquery carrying html form POST data

SO I have a form that look similar to
<form action="test.php" id="checksub" method="post">
<div>
<select name="mydropdown">
<option value="buy">buy</option>
<option value="sell">sell</option>
</select>
</div>
autocomplete text input that triggers "checksub"
<input type="submit" id="checksub" name="checksub" style="visibility:hidden">
<input type="submit" id="newsbutton" name="newsbutton">
</form>
<script type="text/javascript">
$('#newbutton').click(function() {
var newaction = "cantfinditems.php";
$("#checksub").prop("action", newaction);
$('#checksub').submit();
});
</script>
Now the submit button is hidden because the autocomplete triggers it anyway, but if the user cant find what they are looking for I want a button that says "cant find what your'e looking for?"
I want this button to have a different action to the form action, ie window.location = cantfinditems.php
but I also want to carry the POST data from the form ie "mydropdown".
Thank you
Ok, so you need a second button, which calls a JavaScript function. In this function, you do a number of things:
Set the action attribute of the form to your alternate action (e.g. cantfinditems.php)
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
Submit the form
$('#form_id').submit();
So a full example would be:
<script type="text/javascript">
$('#yourbuttonid').click(function() {
var newaction = "cantfinditems.php";
$("#form_id").prop("action", newaction);
$('#form_id').submit();
});
</script>

Submit form to 2 different action page

I would like to have a form that can submit to two different action pages based on a select box.
Meaning if I select in the select box Products, the action would be products.html, and if I select Users, the action would be users.html
I have found many examples that have two submit buttons, but I need only one submit button.
Any ideas on how to do it?
you can use jQuery for that ...
if selected value equals something
set form attribute action to the other thing not initial action
this is pseudo code of course ..
here is a working solution :
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#selectList").change(function(){
if($('#selectList').val() == 1){
$("#yourform").attr("action","secondaryaction");
}
});
});
</script>
</head>
<body>
<select name="dummy" id="selectList">
<option value="0">foo</option>
<option value="1">bar</option>
</select>
<form id="yourform" action="primaryaction">
bla bla
</form>
</body>
</html>
Try something like this (assuming a form named "myForm"):
document.myForm.onsubmit = function() {
if (this.mySelector.value == 'products') {
this.action = 'products.html';
}
// the "else" isn't necessary: leave it at "users.html" as a default.
};
read about new attributes
Attributes for form submission that may be specified on submit buttons. The attributes are: formaction, formenctype, formmethod, formnovalidate, and formtarget
Works in IE >= 11
my example for will be demonstrated point :
<form action="1.php">
<input type="text" >
<button value="go"> GOOOOOOOOOOOO</button>
<button value="go" formaction="2.php"> DONNNNNNNNNNNNNNNNOOOO</button>
</form>
if(condition==products)
document.forms[0].action = 'products.html;
else
document.forms[0].action = 'users.html;

Categories