I am using htmx and want my code to be able to retrieve the value of a set item in a radio group. Here is the htmx that I am trying to use:
<div id="js-scale">
<div>
<input type=radio name="Js" id="JsStrong"></input>
<label for="JsStrong">Agree</label>
</div>
<div>
<input type=radio name="Js" id="JsNeutral"></input>
<label for="JsNetutral">Neutral</label>
</div>
<div>
<input type=radio name="Js" id="JsPos"></input>
<label for="JsPos">Disagree</label>
</div>
<div id="control-block">
<button hx-post={{'/session/'+session+'/tweet/'+tweet+'/Skip'}} hx-trigger="click" hx-swap="innerHTML" hx-target="#session" type="button">Skip</button>
<button hx-post={{'/session/'+session+'/tweet/'+tweet+'/js_submit'}} hx-trigger="click" hx-swap="innerHTML" hx-target="#session" type="button" hx-include="[name='Js']">Submit</button>
</div>
</div>
When I press submit, and in the python use requests.get_data(), it returns Js=on, irrespective of which radio button has been selected.
How do I set this up to be able to determine which of the radio buttons has been selected?
I found that by explicitly setting the value for the button, it works fine. The correct snippet is:
<div id="js-scale">
<div>
<input type=radio name="Js" id="JsStrong value="JsStrong"></input>
<label for="JsStrong">Agree</label>
</div>
<div>
<input type=radio name="Js" id="JsNeutral" value="JsNeutral"></input>
<label for="JsNetutral">Neutral</label>
</div>
<div>
<input type=radio name="Js" id="JsPos" value="JsPos"></input>
<label for="JsPos">Disagree</label>
</div>
<div id="control-block">
<button hx-post={{'/session/'+session+'/tweet/'+tweet+'/Skip'}} hx-trigger="click" hx-swap="innerHTML" hx-target="#session" type="button">Skip</button>
<button hx-post={{'/session/'+session+'/tweet/'+tweet+'/js_submit'}} hx-trigger="click" hx-swap="innerHTML" hx-target="#session" type="button" hx-include="[name='Js']">Submit</button>
</div>
</div>
This is because of how HTML works, from the MDN 'input type=radio' page:
If you omit the value attribute in the HTML, the submitted form data assigns the value on to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be contact=on, which isn't helpful. So don't forget to set your value attributes!
Related
Here when country name is given in the text field display all the states in the dropdown list
Here is my html code
<div class="control-group">
<label class="control-label pull-left" for="coubtry">Sales order</label>
<div class="controls">
<input name="country_name" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label pull-left" for="capacity">Items</label>
<div class="controls">
<select name="states">
<option value="">-----</option>
( How to display the states in dropdown based on country given above??)
</select>
</div>
</div>
Here country is given in text and i need the states in dropdown list
I have a modal popup that allows users to input data. I want to pass that data to Flask so that I can put it in my database. For some reason, no data is being passed. I am printing out request.form and it logs "ImmutableMultiDict([])", when it should contain my form's inputs. I have been trying to use POST, but I'm open to other ideas. This is happening on Heroku, I haven't tested it locally.
HTML
<!-- Modal -->
<div class="modal fade" id="newProjectModal" tabindex="-1" aria-labelledby="newProjectModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newProjectModalLabel">Create Project</h5>
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
<form action="/createproject/" name="createProjectForm" id="createProjectForm" method="POST">
<div class="modal-body">
<div class="mb-3">
<label for="projectNameInput" class="form-label">Project Name</label>
<input type="text" class="form-control" id="projectNameInput" name="projectName" placeholder="New Project">
</div>
<div class="mb-3">
<label for="projectDescriptionInput" class="form-label">Project Description</label>
<textarea class="form-control" id="projectDescriptionInput" name="projectDescription" rows="3"></textarea>
</div>
<label for="selectUsersInput" class="form-label">Assign Personnel</label>
<select class="form-select" id="selectUsersInput" name="selectUsers" multiple aria-label="multiple select example">
{% for user in users %}
<option value="{{ user }}">{{ user }}</option>
{% endfor %}
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Close</button>
<button class="btn btn-primary" type="submit" name="submit" value="Submit">Create Project</button>
</div>
</tr>
</form>
</div>
</div>
</div>
Python
#app.route('/createproject/', methods=['POST'])
def createproject():
if request.method == 'POST':
print(request.form)
project_name = request.form.get('projectName')
project_description = request.form.get('projectDescription')
return '''
<h1>The name value is: {}</h1>
<h1>The description value is: {}</h1>'''.format(project_name, project_description)
project_name and project_description are always "None" instead of the entered value
All checkboxes are checked first, after that I try to uncheck all besides "Киберспорт"
I don't understand why Selenium can't click some checkboxes..
I use this script
checkboxes = subpage.find_elements_by_xpath(".//div[contains(#class, 'col-xs-6 col-md-3 order-item')]") # list of all checkboxes
for i, chckbx in enumerate(checkboxes):
if chckbx.get_attribute("data-order") != "Киберспорт":
print(f"{chckbx.text}") # I get all names of checkboxes besides "Киберспорт"
chckbx.click()
However, Selenium clicks not all checkboxes
Result is shown on the picture
First 2 checkboxes in HTML:
<div class="col-xs-6 col-md-3 order-item" data-order="Авст. футбол">
<div class="checkbox">
<input checked="checked" name="sports[]" value="20" id="sports_20" type="checkbox">
<label for="sports_20">
<span class="custom_checkbox"></span>
<p>Авст. футбол</p>
</label>
</div>
</div>
<div class="col-xs-6 col-md-3 order-item" data-order="Гэл.спорт">
<div class="checkbox">
<input checked="checked" name="sports[]" value="23" id="sports_23" type="checkbox">
<label for="sports_23">
<span class="custom_checkbox"></span>
<p>Гэл.спорт</p>
</label>
</div>
</div>
The checkboxes has an id. It may be easier to search by the id. subpage.find_element_by_id('sports_20')
I have this HTML page in which I have 2 forms. Django is not checking the form validation for the first form. I want it to check form validation for the first form.
This is the Html Code
<form method="post" id="msform">
{% csrf_token %}
<!-- progressbar -->
<ul id="progressbar">
<li class="active" id="conf"><strong>Configuration</strong></li>
<li id="auth"><strong>Authentication</strong></li>
</ul>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div> <br> <!-- fieldsets -->
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-7">
<h2 class="fs-title">Cluster Configuration</h2>
</div>
<div class="col-5">
<h2 class="steps">Step 1 - 2</h2>
</div>
</div>
{{ form1|crispy }}
</div> <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-7">
<h2 class="fs-title">Authentication</h2>
</div>
<div class="col-5">
<h2 class="steps">Step 2 - 2</h2>
</div>
</div>
{{ form2|crispy }}
</div><button type="submit" class="btn btn-primary" >Next</button>
</fieldset>
</form>
If I use submit button instead of next for the first form then neither the second form opens nor the form is submitted (i.e. nothing is happening).
So I think the issue might be because you have over arching form tag, and two forms sent inside it from your view function:
What you have right now is this:
<form>
<fieldset>
<! –– Your Code ––>
{{ form1|crispy }}
</div> <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<! –– Your Code ––>
{{ form2|crispy }}
</div><button type="submit" class="btn btn-primary" >Next</button>
</fieldset>
</form>
As you can see from the above simplification of your original post, you have two forms templated inside one form tag. Thus when you hit either of the the submit button both of them gets sent.
If I am not mistaken, I believe what you might want is something along the lines of this:
<form name="form1" id="form1">
<fieldset>
<! –– Your Code ––>
{{ form1|crispy }}
</div> <input type="button" name="form1" class="next action-button" value="Next1" />
</fieldset>
</form>
<form name="form2" id="form2">
<fieldset>
<! –– Your Code ––>
{{ form1|crispy }}
</div> <input type="button" name="form2" class="next action-button" value="Next2" />
</fieldset>
</form>
Take note of the fact that I have changed your button names, as well as added ids and names to each form, you might also want to add ids as well as unique values to your buttons as well. This would help you build if conditions to determine which form has been submitted and so on, in your view function
Here is a link that describe how to handle this in more depth.
Which is all nice and dandy, but the conclusion of that linked page is this:
Let me know if it helps, feel free to ask more if you do not understand/the changes does not work
I am trying to write python code which does the following:
1) Logs into OKCupid
2) Goes to a users questions page
3) Answers an unanswered question.
I am using RoboBrowser to do this. I can do steps 1), 2) and I can get the form of the question I want to submit, but once I submit (using RoboBrowser's submit) it doesn't seem to go through to OKCupid (in that the question isn't registered as answered on my profile).
Here is the code I have. Note the My_RoboBrowser just allows me to pass False to RoboBrowser.open for the verify argument.
class My_RoboBrowser(RoboBrowser):
def __init__(self, auth=None, parser=None, headers=None, user_agent=None, history=True):
RoboBrowser.__init__(self, parser=None, user_agent=None, history=True)
def Open(self, vURL, vVerify=True):
response = self.session.get(vURL, verify=vVerify)
self._update_state(response)
browser = My_RoboBrowser()
urlL = 'https://okcupid.com/login'
browser.open(url)
form = browser.get_form(id='loginbox_form')
form['username'] = 'Username'
form['password'] = 'Password'
browser.submit_form(form)
urlQ = 'https://www.okcupid.com/profile/USER/questions?low=1'
browser.open(urlQ)
Question_Tag = browser.find_all(class_="not_answered")[0]
ID = Question_Tag.get('data-qid')
#Get the form to fill out
Form = browser.get_form(id='answer_'+str(ID))
Form['my_answer'].value = '1'
Form['their_answer'].value = ['1']
Form['importance'].value = '1'
browser.submit_form(Form)
Also if it is helpful when I look at the form object Form in an IPython notebook it says:
<RoboForm my_answer=, their_answer=[], importance=>
before the submit and
<RoboForm my_answer=1, their_answer=['1'], importance=1>
after.
Finally, if it is helpful, the following is the code for one of the forms I am trying to answer (which was gotten by inspecting the element)
<form id="answer_179268" name="answer_179268" class="answer_area okform initialized">
<div class="container my_answer">
<input id="my_answer_1_179268" name="my_answer" value="1" false="" type="radio">
<label class="radio" for="my_answer_1_179268">
<span class="icon"></span>
Yes
</label>
<input id="my_answer_2_179268" name="my_answer" value="2" false="" type="radio"></input>
<label class="radio" for="my_answer_2_179268">
<span class="icon"></span>
No
</label>
</div>
<div class="container acceptable_answers">
<div class="title">
<p>Answer(s) you’ll accept</p>
</div>
<label class="checkbox acceptable_answer" for="their_answer_1_179268">
<input id="their_answer_1_179268" class="acceptable_answer" name="their_answer" value="1" false="" type="checkbox"></input>
<span class="icon"></span>
Yes
</label>
<label class="checkbox acceptable_answer" for="their_answer_2_179268">
<input id="their_answer_2_179268" class="acceptable_answer" name="their_answer" value="2" false="" type="checkbox"></input?
<span class="icon"></span>
No
</label>
<label class="checkbox irrelevant" for="their_answer_any_179268">
<input id="their_answer_any_179268" class="irrelevant" name="their_answer" value="irrelevant" type="checkbox"></input>
<span class="icon"></span>
Any of the above
</label>
</div>
<div class="container importance">
<div class="title">
<p>Importance</p>
</div>
<div class="importance_radios">
<input id="importance_179268_5" name="importance" value="5" false="" type="radio"></input>
<label class="importance_5 radio" for="importance_179268_5" data-count="5">
<span class="icon"></span>
<div class="bar"></div>
<span class="label"></span>
</label>
<input id="importance_179268_4" name="importance" value="4" false="" type="radio"></input>
<label class="importance_4 radio" for="importance_179268_4" data-count="4">
<span class="icon"></span>
<div class="bar"></div>
<span class="label">A little</span>
</label>
<input id="importance_179268_3" name="importance" value="3" false="" type="radio"></input>
<label class="importance_3 radio" for="importance_179268_3" data-count="3">
<span class="icon"></span>
<div class="bar"></div>
<span class="label">Somewhat</span>
</label>
<input id="importance_179268_2" name="importance" value="2" false="" type="radio"> </input>
<label class="importance_2 radio" for="importance_179268_2" data-count="2">
<span class="icon"></span>
<div class="bar"></div>
<span class="label"></span>
</label>
<input id="importance_179268_1" name="importance" value="1" false="" type="radio"> </input>
<label class="importance_1 radio" for="importance_179268_1" data-count="1">
<span class="icon"></span>
<div class="bar"></div>
<span class="label">Very</span>
</label>
</div>
<div class="irrelevant_message">
<span class="irrelevant_text">Irrelevant</span>
<span class="message_text">(Because you’ll accept any answer, this question is marked irrelevant)</span>
</div>
</div>
<div id="explanation_container_179268" class="container explanation">
<div id="answer_179268_explanationContainer" class="inputcontainer textarea noresize empty">
<textarea id="answer_179268_explanation" class="noresize" placeholder="Explain your answer (optional)" false=""></textarea>
<span class="message empty" style="height: 0"></span>
<div class="icon"></div>
</div>
</div>
<button id="submit_btn_179268" class="submit_btn flatbutton disabled small">Answer</button>
<button id="cancel_btn_179268" class="cancel_btn flatbutton silver small">Cancel</button>
<a class="skip_btn inner" href="javascript:void(0)" draggable="false">Skip question</a>
<div id="public_container_179268" class="answer_privately">
<label class="checkbox" for="private_179268">
<input id="private_179268" false="" type="checkbox"></input>
<span class="icon"></span>
<span class="text">Answer privately</span>
</label>
</div>
</form>
I've seen several cases where someone couldn't submit b/c the site used Javascript to submit forms. In other words, they could use Robobrowser or Mechanize to log in and fill out a form, but the form itself could not be submitted -- as submission relied on JS. That may be your problem here. If that's the case, you should try using Selenium.
You can likely verify whether JS is being used to submit in your browser's inspector. <ctrl + shift + i / network / *clear* inspector's network panel before clicking submit / click submit / check type for your Post>
I think that's how I verified, but others here would know better than me. Good luck!
You should take a look at https://github.com/IvanMalison/okcupyd. It will let you do this without using a browser.