I have a simple form as
<form method="post" action="target.php">
<input class="button" type="submit" value="Submit" />
</form>
I want to read checkboxes from atable. Thus, checkbox input is outside the <form> as
<input type="checkbox" name="tick[]" value="'.$value.'" />
What is the simplest jQuery action to read the values checked and send them via POST by the form?
P.S. Since I have form for each row in the table, I cannot put the entire table within <form> tag.
Try this - I didn't test it though.
$("input[name^=tick]:checked").each(function() {
$(this).val() // this line should contain the value of each checked checkbox, you can use it as you want
});
You can get the entire for in a single object / array by using jQuery serialize() or serializeArray() method :
alert($('#<idOfForm>').serialize()); // will alert all form values in key / value string
or to submit the form using $.post() :
$.post("target.php", $("#<idOfForm>").serialize());
Related
I have form on the page, in the background I gather make an array of data that I want to pass to a back end controller. I can $post but I don't want the request to be ajax. I want to submit the array along with form, when the user presses the submit button. Does Javascript allow this anyway?
You can use iframe if you donot want to use ajax.
To POST to an iframe you must use form target.
Sample code :
<form
id="moodleform" target="iframe"
method="post" action="http://www.example.com/login/index.php"
>
<input type="hidden" name="username" value="guest"/>
<input type="hidden" name="password" value="guest"/>
<input type="hidden" name="testcookies" value="1"/>
</form>
<iframe name="iframe"></iframe>
<script type="text/javascript">
document.getElementById('moodleform').submit();
</script>
Why not have a hidden field that you populate with a serialized version of the data?
Alternatively, you could have multiple hidden input form elements with the same name, which (back-end application dependant) should give you the POST variable as an array of values.
Building on that, you could add the hidden input elements dynamically to the form.
Considering the following HTML:
<form id="upvoteForm" method="post" action="/post/upvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<form id="downvoteForm" method="post" action="/post/downvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<input type="hidden" id="_postid" value="1"/>
I'm trying to set the two input fields with the name post_id to to value from _postid using this JavaScript and jQuery:
$(document).ready(function() {
$('#post_id').val($('#_postid').val());
});
However, as you can see in this jsFiddle, it's only setting the value of the first one. How do I set the value of both of them? I thought the selector would end up grabbing both.
Now, I realize you might be wondering why I have two forms on this page. The basic reason is I have button inputs that I've styled the way I want but then I use the onclick to call the submit of the appropriate form here. I am ultimately going to be leveraging AJAX here, but that's coming later.
id is always unique. you cannot select 2 elements with same id. select by name
$(document).ready(function() {
$('input[name=post_id]').val($('#_postid').val());
});
Having two HTML elements with the same ID is illegal and will cause undefined behavior such as what you're experiencing. Using the same name is valid, however. Therefore you could use a selector like $('form > input[name=post_id]'), which would look for an input inside of a form with the name attribute set to post_id.
I'm trying to serialize some contents inside of a form:
<form>
<input ...>
<input ...>
<div id=div1>
<input name=input1 ...>
<input name=input2 ...>
</div>
</form>
<script>
jQuery("#div1").serialize();
</script>
In this code serialize() function doesn't serialize the input1 and input2. Even I tried
jQuery("<form>" + jQuery("div1").html() + "</form>").serialize()
And it does serialize the inputs but all the values are Empty! it's like it doesn't assign values that user entered: input1=&input2=
Is there any solutions out there?
(The reason I need to do this is that this page is a ASP.NET page since ASP.NET standard is a single form based so I have to deal with this situation)
Better solution is to use the :input selector since it gets all of the form elements
jQuery('#div1 :input').serialize();
I believe this will work:
jQuery('#div1 input').serialize()
send a value from javascript to html form input
having a value in javascript,
need to send that to
<'input type='hidden' id='imgscr'/>
when submitting the form the value also should submit..
(set value from javascript to html form input)
Your question is not very clear, but I think the answer is
document.getElementById('imgsrc').value = js_variable;
You might want to put this function in the forms onsubmit handler.
If you use jQuery, this is as easy as:
<form onsubmit="$('#imgscr').val('some value')">
You can substitute whatever you want for the value.
It is also possible to use the form notation if you set a name on your input field:
<form onsubmit="this.imgsrc.value='some value'">
<input type="hidden" name="imgsrc" id="imgsrc">
</form>
I have a form in HTML with multiple inputs of type submit:
<form id = "myForm1" action="doSomethingImportant/10" class="postLink" method="post">
<input type="hidden" id="antiCSRF" name="antiCSRF" value="12345"></input>
<input type="submit" value="clickThisLink"></input>
<input type="submit" value="Don'tclickThisLink"></input>
</form>
What I want to do is select only the first input with type submit while ignoring the others, the snippet of code I currently have is as follows, note it is within a for-each loop that goes through all forms on my page, hence (this) to avoid confusion:
var name = $(this).find("input[type='submit']").val();
I'm thinking this already grabs the first input of type submit by default, I'm not sure if that assumption is correct or if there's a more formal way of going about it, thanks.
Try:
$(this).children("input[type='submit']:first").val();
how about the first selector
var name = $("input[type='submit']:first").val();